2015-11-04 52 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转型变得轻而易举。干杯!