垂直 ViewPager 中的动画

Posted 2023-04-19

【中文标题】垂直 ViewPager 中的动画

【英文标题】：Animation in a vertical ViewPager

【发布时间】：2017-10-29 22:11:11

【问题描述】：

我需要在垂直的ViewPager 中制作这个动画：

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

这是我到目前为止所尝试的：

   viewPager = (VerticalViewPager) rootView.findViewById(R.id.viewpager);

   viewPager.setPageTransformer(false, new ViewPager.PageTransformer() 
        @Override
        public void transformPage(View page, float position) 

            if (position >= 0.5F && position <= 1F) 

                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;

                float endValue = 1f;
                float startValue = 0.8f;

                float delta = endValue - startValue;

                progress = 1-progress;
                float currentScale = startValue + delta*progress;

                ViewCompat.setPivotY(page,0);
                ViewCompat.setScaleX(page, currentScale);
                ViewCompat.setScaleY(page, 0.9F);
                ViewCompat.setTranslationY(page, 0);

             else 
                ViewCompat.setScaleX(page, 1.0F); //- width
                ViewCompat.setScaleY(page, 0.9F); //- height
            

        
    );

这是结果：

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

显然它甚至没有关闭，我需要预览下一页并使两个页面更接近。

请帮忙

谢谢。

【问题讨论】：

你在用什么VerticalViewPager？

嗨，请在此处查看：github.com/Devlight/InfiniteCycleViewPager/blob/master/… 它是垂直方向的原始 ViewPager 的副本

【参考方案1】：

我需要预览下一页

你必须添加

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

到您的<com.gigamole.infinitecycleviewpager.VerticalViewPagerin 布局

在你的 java 代码中放上它，当然你应该在你的布局中调整 startTranslation 和 startValue 和 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);
        

【讨论】：

它不像想要的动画，主页不在下一页的上方

哦，你更近了，下一页还是不行，请稍等我上传视频

设置`viewPager.setOffscreenPageLimit(3); ` 并按照我所说的调整值

我仍然需要一些调整，谢谢。

嗨@RadekJ，在使用 api 19 对三星进行测试后，下一页未居中且位于“主页”上方