Android实现千变万化的ViewPager切换动画

之前写过一篇文章：android自定义viewpager实现个性化的图片切换效果，有朋友提出，viewpager自带了一个setpagetransformer用于设置切换动画~
本篇文章，将进行以下内容学习：
1、介绍如何使用setpagetransformer设置切换动画；
2、自定义pagetransformer实现个性的切换动画；
3、该方法在sdk11以下的版本不起作用，我们会对其做一定修改，让其向下兼容。
官方示例地址： 有兴趣的可以去看看~~

好了，下面开始编写代码~~
一、setpagetransformer的使用
首先我们迅速的实现一个传统的viewpager效果~
1、布局文件

<relativelayout xmlns:android="http://schemas.android.com/apk/res/android" 
  xmlns:tools="http://schemas.android.com/tools" 
  android:layout_width="match_parent" 
  android:layout_height="match_parent" > 
 
  <android.support.v4.view.viewpager 
    android:id="@+id/id_viewpager" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" /> 
 
</relativelayout> 

2、mainactivity

package com.zhy.demo_zhy_08_viewpageranim; 
 
import java.util.arraylist; 
import java.util.list; 
 
import android.app.activity; 
import android.os.bundle; 
import android.support.v4.view.pageradapter; 
import android.support.v4.view.viewpager; 
import android.view.view; 
import android.view.viewgroup; 
import android.view.window; 
import android.widget.imageview; 
import android.widget.imageview.scaletype; 
 
public class mainactivity extends activity 
{ 
  private viewpager mviewpager; 
  private int[] mimgids = new int[] { r.drawable.guide_image1, 
      r.drawable.guide_image2, r.drawable.guide_image3 }; 
  private list<imageview> mimageviews = new arraylist<imageview>(); 
 
  @override 
  protected void oncreate(bundle savedinstancestate) 
  { 
    super.oncreate(savedinstancestate); 
 
    requestwindowfeature(window.feature_no_title); 
    setcontentview(r.layout.activity_main); 
 
    initdata(); 
 
    mviewpager = (viewpager) findviewbyid(r.id.id_viewpager); 
 
    mviewpager.setadapter(new pageradapter() 
    { 
      @override 
      public object instantiateitem(viewgroup container, int position) 
      { 
 
        container.addview(mimageviews.get(position)); 
        return mimageviews.get(position); 
      } 
 
      @override 
      public void destroyitem(viewgroup container, int position, 
          object object) 
      { 
 
        container.removeview(mimageviews.get(position)); 
      } 
 
      @override 
      public boolean isviewfromobject(view view, object object) 
      { 
        return view == object; 
      } 
 
      @override 
      public int getcount() 
      { 
        return mimgids.length; 
      } 
    }); 
 
  } 
 
  private void initdata() 
  { 
    for (int imgid : mimgids) 
    { 
      imageview imageview = new imageview(getapplicationcontext()); 
      imageview.setscaletype(scaletype.center_crop); 
      imageview.setimageresource(imgid); 
      mimageviews.add(imageview); 
    } 
  } 
 
} 

好了，这样一个传统viewpager就实现了~~大家对上面代码应该不会有任何陌生的感觉~运行效果也不用贴图了，大家肯定知道。

二、pagetransformer
viewpager有个方法叫做：
setpagetransformer(boolean reversedrawingorder, pagetransformer transformer) 用于设置viewpager切换时的动画效果，并且google官方还给出了两个示例。
只需要在上述代码中调用setpagetransformer即可添加切换动画效果~~下面演示google的两个pagetransformer的代码，以及运行效果。
1）、depthpagetransformer

public class depthpagetransformer implements viewpager.pagetransformer { 
  private static final float min_scale = 0.75f; 
 
  public 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); 
 
    } else if (position <= 0) { // [-1,0] 
      // use the default slide transition when moving to the left page 
      view.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 transition 
      view.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); 
    } 
  } 
} 

调用代码：
mviewpager.setpagetransformer(true, new depthpagetransformer()); 
效果：

2）、zoomoutpagetransformer

package com.zhy.view; 
 
import android.annotation.suppresslint; 
import android.support.v4.view.viewpager; 
import android.util.log; 
import android.view.view; 
 
public class zoomoutpagetransformer implements viewpager.pagetransformer 
{ 
  private static final float min_scale = 0.85f; 
  private static final float min_alpha = 0.5f; 
 
  @suppresslint("newapi") 
  public void transformpage(view view, float position) 
  { 
    int pagewidth = view.getwidth(); 
    int pageheight = view.getheight(); 
 
    log.e("tag", view + " , " + position + ""); 
 
    if (position < -1) 
    { // [-infinity,-1) 
      // this page is way off-screen to the left. 
      view.setalpha(0); 
 
    } else if (position <= 1) //a页滑动至b页 ； a页从 0.0 -1 ；b页从1 ~ 0.0 
    { // [-1,1] 
      // modify the default slide transition to shrink the page as well 
      float 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); 
    } 
  } 
} 

调用代码：
mviewpager.setpagetransformer(true, new zoomoutpagetransformer()); 
效果：

效果图都是google官网上的，我们的测试图会在兼容3.0以下贴出来，不然就重复了~~
为viewpager添加切换就一行代码是不是很happy，可惜是不兼容3.0以下的版本的，该方法的注释上写到：
setting a pagetransformer prior to android 3.0 (api 11) will have no effect 在3.0之前的版本设置此方法是没有效果的，那么下面我们就看如何让其兼容3.0以下版本。
三、版本的向下兼容
1）、不兼容的原因
首先看下为什么不兼容，3.0以下呢？
看上面的两个示例代码，代码中view的动画使用的是属性动画，而属性动画是3.0才推出的，那么这么写肯定是不兼容3.0以下了。
那么我们首先引入nineoldandroids，让动画先能在3.0以下跑再说：
修改depthpagetransformer

package com.zhy.view; 
 
import com.nineoldandroids.view.viewhelper; 
 
import android.annotation.suppresslint; 
import android.support.v4.view.viewpager; 
import android.view.view; 
 
public class depthpagetransformer implements viewpager.pagetransformer 
{ 
  private static final float min_scale = 0.75f; 
 
  public 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); 
      viewhelper.setalpha(view, 0); 
    } else if (position <= 0)// a页滑动至b页 ； a页从 0.0 -1 ；b页从1 ~ 0.0 
    { // [-1,0] 
      // use the default slide transition when moving to the left page 
      // view.setalpha(1); 
      viewhelper.setalpha(view, 1); 
      // view.settranslationx(0); 
      viewhelper.settranslationx(view, 0); 
      // view.setscalex(1); 
      viewhelper.setscalex(view, 1); 
      // view.setscaley(1); 
      viewhelper.setscaley(view, 1); 
 
    } else if (position <= 1) 
    { // (0,1] 
      // fade the page out. 
      // view.setalpha(1 - position); 
      viewhelper.setalpha(view, 1 - position); 
 
      // counteract the default slide transition 
      // view.settranslationx(pagewidth * -position); 
      viewhelper.settranslationx(view, pagewidth * -position); 
 
      // scale the page down (between min_scale and 1) 
      float scalefactor = min_scale + (1 - min_scale) * (1 - position); 
      // view.setscalex(scalefactor); 
      viewhelper.setscalex(view, scalefactor); 
      // view.setscaley(1); 
      viewhelper.setscaley(view, scalefactor); 
 
    } else 
    { // (1,+infinity] 
      // this page is way off-screen to the right. 
      // view.setalpha(0); 
      viewhelper.setalpha(view, 1); 
    } 
  } 
} 

很简单，把所有属性动画换成viewhelper去设置就好了。现在我们去3.0以下的机子上去运行，发现还是没有效果~~~
为什么呢？
我们再去看看setpagetransformer的源码：

public void setpagetransformer(boolean reversedrawingorder, pagetransformer transformer) { 
    if (build.version.sdk_int >= 11) { 
      final boolean hastransformer = transformer != null; 
      final boolean needspopulate = hastransformer != (mpagetransformer != null); 
      mpagetransformer = transformer; 
      setchildrendrawingorderenabledcompat(hastransformer); 
      if (hastransformer) { 
        mdrawingorder = reversedrawingorder ? draw_order_reverse : draw_order_forward; 
      } else { 
        mdrawingorder = draw_order_default; 
      } 
      if (needspopulate) populate(); 
    } 
  } 

终于发现原因了，原来在此方法内部判断了如果是11以上的版本才让动画生效~~
那么，没办法了，如果想兼容，必须修改viewpager的源码了~~
2）、完美向下兼容
我们将viewpager的源码拷贝一份至我们的项目中，修改名称为viewpagercompat；然后注释掉sdk版本判断那一句

public class viewpagercompat extends viewgroup {
public void setpagetransformer(boolean reversedrawingorder, viewpager.pagetransformer transformer) { 
//    if (build.version.sdk_int >= 11)  
    { 
      final boolean hastransformer = transformer != null; 
      final boolean needspopulate = hastransformer != (mpagetransformer != null); 
      mpagetransformer = transformer; 
      setchildrendrawingorderenabledcompat(hastransformer); 
      if (hastransformer) { 
        mdrawingorder = reversedrawingorder ? draw_order_reverse : draw_order_forward; 
      } else { 
        mdrawingorder = draw_order_default; 
      } 
      if (needspopulate) populate(); 
    } 
  } 
...
}

注意，所有的pagetransformer使用viewpager.pagetransformer
然后我们把项目中的viewpager改为viewpagercompat；记得修改布局文件，以及mainactivity中的viewpager为viewpagercompat
我们在2.3.3的模拟器上测试下效果：

可以看到，我们的切换动画完美的运行在2.3.3的机器上~~so happy ~~没有viewpager源码的童鞋不要紧，我会在文末的源码下载中加入viewpager源码，让你可以尽情去测试~~
当然了，仅仅是兼容当然不能满足我们的好奇心，难道我们做到了兼容，还只能使用google给的示例动画么~~我们强大的创新呢~~下面带领大家分析setpagetransformer方法，然后设计一个个性的动画切换效果
四、自定义pagetransformer实现个性切换动画

public interface pagetransformer { 
    /** 
    * apply a property transformation to the given page. 
    * 
    * @param page apply the transformation to this page 
    * @param position position of page relative to the current front-and-center 
    *         position of the pager. 0 is front and center. 1 is one full 
    *         page position to the right, and -1 is one page position to the left. 
    */ 
    public void transformpage(view page, float position); 
  } 

可以看到该接口只有一个方法，第一个是我们的view，第二个是position~~
当我们滑动时：会打印出当然viewpager中存活的每个view以及它们的position的变化~~注意是每一个，所以建议别只log position，不然你会觉得莫名其妙的输出~~
position的可能性的值有，其实从官方示例的注释就能看出：
[-infinity,-1)  已经看不到了
(1,+infinity] 已经看不到了
 [-1,1]
重点看[-1,1]这个区间 ， 其他两个的view都已经看不到了~~

假设现在viewpager在a页现在滑出b页，则:
a页的position变化就是( 0, -1]
b页的position变化就是[ 1 , 0 ]
知道了我们滑动时position的变化~~那么就开始设计我们的个性的切换效果；
官方给的例子，有变化透明度、偏移量、缩放的，我们准备来个不一样的，我们变化角度，即rotation;
大概的效果是这样的：

下面我们分析代码：
我们设置view的旋转中心为：

viewhelper.setpivotx(view, view.getmeasuredwidth() * 0.5f);
viewhelper.setpivoty(view, view.getmeasuredheight());

依然是viewpager在a页现在滑出b页
那么a页应当在滑动过程中0度到-20度的偏移，b页应当在滑动过程中+20度到0度的偏移
结合
a页的position变化就是( 0, -1]
b页的position变化就是[ 1 , 0 ]
那么旋转的角度即：mrot = (20 * position); a页 mrot :0 ,~ -20 ; b页 mrot :20 ~ 0  ;
瞬间觉得好简单：
完整代码：

package com.zhy.view; 
 
import com.nineoldandroids.view.viewhelper; 
 
import android.annotation.suppresslint; 
import android.support.v4.view.viewpager; 
import android.util.log; 
import android.view.view; 
 
public class rotatedownpagetransformer implements viewpager.pagetransformer 
{ 
   
  private static final float rot_max = 20.0f; 
  private float mrot; 
   
 
   
  public void transformpage(view view, float position) 
  { 
 
    log.e("tag", view + " , " + position + ""); 
 
    if (position < -1) 
    { // [-infinity,-1) 
      // this page is way off-screen to the left. 
      viewhelper.setrotation(view, 0); 
 
    } else if (position <= 1) // a页滑动至b页 ； a页从 0.0 ~ -1 ；b页从1 ~ 0.0 
    { // [-1,1] 
      // modify the default slide transition to shrink the page as well 
      if (position < 0) 
      { 
 
        mrot = (rot_max * position); 
        viewhelper.setpivotx(view, view.getmeasuredwidth() * 0.5f); 
        viewhelper.setpivoty(view, view.getmeasuredheight()); 
        viewhelper.setrotation(view, mrot); 
      } else 
      { 
 
        mrot = (rot_max * position); 
        viewhelper.setpivotx(view, view.getmeasuredwidth() * 0.5f); 
        viewhelper.setpivoty(view, view.getmeasuredheight()); 
        viewhelper.setrotation(view, mrot); 
      } 
 
      // scale the page down (between min_scale and 1) 
 
      // fade the page relative to its size. 
 
    } else 
    { // (1,+infinity] 
      // this page is way off-screen to the right. 
      viewhelper.setrotation(view, 0); 
    } 
  } 
} 

你没看错，if else 里面代码是一样的，为了好理解特意没有合并到一起。

到此，我们从setpagetransformer使用，到修改viewpager做到向下兼容，直至自己定义出个性的切换效果 都已经介绍完毕。大家可以发挥自己的创造力，做出各种神奇的动画效果，ok，就到这里！
如果你喜欢自定义viewpager来实现，请移步：android自定义viewpager实现个性化的图片切换效果
源码下载：viewpager切换动画
以上就是本文的全部内容，希望对大家学习android软件编程有所帮助。