最近用到ViewPage比较多研究了一下切换效果的实现,网上的教程也挺多,其中鸿洋大神的博客中是通过重写onPageScrolled方法来实现的具体见http://blog.csdn.net/lmj623565791/article/details/38026503
后来发现通过ViewPage的setPageTransformer(boolean arg0, PageTransformer arg1)就可以实现动画效果,第二个参数便是我们的动画效果。我们只要继承这个类,在其中加入自己的动画代码就可实现自定义动画,下面我们来看看效果:
接着我们分析下动画如何实现的
PageTransformer 是一个接口,我们要实现他的public void transformPage(View view, float position) 方法,该方法中的第二个参数便是position,从图中我们可以看出展现在我们面前的屏幕position为零,当我们永生滑动屏幕想切换到下一页时,当前屏幕上的view的position由0到-1移动,下一个页面position由1到0变换,所以我们只要 对view在对应的位置设置相应的动画效果即可比如效果图中的那段对应的代码为:
if(position<0&&position>-1){
view.setPivotX(view.getWidth());
view.setPivotY(view.getHeight()/2);
view.setRotationY(position*60f);
}
if(position>0&&position<1){
view.setPivotX(0);
view.setPivotY(view.getHeight()/2);
view.setRotationY(position*60);
}
在我自己写的ViewPager中我加入了一个参数Type,然后PageTransformer 通过参数选择不同的动画效果这样大家就不用自己写动画效果了,直接设置一下Type就好。
接下来上代码:
package com.liu.myviewpage;
import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.View;
public class MyViewPage extends ViewPager {
public static final int ANIMATION_1=1;
public static final int ANIMATION_2=2;
public static final int ANIMATION_3=3;
public static final int ANIMATION_4=4;
public static final int ANIMATION_5=5;
public static final int ANIMATION_6=6;
public static final int ANIMATION_7=7;
public MyViewPage(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
}
public MyViewPage(Context context) {
this(context, null);
// TODO Auto-generated constructor stub
}
@Override
public void setPageTransformer(boolean arg0, PageTransformer arg1) {
super.setPageTransformer(arg0, arg1);
}
public void setPageTransformer(int type) {
setPageTransformer(true, new MyPageTransforme(type));
}
class MyPageTransforme implements PageTransformer{
private int type;
public MyPageTransforme(int type) {
super();
this.type = type;
}
@Override
public void transformPage(View view, float position) {
switch (type) {
case ANIMATION_1:
animation1(view, position);
break;
case ANIMATION_2:
animation2(view, position);
break;
case ANIMATION_3:
animation3(view, position);
break;
case ANIMATION_4:
animation4(view, position);
break;
case ANIMATION_5:
animation5(view, position);
break;
case ANIMATION_6:
animation6(view, position);
break;
default:
break;
}
}
private void animation1(View view, float position) {
if(position<0&&position>-1){
view.setScaleX(1.0f+position*0.3f);
view.setScaleY(1.0f+position*0.3f);
}
if(position>0&&position<1){
view.setScaleX(1.0f-position*0.3f);
view.setScaleY(1.0f-position*0.3f);
}
}
private void animation2(View view, float position) {
if(position<0&&position>-1){
view.setPivotX(view.getWidth());
view.setPivotY(view.getHeight()/2);
view.setRotationY(position*60f);
}
if(position>0&&position<1){
view.setPivotX(0);
view.setPivotY(view.getHeight()/2);
view.setRotationY(position*60);
}
}
private void animation3(View view, float position) {
view.setPivotX(view.getWidth()*0.5f);
view.setPivotY(view.getHeight()*0.5f);
view.setRotationY(-position*40f);
}
private void animation4(View view, float position) {
if(position < -1){
//不可见
view.setAlpha(0);
}else if(position <= 1){
view.setAlpha(1);
view.setScaleX(Math.max(0.9f,1-Math.abs(position)));
view.setScaleY(Math.max(0.9f,1-Math.abs(position)));
}else{
//不可见
view.setAlpha(0);
}
}
private void animation5(View view, float position) {
if(position<0&&position>-1){
}
if(position>0&&position<1){
view.setTranslationX(-view.getWidth()*position);
view.setScaleX(1f-0.3f*position);
view.setScaleY(1f-0.3f*position);
view.setAlpha(1-0.3f*position);
}
}
private void animation6(View view, float position) {
if(position<0&&position>-1){
view.setPivotX(0);
view.setPivotY(view.getHeight());
view.setRotation(position*90f);
}
if(position>0&&position<1){
view.setTranslationX(-view.getWidth()*position);
}
}
}