ViewPager切换动画

组件介绍

实现ViewPager具有页面切换动画效果。

动态图

vptransformer.gif

原理分析

使用ViewPager接口PageTransformer，重写void transformPage(View page, float position)方法即可自定义动画。page为当前滑动页面，position为当前页面偏移量。

ViewPager界面可显示的区域只会存在两个页面，position的值为-1到1。当前页面从ViewPager中间左滑至看不见时，position的值为0到-1，当前页面从ViewPager中间右滑至看不见时，position的值为0到1。同理，页面从左侧看不见滑至ViewPager中间，position的值为-1到0，页面从右侧看不见滑至ViewPager中间，position的值为1到0。


因此，只用在position为-1到1之间时，根据position值，为page做相关属性动画即可。

使用场景

可以用于引导页，其他图片展示、页面切换时需要动画效果，自定义动画即可扩展。

如何使用

第一步：xml布局

第二步：初始化组件、设置适配器

ViewPager vp = (ViewPager) findViewById(R.id.vp);
vp.setAdapter(new MyAdapter(getSupportFragmentManager()));

public static final int[] lays = {
            R.layout.fragment_01,
            R.layout.fragment_02,
            R.layout.fragment_03
};

class MyAdapter extends FragmentPagerAdapter {
        public MyAdapter(FragmentManager fm) {
            super(fm);
        }
        @Override
        public VpTransformerFragment getItem(int position) {
            VpTransformerFragment fg = new VpTransformerFragment();
            Bundle bundle = new Bundle();
            bundle.putInt("layout_id", lays[position % 3]);
            fg.setArguments(bundle);
            return fg;
        }
        @Override
        public int getCount() {
            return 6;
        }
    }

第三步：设置动画

vp.setPageTransformer(true,new CustomPageTransformer(2));

注意事项

new CustomPageTransformer(int animType)中animType目前只有5(1~5)个值，对应5种不同动画，也可以只定义动画。

版本控制

版本号	更新内容	修改人	修改时间
1.0	初次发布	lucky_bear	2017/7/6

项目地址

所在文件夹	demo位置
widget.VpTransformer	com.qr.demo.widget.VpTransformerActivity