Android自定义ViewPager的过渡动画

495 阅读1分钟

官方教程:developer.android.com/training/an…

动画效果1

动画1

创建ZoomOutPageTransformer类继承ViewPager.PageTransformer

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

/**
 * Created by yangshuai on 2015/10/15 0015 14:11.
 */
public class ZoomOutPageTransformer implements ViewPager.PageTransformer {

    private static final float MIN_SCALE = 0.85f;
    private static final float MIN_ALPHA = 0.5f;

    /**
     * 属性变换应用于给定的页面
     *
     * @param page     转换应用到这个页面
     * @param position Position of page relative to the current front-and-center position of the pager. 0 is front and center. 1 is one full
     */
    @Override
    public void transformPage(View page, float position) {

        int pageWidth = page.getWidth();
        int pageHeight = page.getHeight();

        if (position < -1){  // [-无穷,-1)

            // 这一页是屏幕左边
            page.setAlpha(0);

        }else if (position <= 1){  // [-1,1]

            // 修改默认的滑动过渡到缩小页面

            // 缩放比例
            float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));

            // 获取垂直margin
            float verMargin = pageHeight * (1 - scaleFactor) / 2;

            // 获取水平margin
            float horzmargin = pageWidth * (1 - scaleFactor) / 2;

            // 在潜藏过程中,默认动画(屏幕滑动)是仍旧发生的,所以必须用负的X平移来抵消它
            if (position < 0){
                page.setTranslationX(horzmargin  - verMargin / 2);
            }else {
                page.setTranslationX(-horzmargin + verMargin / 2);
            }

            page.setScaleX(scaleFactor);
            page.setScaleY(scaleFactor);

            page.setAlpha(MIN_ALPHA + (scaleFactor - MIN_SCALE) / (1 - MIN_SCALE) * (1 - MIN_ALPHA));

        }else{  // (1,+无穷]
            page.setAlpha(0);
        }
    }
}

使用

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

效果2

效果2

创建DepthPageTransformer类继承ViewPager.PageTransformer

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

/**
 * Created by yangshuai on 2015/10/15 0015 15:04.
 */
public class DepthPageTransformer implements ViewPager.PageTransformer {

    private static final float MIN_SCALE = 0.75f;

    @Override
    public void transformPage(View page, float position) {
        int pageWidth = page.getWidth();

        if (position < -1){
            page.setAlpha(0);

        }else if(position <= 0){ // [-1,0]

            // 使用默认的滑动过渡当向左移动页面
            page.setAlpha(1);
            page.setTranslationX(0);
            page.setScaleX(1);
            page.setScaleY(1);

        }else if(position <= 1){ // (0,1]

            // 向右滑动时淡出页面
            page.setAlpha(1 - position);

            // 抵消默认的滑动过度
            page.setTranslationX(pageWidth * -position);

            float scaleFactor = MIN_SCALE + (1 - MIN_SCALE) * (1 - Math.abs(position));

            page.setScaleX(scaleFactor);
            page.setScaleY(scaleFactor);
        }else {
            page.setAlpha(0);
        }

    }
}

使用

viewpager.setPageTransformer(true, new DepthPageTransformer());