Android开发之ViewPager切换动画

今天带来ViewPager的切换动画，先来看下效果图：

ViewPager画廊效果

我们让可见区域[-1,1]根据position值的变化做了一些动作，假设页面往左滑：
1、在区间[-1,0）里是从0到-1，也就是透明度随着position的减小而减小，最终为0.5f（半透明）。
2、在区间(0,1)里是从1到0，也就是透明度随着position的减小而增大，最终为1f（不透明）。
3、它们的缩放规则是随着position减小，先小后大，因为这边有个绝对值abs方法和最大数max方法作用着，当position的绝对值大于0.9f的时候，页面才开始放大。

画廊效果实现的工具方法类

package com.lcw.dynamicviewpager.transformer;import android.support.v4.view.ViewPager;import android.view.View;/** * 画廊效果Transformer（半透明+缩放） * Create by: chenwei.li * Date: 2017/12/8 * time: 14:55 * Email: lichenwei.me@foxmail.com */public class GalleryTransformer implements ViewPager.PageTransformer {    private static final float MAX_ALPHA=0.5f;    private static final float MAX_SCALE=0.9f;    @Override    public void transformPage(View page, float position) {        if(position<-1||position>1){            //不可见区域            page.setAlpha(MAX_ALPHA);            page.setScaleX(MAX_SCALE);            page.setScaleY(MAX_SCALE);        }else {            //透明度效果            if(position<=0){                //pos区域[-1,0)                page.setAlpha(MAX_ALPHA+MAX_ALPHA*(1+position));            }else{                //pos区域[0,1]                page.setAlpha(MAX_ALPHA+MAX_ALPHA*(1-position));            }            //缩放效果            float scale=Math.max(MAX_SCALE,1-Math.abs(position));            page.setScaleX(scale);            page.setScaleY(scale);        }    }}

ViewPager卡片效果

卡片效果实现的工具方法类

package com.lcw.dynamicviewpager.transformer;import android.support.v4.view.ViewPager;import android.view.View;/** * 卡片效果Transformer * Create by: chenwei.li * Date: 2017/12/8 * time: 14:55 * Email: lichenwei.me@foxmail.com */public class CardTransformer implements ViewPager.PageTransformer {    private int mOffset = 60;    @Override    public void transformPage(View page, float position) {        if (position <= 0) {            page.setRotation(45 * position);            page.setTranslationX((page.getWidth() / 2 * position));        } else {            //移动X轴坐标，使得卡片在同一坐标            page.setTranslationX(-position * page.getWidth());            //缩放卡片并调整位置            float scale = (page.getWidth() - mOffset * position) / page.getWidth();            page.setScaleX(scale);            page.setScaleY(scale);            //移动Y轴坐标            page.setTranslationY(position * mOffset);        }    }}

画廊效果使用方法：

mViewPager = (ViewPager) findViewById(R.id.vp_main_pager);mViewPagerAdapter = new ViewPagerAdapter(this, mImages);mViewPager.setOffscreenPageLimit(3);mViewPager.setPageMargin(30);mViewPager.setAdapter(mViewPagerAdapter);mViewPager.setPageTransformer(false, new GalleryTransformer());

卡片效果使用方法：

mViewPager= (ViewPager) findViewById(R.id.vp_main_pager);mViewPagerAdapter=new ViewPagerAdapter(this,mImages);mViewPager.setAdapter(mViewPagerAdapter);mViewPager.setOffscreenPageLimit(5);mViewPager.setPageTransformer(true,new CardTransformer());

原文地址:https://mp.csdn.net/postedit/94430271

更多相关文章

随机推荐