ViewPager设置切换动画

来源:互联网 发布:淘宝手机版店招制作 编辑:程序博客网 时间:2024/05/21 10:23

在原生的ViewPager切换时会显的很突然很生硬,百度了许多前辈的案例,思路都差不多,那就是先写一个继承Scroller的类SpeedScroller


package com.youhe.yoyo.addforlu;import android.content.Context;import android.view.animation.Interpolator;import android.widget.Scroller;/** * Created by abc on 2016/12/1. */public class SpeedScroller extends Scroller {    private int mDuration = 1000;    public SpeedScroller(Context context) {        super(context);    }    public SpeedScroller(Context context, Interpolator interpolator) {        super(context, interpolator);    }    @Override    public void startScroll(int startX, int startY, int dx, int dy, int duration) {        // Ignore received duration, use fixed one instead        super.startScroll(startX, startY, dx, dy, mDuration);    }    @Override    public void startScroll(int startX, int startY, int dx, int dy) {        // Ignore received duration, use fixed one instead        super.startScroll(startX, startY, dx, dy, mDuration);    }    public void setmDuration(int time) {        mDuration = time;    }    public int getmDuration() {        return mDuration;    }}


这个类写好之后就可以直接引用了,在需要用到的Activity里:

mypager = (ViewPager) parentView.findViewById(R.id.News_pager);        mypager.setPageTransformer(true, new ZoomOutPageTransformer());        pagerAdapter = new MyFragmentPagerAdapter(getChildFragmentManager(), imageList,context);        mypager.setAdapter(pagerAdapter);        SpeedScroller mScroller;        try {            Field mField = ViewPager.class.getDeclaredField("mScroller");            mField.setAccessible(true);            mScroller = new SpeedScroller(mypager.getContext(),new LinearInterpolator());            mField.set(mypager, mScroller);            mScroller.setmDuration(500);//ms        } catch (Exception e) {            e.printStackTrace();        }

首先绑定组件,然后设置动画(下面将给出7种不同的动画风格)
mypager.setPageTransformer(true, new ZoomOutPageTransformer());
注意这句:
mScroller = new SpeedScroller(mypager.getContext(),new LinearInterpolator());

SpeedScroller方法里的第二个参数是插值器,我们也有很多种
AccelerateDecelerateInterpolator   在动画开始与介绍的地方速率改变比较慢,在中间的时候加速AccelerateInterpolator                     在动画开始的地方速率改变比较慢,然后开始加速AnticipateInterpolator                      开始的时候向后然后向前甩AnticipateOvershootInterpolator     开始的时候向后然后向前甩一定值后返回最后的值BounceInterpolator                          动画结束的时候弹起CycleInterpolator                             动画循环播放特定的次数,速率改变沿着正弦曲线DecelerateInterpolator                    在动画开始的地方快然后慢LinearInterpolator                            以常量速率改变OvershootInterpolator                      向前甩一定值后再回到原来位置

注意哦,我不是Activity而是Fragment,所以我的adapter是FragmentPagerAdapter,如果你是Activity那就用PagerAdapter就行了

(这不是我们的重点哦)
mScroller.setmDuration(500);最后再这个方法里设置切换的时机长就行了,单位是毫秒(viewpager被广泛应用于广告轮播图,此处正好需要它)


接下来给大家码7种不同的动画风格:(在你的项目里新建以下类就行了)
1、深入浅出DepthPageTransformer
import android.support.v4.view.ViewPager.PageTransformer;import android.view.View;public class DepthPageTransformer implements PageTransformer {private static float MIN_SCALE = 0.5f;/** * position参数指明给定页面相对于屏幕中心的位置。它是一个动态属性,会随着页面的滚动而改变。当一个页面填充整个屏幕是,它的值是0, * 当一个页面刚刚离开屏幕的右边时 * ,它的值是1。当两个也页面分别滚动到一半时,其中一个页面的位置是-0.5,另一个页面的位置是0.5。基于屏幕上页面的位置 * ,通过使用诸如setAlpha()、setTranslationX()、或setScaleY()方法来设置页面的属性,来创建自定义的滑动动画。 */@Overridepublic 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);view.setTranslationX(0);} else if (position <= 0) { // [-1,0]// Use the default slide transition when// moving to the left pageview.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 transitionview.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);view.setScaleX(1);view.setScaleY(1);}}}

2、立方体CubeTransformer
import com.nineoldandroids.view.ViewHelper;import android.support.v4.view.ViewPager.PageTransformer;import android.view.View;public class CubeTransformer implements PageTransformer {/** * position参数指明给定页面相对于屏幕中心的位置。它是一个动态属性,会随着页面的滚动而改变。当一个页面填充整个屏幕是,它的值是0, * 当一个页面刚刚离开屏幕的右边时,它的值是1。当两个也页面分别滚动到一半时,其中一个页面的位置是-0.5,另一个页面的位置是0.5。基于屏幕上页面的位置 * ,通过使用诸如setAlpha()、setTranslationX()、或setScaleY()方法来设置页面的属性,来创建自定义的滑动动画。 */@Overridepublic void transformPage(View view, float position) {if (position <= 0) {//从右向左滑动为当前View//设置旋转中心点;ViewHelper.setPivotX(view, view.getMeasuredWidth());ViewHelper.setPivotY(view, view.getMeasuredHeight() * 0.5f);//只在Y轴做旋转操作ViewHelper.setRotationY(view, 90f * position);} else if (position <= 1) {//从左向右滑动为当前ViewViewHelper.setPivotX(view, 0);ViewHelper.setPivotY(view, view.getMeasuredHeight() * 0.5f);ViewHelper.setRotationY(view, 90f * position);}}}


3、旋转RotateTransformer
import android.support.v4.view.ViewPager.PageTransformer;import android.view.View;import com.nineoldandroids.view.ViewHelper;public class RotateTransformer implements PageTransformer {/** * page当然值得就是滑动中德那个view,position这里是float,不是平时理解的int位置信息,而是当前滑动状态的一个表示, * 比如当滑动到正全屏时 * ,position是0,而向左滑动,使得右边刚好有一部被进入屏幕时,position是1,如果前一夜和下一页基本各在屏幕占一半时 * ,前一页的position是-0.5,后一页的posiotn是0.5,所以根据position的值我们就可以自行设置需要的alpha,x/y信息。 */@Overridepublic void transformPage(View view, float position) {if (position < -1) {} else if (position <= 0) {ViewHelper.setScaleX(view, 1 + position);ViewHelper.setScaleY(view, 1 + position);ViewHelper.setRotation(view, 360 * position);} else if (position <= 1) {ViewHelper.setScaleX(view, 1 - position);ViewHelper.setScaleY(view, 1 - position);ViewHelper.setRotation(view, 360 * position);} else {}}}


4、左右折叠AccordionTransformer
import android.support.v4.view.ViewPager.PageTransformer;import android.view.View;import com.nineoldandroids.view.ViewHelper;public class AccordionTransformer implements PageTransformer {@Overridepublic void transformPage(View view, float position) {if (position < -1) {ViewHelper.setPivotX(view, view.getMeasuredWidth() * 0.5f);ViewHelper.setPivotY(view, view.getMeasuredHeight() * 0.5f);ViewHelper.setScaleX(view, 1);} else if (position <= 0) {ViewHelper.setPivotX(view, view.getMeasuredWidth());ViewHelper.setPivotY(view, 0);ViewHelper.setScaleX(view, 1 + position);} else if (position <= 1) {ViewHelper.setPivotX(view, 0);ViewHelper.setPivotY(view, 0);ViewHelper.setScaleX(view, 1 - position);} else {ViewHelper.setPivotX(view, view.getMeasuredWidth() * 0.5f);ViewHelper.setPivotY(view, view.getMeasuredHeight() * 0.5f);ViewHelper.setScaleX(view, 1);}}}

5、右上角进入InRightUpTransformer
import android.support.v4.view.ViewPager.PageTransformer;import android.view.View;public class InRightUpTransformer implements PageTransformer {@Overridepublic void transformPage(View view, float position) {int pageHeight = view.getHeight();if (position < -1) {view.setAlpha(1);view.setTranslationY(0);} else if (position <= 0) {view.setTranslationY(pageHeight * -position);view.setAlpha(1 + position);// Android 3.1以下版本的用下面方法;// ViewHelper.setTranslationY(view, pageHeight * -position);// ViewHelper.setAlpha(view, 1 + position);} else if (position <= 1) {view.setTranslationY(view.getHeight() * -position);view.setAlpha(1 - position);// Android 3.1以下版本的用下面方法;// ViewHelper.setTranslationY(view, pageHeight * -position);// ViewHelper.setAlpha(view, 1 - position);} else {view.setTranslationY(0);view.setAlpha(1);}}}


6、右下角进入InRightDownTransformer
import android.support.v4.view.ViewPager.PageTransformer;import android.view.View;public class InRightDownTransformer implements PageTransformer {@Overridepublic void transformPage(View view, float position) {int pageHeight = view.getHeight();if (position < -1) {view.setAlpha(1);view.setTranslationY(0);} else if (position <= 0) {view.setTranslationY(pageHeight * position);view.setAlpha(1 + position);// Android 3.1以下版本的用下面方法;// ViewHelper.setTranslationY(view, pageHeight * -position);// ViewHelper.setAlpha(view, 1 + position);} else if (position <= 1) {view.setTranslationY(view.getHeight() * position);view.setAlpha(1 - position);// Android 3.1以下版本的用下面方法;// ViewHelper.setTranslationY(view, pageHeight * -position);// ViewHelper.setAlpha(view, 1 - position);} else {view.setTranslationY(0);view.setAlpha(1);}}}


7、淡入淡出ZoomOutPageTransformer
import android.support.v4.view.ViewPager.PageTransformer;import android.view.View;public class ZoomOutPageTransformer implements PageTransformer {private static float MIN_SCALE = 0.85f;private static float MIN_ALPHA = 0.5f;@Overridepublic 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.setTranslationX(0);} else if (position <= 1) { // [-1,1]// Modify the default slide transition to// shrink the page as wellfloat 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.setTranslationX(0);}}}
最后,原谅我不会录制短片,截图出来的效果不咋地,于是没附上图片。
我也是一名新手,文章写的不好请见谅,希望和大家一起进步~

源码点击这里


                                             
0 0
原创粉丝点击