自定义viewpager的切换动画(旋转动画)

来源:互联网 发布:喵翻网络连接失败 编辑:程序博客网 时间:2024/06/07 18:47

我们来实现一个简单viewpager的切换动画,本文只是为了实现一个viewpager的动画,对与viewpager等不做过多的解释

首先我们需要实现一个viewpager的切换动画我们需要用到一个方法:setPageTransformer()
传入两个参数,第一个参数:我们传入true,第二个参数传入一个ViewPager.PageTransformer 的子类对象
mViewPager.setPageTransformer(true,new RotateTransformer());
下面我们开始书写我们的动画,我们要实现的是一个旋转动画,其实我们的动画在官网也给出了两个示例,但是如果我们想实现其他的效果,那么就需要我们自己去自定义了,本文也是仿照官网来写的动画:
首先我们创建一个类实现ViewPager.PageTransformer 并重写它的方法,他传入的两个参数:第一个参数view就是我们当前显示view,第二个就是下一个界面占当前屏幕的百分比
public class RotateTransformer implements ViewPager.PageTransformer {
@Override
public void transformPage(View view, float position) {
}
}
然后我们就在transformpage中书写我们的逻辑代码,首先我们我们将我们的页面考虑成5个页面
我们考虑当界面数是大于1与小于-1的我们不做动画,所以我们先将这两个排除
//小于-1的界面不执行旋转
if (position < -1) {
view.setRotation(0);
 
}
else {
//大于1的界面不执行旋转
view.setRotation(0);
}
然后我们继续我们的下一步:我们现在只需要考虑的就是我们当前显示的界面与我们预显示的界面
当前我们显示的界面就是小于=1的界面,我们需要去设置我们当前显示的界面(0号界面)的旋转动画,我们是需要这个动画从0°转到-25°,并设置它的旋转中心是我们当前界面的底部的中心点
else if (position <= 1) { // [0-- 》》 - 1]这里的就是我们的第一个界面
//我们需要实现旋转,那么我们就需要将第一个界面以自己界面的底部的中心为圆点,然后进行从0到-25°的旋转
float ration = position * MAX_ROTATE;//MAX_ROTATE=25
view.setRotation(ration);
view.setPivotX(view.getWidth()/2);
view.setPivotY(view.getHeight());
下面我们实现我们的预显示界面
我们的预显示界面我们想要实现的是他的旋转角度从25°到0°,所以我们的写法其实和第一个界面的旋转是一样的
else if (position <= 1) { // 【1---》》0】这里的就是我们的第二个界面
//我们实现第二个界面的选择其实原理和我们第一个界面的旋转都是同一个道理,只不过我们是从25°到0°
float ration=position*MAX_ROTATE;
view.setRotation(-ration);
view.setPivotX(view.getWidth()/2);
view.setPivotY(view.getHeight());
 
}
好了,到这里我们的旋转动画就完成了,我的表达能力不太行,所以非常抱歉,解释不是很清楚。下面我将动画的完整源码贴出来吧,既然我们实现了旋转动画,那其他更炫的动画就等着你们咯!!
package com.example.gaoxiang.news.custom;
 
import android.support.v4.view.ViewPager;
import android.view.View;
public class RotateTransformer implements ViewPager.PageTransformer { 
private static final float MAX_ROTATE = 25f;
 
/**
* view就是我们显示的那个页面
* @param view
* @param position
*/
@Override
public void transformPage(View view, float position) {
//小于-1的界面不执行旋转
if (position < -1) {
view.setRotation(0);
 
} else if (position <= 1) { // [0-- 》》 - 1]这里的就是我们的第一个界面
//我们需要实现旋转,那么我们就需要将第一个界面以自己界面的底部的中心为圆点,然后进行从0到-25°的旋转
float ration = position * MAX_ROTATE;
view.setRotation(ration);
view.setPivotX(view.getWidth()/2);
view.setPivotY(view.getHeight());
} else if (position <= 1) { // 【1---》》0】这里的就是我们的第二个界面
//我们实现第二个界面的选择其实原理和我们第一个界面的旋转都是同一个道理,只不过我们是从25°到0°
float ration=position*MAX_ROTATE;
view.setRotation(-ration);
view.setPivotX(view.getWidth()/2);
view.setPivotY(view.getHeight());
 
} else {
//大于1的界面不执行旋转
view.setRotation(0);
}
}
}

0 0
原创粉丝点击