2

我需要这个动画在垂直ViewPager动画垂直ViewPager

enter image description here

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 
      } 

     } 
    }); 

这是结果:

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

请帮

谢谢。

+0

你正在使用什么'VerticalViewPager'? – RadekJ

+0

您好,请在这里查看:https://github.com/Devlight/InfiniteCycleViewPager/blob/master/infinitecycleviewpager/src/main/java/com/gigamole/infinitecycleviewpager/VerticalViewPager.java它的副本原始ViewPager与垂直方向 –

回答

2

我需要在下页

您对

​​

添加到您的<com.gigamole.infinitecycleviewpager.VerticalViewPager布局

在Java代码中把它的预览,当然你应该在你的布局中调整startTranslationstartValuepaddingBottom

 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); 
     } 
+0

它不像所希望的动画,主页面不在下面页面 –

+0

我更新了我的回答 – RadekJ

+0

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