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

哦,你更近了,下一頁還是不行,請稍等我上傳一個視頻 –