ViewPager切换动画——PageTransformer

来源：互联网发布：电脑怎样下糖豆软件编辑：程序博客网时间：2024/06/05 02:31

官方示例地址：
http://developer.android.com/training/animation/screen-slide.html

ViewPager的方法：

setPageTransformer(boolean reverseDrawingOrder, PageTransformer transformer)// 用于设置ViewPager切换时的动画效果

官方给出了两种效果实例：

1、DepthPageTransformer

public class DepthPageTransformer implements ViewPager.PageTransformer {      private static final float MIN_SCALE = 0.75f;      public void transformPage(View view, float position) {          int pageWidth = view.getWidth();          if (position < -1) { // [-Infinity,-1)              // This page is way off-screen to the left.              view.setAlpha(0);          } else if (position <= 0) { // [-1,0]              // Use the default slide transition when moving to the left page              view.setAlpha(1);              view.setTranslationX(0);              view.setScaleX(1);              view.setScaleY(1);          } else if (position <= 1) { // (0,1]              // Fade the page out.              view.setAlpha(1 - position);              // Counteract the default slide transition              view.setTranslationX(pageWidth * -position);              // Scale the page down (between MIN_SCALE and 1)              float scaleFactor = MIN_SCALE                      + (1 - MIN_SCALE) * (1 - Math.abs(position));              view.setScaleX(scaleFactor);              view.setScaleY(scaleFactor);          } else { // (1,+Infinity]              // This page is way off-screen to the right.              view.setAlpha(0);          }      }  }

viewpager使用

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

效果图

这里写图片描述

2、ZoomOutPageTransformer

public class ZoomOutPageTransformer implements ViewPager.PageTransformer  {      private static final float MIN_SCALE = 0.85f;      private static final float MIN_ALPHA = 0.5f;      @SuppressLint("NewApi")      public void transformPage(View view, float position)      {          int pageWidth = view.getWidth();          int pageHeight = view.getHeight();          Log.e("TAG", view + " , " + position + "");          if (position < -1)          { // [-Infinity,-1)              // This page is way off-screen to the left.              view.setAlpha(0);          } else if (position <= 1) //a页滑动至b页 ； a页从 0.0 -1 ；b页从1 ~ 0.0          { // [-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使用

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

这里写图片描述

还记得我上一篇博客一屏显示多个ViewPager子item不？
http://blog.csdn.net/codenoodles/article/details/50991793
下面来给它加上切换动画：
直接上代码：

package com.upc.viewpagerGallery.View;import android.support.v4.view.ViewPager;import android.view.View;/** * Created by Explorer on 2016/3/26. */public class ZoomOutPageTransformer implements ViewPager.PageTransformer {    private static final float MIN_SCALE = 0.9f;    private static final float MIN_ALPHA = 0.5f;    private static float defaultScale = 0.9f;    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);            view.setScaleX(defaultScale);            view.setScaleY(defaultScale);        } 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);            view.setScaleX(defaultScale);            view.setScaleY(defaultScale);        }    }}

这里就不贴效果图了，大家可以在下一篇博客里看到效果。

说一下原理：
position范围不同执行不同的逻辑
- （无穷，-1）：左边view不可见
- [-1，0]：左边view可见
- (0，1]：右边view可见
- (1,无穷):右边view不可见

我们可以根据这个原理自己定制想要的效果。

1 0