给ViewPager添加切换动画

转载请注明出处: http://blog.csdn.net/forwardyzk/article/details/44460857

给ViewPager添加切换动画

1.给ViewPager添加切换动画(支持3.0以上版本)

2.给ViewPager添加的切换动画(兼容3.0以下版本)

3.自定义ViewPager，包含切换动画

ViewPager无切换动画为:

使用官方的ViewPager切换动画

可以访问:http://developer.android.com/training/animation/screen-slide.html

如果上面的地址访问失败也可以访问:http://cs.szpt.edu.cn/android/training/animation/screen-slide.html

将ViewPager中的动画的切换效果类复制出来即可:

第一个切换动画效果类:

public class ZoomOutPageTransformer implements ViewPager.PageTransformer {
    private static float MIN_SCALE = 0.85f;
    private static 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);
        }
    }
}

第二个切换动画效果类:

public class DepthPageTransformer implements ViewPager.PageTransformer {
    private static 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);
        }
    }
}

使用setPageTransformer()方法设置动画的切换效果

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

效果分别是:

        

但是运行在3.0以下版本的手机上或者模拟上，此效果不其作用。

查看代码即可明白，查看ViewPager的setPageTransformer方法

然而DepthPageTransformer和ZoomOutPageTransformer里面用的也是属性动画，所以在3.0一下的版本，此切换的效果是不其作用的。

2.让其官方的ViewPager效果起作用

步骤:

1.使用nineoldandroids.jar包，此开源框架让属性动画向下兼容，更改DepthPageTransformer和ZoomOutPageTransformer中设置的属性动画，使用nineoldandroids的类的方法替换掉。

2.复制ViewPager源代码，修改其中的setPageTransformer方法

3.使用修改后的ViewPager和切换效果，既可在3.0一下的版本上运行

(1)将DepthPageTransformer设置属性的代码用nineoldandroids框架中的方法替换掉，这里只看举例其中的部分

对其其他的地方也设置的属性代码和ZoomOutPageTransformer设置的属性代码，就按照这中方式替换掉即可

(2)修改Viewpager源码

  复制ViewPager的源码，更名为MyViewPager

  

然后运行在3.0以下版本设备，运行效果和上面的一样

下面写一个切换的页面旋转的角度

根据ZoomOutPageTransformer中切换时，查看position值的变化

A页切换到B页---------向左滑动(第一页--->第二页)
A页的position 0.0 ~ -1
B页的position 1 ~ 0.0


B页切换到A页-------向右滑动(第二页--->第一页)
A页的position  -1~0.0
B页的position  0.0~1

/**
 * 旋转的切换效果
 */
public class RotatePageTransformer implements ViewPager.PageTransformer {

    private int MAX_ROTA = 20;

    public void transformPage(View view, float position) {
        /**
         A页切换到B页
         A页的position 0.0 ~ -1
         B页的position 1 ~ 0.0

         B页切换到A页
         A页的position  -1~0.0
         B页的position  0.0~1
         */
        if (position < -1) {
            ViewHelper.setRotation(view, 0);
        } else if (position <= 0) {
            //left
            ViewHelper.setRotation(view, position * MAX_ROTA);//设置旋转的角度
            ViewHelper.setPivotX(view, view.getWidth() / 2);//旋转中心X坐标
            ViewHelper.setPivotY(view, view.getMeasuredHeight());//旋转中心Y坐标
        } else if (position <= 1) {
            //right
            ViewHelper.setRotation(view, position * MAX_ROTA);
            ViewHelper.setPivotX(view, view.getWidth() / 2);
            ViewHelper.setPivotY(view, view.getMeasuredHeight());
        } else {
            ViewHelper.setRotation(view, 0);
        }
    }
}

效果:

3.自定义ViewPager，包含切换动画

  步骤:

(1)自定义ViewPager，MyViewPagerIncludeAnimation继承ViewPager

(2)想办法获取滑动时，显示的两个View，即LeftView和RightView

(3)在适配器中初始化和销毁View的时候，同时也处理LeftView和RightView

(4)在onPageScrolled方法中设计切换动画

自定义View

public class MyViewPagerIncludeAnimation extends ViewPager {
    //存放LeftView和RightView
    private Map<Integer, View> mChildsView = new HashMap<Integer, View>();
    private View mLfetView;
    private View mRightView;
    private float mScale;
    private float mTran;
    private float MIN_SCALE = 0.5f;

    public MyViewPagerIncludeAnimation(Context context) {
        super(context);
    }

    public MyViewPagerIncludeAnimation(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

定义存放LeftView和RightViewView

 /**
     * 添加View
     *
     * @param view
     * @param position
     */
    public void setViewForPositon(View view, int position) {
        mChildsView.put(position, view);
    }

    /**
     * 移除View
     *
     * @param position
     */
    public void removeViewForPosition(int position) {
        mChildsView.remove(position);
    }

在定义适配器中要调用这两个方法

viewpager.setAdapter(new PagerAdapter() {
            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                ImageView image = imagesList.get(position);
                container.addView(image);
                //添加View
                viewpager.setViewForPositon(image, position);
                return image;
            }

            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
                container.removeView(imagesList.get(position));
                //移除View
                viewpager.removeViewForPosition(position);
            }

            @Override
            public int getCount() {
                return imageIds.length;
            }

            @Override
            public boolean isViewFromObject(View view, Object object) {
                return view == object;
            }
        });

在onPageScrolled方法中获取LeftView和RightView，设置切换动画

 @Override
    protected void onPageScrolled(int position, float offset, int offsetPixels) {
        super.onPageScrolled(position, offset, offsetPixels);
        mLfetView = mChildsView.get(position);
        mRightView = mChildsView.get(position + 1);
        animationLeftAndRight(mLfetView, mRightView, offset, offsetPixels);
    }

    /**
     * 切换动画
     *
     * @param mLfetView
     * @param mRightView
     * @param offset
     * @param offsetPixels
     */
    private void animationLeftAndRight(View mLfetView, View mRightView, float offset, int offsetPixels) {
        if (mRightView != null) {
            mScale = (1 - MIN_SCALE) * offset + MIN_SCALE;
            mTran = -getWidth() - getPageMargin() + offsetPixels;
            ViewHelper.setScaleX(mRightView, mScale);
            ViewHelper.setScaleY(mRightView, mScale);
            ViewHelper.setTranslationX(mRightView, mTran);
        }
        if (mLfetView != null) {
            //保持在上层
            mLfetView.bringToFront();
        }

    }

效果图:

源码下载: http://download.csdn.net/detail/forwardyzk/8528213