垂直ViewPager中的动画

时间:2017-05-29 14:46:07

标签: java android animation android-viewpager android-pagetransformer

我需要以垂直file:///

制作此动画

enter image description here

https://www.youtube.com/watch?v=wuE-4jjnp3g

这是我到目前为止所做的:

ViewPager

这是结果:

enter image description here

https://www.youtube.com/watch?v=G9W2lCKP-_s

我正在使用垂直方向的原始ViewPager副本,以查看代码:https://github.com/Devlight/InfiniteCycleViewPager/blob/master/infinitecycleviewpager/src/main/java/com/gigamole/infinitecycleviewpager/VerticalViewPager.java

显然它甚至不接近,我需要预览下一页并使两页更接近。

enter image description here

请帮忙

谢谢。

1 个答案:

答案 0 :(得分:2)

我需要预览下一页

你必须添加

        android:paddingBottom="200dp"
        android:clipToPadding="false"

到布局中的<com.gigamole.infinitecycleviewpager.VerticalViewPager

在您的Java代码中输入

,当然您应该在布局中调整startTranslationstartValue以及paddingBottom

        viewPager.setPageTransformer(true, new ViewPager.PageTransformer() {
        @Override
        public void transformPage(View page, float position) {
            ViewCompat.setPivotY(page,0);
            ViewCompat.setPivotX(page,page.getWidth()/2);
            float endTranslation = 0f;
            float startTranslation  = -400f;
            float deltaTranslation = endTranslation - startTranslation;

            float endScale = 1f;
            float startScale = 0.8f;
            float deltaScale = endScale - startScale;

            float progressStart = 0.5f;
            float progressEnd = 1f;
            float progressDelta = progressEnd - progressStart;

            float progress = (position - progressStart)/progressDelta;
            if(progress>1)progress=1;
            if(progress<0)progress=0;

            progress = 1-progress;

            float currentScale = startScale + deltaScale*progress;
            ViewCompat.setScaleX(page, currentScale);
            ViewCompat.setScaleY(page, currentScale);

            float currentTranslation = startTranslation + deltaTranslation*progress;
            ViewCompat.setTranslationY(page, currentTranslation);
        }