Android卡片碎片动画

Question

这似乎是一个具有挑战性的动画，但我有一种感觉，这可以很容易地完成。我正在尝试实现如下所示的片段之间的动画（请参阅第二和第三象限）

进入和退出并不难，但是预显示下一张和上一张卡片的屏幕以及无缝切换到下一张卡片超出了我的知识范围。如果有人制作过类似的动画，请给我一些指点。

编辑

Android的官方文档在点击时过渡，即当用户点击页面缩小以显示最后一页和上一页时，滑动将其移动到下一页。我的要求是将页面保持在缩小级别，并在按钮单击时过渡：

问题:如何将视图默认为x缩放级别，以显示上一页的下一页部分和点击时的过渡。

Answer 1

对于提出此问题并寻求类似要求的人：

正如Anoop所建议的那样，官方文档很棒。只需实现 viewPager.PagerTransform 并将该类提供给您的 viewPager。此外，transformPage（实现的函数）在动画过渡中非常重要。

下一部分，是显示下一个和前一个片段的角落。这可以通过xml片段来实现。参考:带有突出孩子的Android提示浏览器

希望这有助于某人创建交互式应用程序。

更新

Anoop分享的这篇文章使这种转变变得轻而易举。干杯！

Answer 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());

正式文件。

检查此项和此项以显示近一项的边界。