安卓卡片段动画 [英] Android card fragment animation

问题描述

这似乎是一个具有挑战性的动画，但我有一种感觉，这可以很容易做到。我想实现片段之间的动画象下面这样（见第二和第三象限）

It seems like a challenging animation, but I have a feeling this can be done very easily. I am trying to achieve an animation between Fragments like below (see 2nd and 3rd quadrant)

输入和退出都不难，但pre-显示下一个和previous卡的屏幕，并顺利过渡到下一个卡超出我的知识范围。请，如果任何人有从事过类似的动画，给我一些指点。

Enter and exit are not difficult, but pre-displaying next and previous card's screen and seamless transition to next card is out of my knowledge scope. Please, if anyone has worked on a similar animation, give me some pointers.

修改

Android的转变上点击IE浏览器的官方文件，当用户点击页面被缩小，显示去年和previous页面，轻扫其移动到下一个。我的要求是留在缩小水平和过渡页面上的按钮点击：

The official documentation of Android transitions on click i.e. when user clicks page is zoomed out to show last and previous page and swipe moves it to next one. My requirement is to leave the page at zoomed out level and transition on button clicks:

问：怎么会认为默认了对x缩放级别，显示previous翻页部分和过渡上点击

Question: How will be the view default out to x zoom level to show previous next page parts and transition on click.

推荐答案

您可以使用自定义的 PageTransformer 。

You can customize the transition animation between fragments using 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());

官方文档。

结帐<一href="http://stackoverflow.com/questions/13914609/viewpager-with-$p$pvious-and-next-page-boundaries/15773055#15773055">this和<一href="http://stackoverflow.com/questions/30572605/viewpager-show-next-and-before-item-$p$pview-current-page">this用于示出的近1边界。

Checkout this and this for showing boundaries of near one.

这篇关于安卓卡片段动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！