2015-11-04 84 views
1

這似乎是一個具有挑戰性的動畫,但我有一種感覺,這可以很容易地完成。我想實現像下面片段之間的動畫(見第二和第三象限)Android卡片動畫

enter image description here

進入和退出都不難,但前顯示下一個和以前的卡的屏幕和無縫過渡到下一個卡超出了我的知識範圍。請,如果任何人有類似的動畫,給我一些指針。

編輯

Android的過渡上的官方文檔點擊即當用戶點擊頁面縮小顯示最近的和以前的頁面和輕掃其移動到下一個。我的要求是留在縮小水平和過渡頁面上的按鈕點擊:

enter image description here

問:怎麼會認爲默認了對x縮放級別,顯示下一頁頁零件和點擊過渡。

+0

如何查看帶有動畫過渡的傳呼? –

+0

我正在沿着這些路線前進,請參閱更新後的問題 – Kay

回答

2

您可以使用PageTransformer自定義片段之間的過渡動​​畫。

ZoomOutPageTransformer

import android.support.v4.view.ViewPager; 
import android.view.View; 

public class ZoomOutPageTransformer implements ViewPager.PageTransformer { 
    private static final float MIN_SCALE = 0.85f; 
    private static final float MIN_ALPHA = 0.5f; 

    public void transformPage(View view, float position) { 
     int pageWidth = view.getWidth(); 
     int pageHeight = view.getHeight(); 

     if (position < -1) { // [-Infinity,-1) 
      // This page is way off-screen to the left. 
      view.setAlpha(0); 

     } else if (position <= 1) { // [-1,1] 
      // Modify the default slide transition to shrink the page as well 
      float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position)); 
      float vertMargin = pageHeight * (1 - scaleFactor)/2; 
      float horzMargin = pageWidth * (1 - scaleFactor)/2; 
      if (position < 0) { 
       view.setTranslationX(horzMargin - vertMargin/2); 
      } else { 
       view.setTranslationX(-horzMargin + vertMargin/2); 
      } 

      // Scale the page down (between MIN_SCALE and 1) 
      view.setScaleX(scaleFactor); 
      view.setScaleY(scaleFactor); 

      // Fade the page relative to its size. 
      view.setAlpha(MIN_ALPHA + 
        (scaleFactor - MIN_SCALE)/
          (1 - MIN_SCALE) * (1 - MIN_ALPHA)); 

     } else { // (1,+Infinity] 
      // This page is way off-screen to the right. 
      view.setAlpha(0); 
     } 
    } 
} 

使用

viewPager.setPageTransformer(true, new ZoomOutPageTransformer()); 

官方documentation

結賬thisthis顯示接近1的邊界。

+0

感謝Anoop,更新了問題,看看您是否也有一些想法 – Kay

1

對於誰來到這個問題尋找類似要求人們:

由於Anoop表明,官方文檔是偉大的。只需實現viewPager.PagerTransform並將該類提供給viewPager。另外,transformPage(實現的函數)在動畫轉換中非常重要。

下一部分,是展示下一個和前一個片段的角落。這可以通過xml的片段實現。參考:Android tip viewpager with protruding children

希望這可以幫助別人創建交互式應用程序。

UPDATE

本帖由Anoop共享使得this轉型變得輕而易舉。乾杯!