垂直ViewPager中的动画 [英] Animation in a vertical ViewPager

问题描述

我需要在垂直 ViewPager 中制作此动画：

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

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

请帮助

谢谢。

解决方案

我需要预览下一页

您必须添加

  android：paddingBottom = 200dp 
 android：clipToPadding = false 
  

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

在您的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; 
 
浮动进度=（位置-progressStart）/ progressDelta; 
 if（progress> 1）progress = 1; 
 if（progress< 0）progress = 0; 
 
进度= 1进度； 
 
 float currentScale = startScale + deltaScale * progress; 
 ViewCompat.setScaleX（page，currentScale）; 
 ViewCompat.setScaleY（page，currentScale）; 
 
 float currentTranslation = startTranslation + deltaTranslation *进度； 
 ViewCompat.setTranslationY（page，currentTranslation）; 
} 
  

I need to make this animation in a vertical ViewPager :

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

this what i tried so far :

   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
            }

        }
    });

this is the result:

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

I'm using a Copy of original ViewPager with vertical orientation, to see the code : https://github.com/Devlight/InfiniteCycleViewPager/blob/master/infinitecycleviewpager/src/main/java/com/gigamole/infinitecycleviewpager/VerticalViewPager.java

Obviously its not even close, i need to have a preview of the next page and make the two pages closer .

Please help

Thank you.

解决方案

i need to have a preview of the next page

you have to add

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

to your <com.gigamole.infinitecycleviewpager.VerticalViewPagerin layout

in your java code put it, of course you should tweak startTranslation and startValue and paddingBottom in your layout

        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中的动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！