码迷，mamicode.com
首页 > 其他好文 > 详细

ViewPager切换动画PageTransformer使用

时间：2015-03-12 09:42:41      阅读：129      评论：0      收藏：0      [点我收藏+]

标签：

Android从3.0开始，就添加了很多动画，ViewPager当然也不例外，相对于非常平庸的默认切换动画，Google给我们展示了两个动画例子：DepthPageTransformer和ZoomOutPageTransformer，实际上我们也可以通过实现ViewPager.PageTransformer来做出完全不同的切换动画效果。关键是要理解transformPage(View view, float position)的参数。view理所当然就是滑动中的那个view，position这里是float类型，不是平时理解的int位置，而是当前滑动状态的一个表示，比如当滑动到正全屏时，position是0，而向左滑动，使得右边刚好有一部被进入屏幕时，position是1，如果前一页和下一页基本各在屏幕占一半时，前一页的position是-0.5，后一页的posiotn是0.5，所以根据position的值我们就可以自行设置需要的alpha，x/y信息。

下面，我们来看看Google官方提供的两种动画效果的代码，很简单，相信每个人看过之后，都能自己实现一种动画效果，

DepthPageTransformer：

 

[java] view plaincopy
 
  1. public class DepthPageTransformer implements PageTransformer {  
  2.     private static float MIN_SCALE = 0.75f;  
  3.   
  4.     @SuppressLint("NewApi")  
  5.     @Override  
  6.     public void transformPage(View view, float position) {  
  7.         int pageWidth = view.getWidth();  
  8.         if (position < -1) { // [-Infinity,-1)  
  9.                                 // This page is way off-screen to the left.  
  10.             view.setAlpha(0);  
  11.         } else if (position <= 0) { // [-1,0]  
  12.                                     // Use the default slide transition when  
  13.                                     // moving to the left page  
  14.             view.setAlpha(1);  
  15.             view.setTranslationX(0);  
  16.             view.setScaleX(1);  
  17.             view.setScaleY(1);  
  18.         } else if (position <= 1) { // (0,1]  
  19.                                     // Fade the page out.  
  20.             view.setAlpha(1 - position);  
  21.             // Counteract the default slide transition  
  22.             view.setTranslationX(pageWidth * -position);  
  23.             // Scale the page down (between MIN_SCALE and 1)  
  24.             float scaleFactor = MIN_SCALE + (1 - MIN_SCALE)  
  25.                     * (1 - Math.abs(position));  
  26.             view.setScaleX(scaleFactor);  
  27.             view.setScaleY(scaleFactor);  
  28.         } else { // (1,+Infinity]  
  29.                     // This page is way off-screen to the right.  
  30.             view.setAlpha(0);  
  31.   
  32.         }  
  33.     }  
  34.   
  35. }  


ZoomOutPageTransformer：

 

 

[java] view plaincopy
 
  1. public class ZoomOutPageTransformer implements PageTransformer {  
  2.     private static float MIN_SCALE = 0.85f;  
  3.   
  4.     private static float MIN_ALPHA = 0.5f;  
  5.   
  6.     @Override  
  7.     public void transformPage(View view, float position) {  
  8.         int pageWidth = view.getWidth();  
  9.         int pageHeight = view.getHeight();  
  10.   
  11.         if (position < -1) { // [-Infinity,-1)  
  12.                                 // This page is way off-screen to the left.  
  13.             view.setAlpha(0);  
  14.         } else if (position <= 1) { // [-1,1]  
  15.                                     // Modify the default slide transition to  
  16.                                     // shrink the page as well  
  17.             float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));  
  18.             float vertMargin = pageHeight * (1 - scaleFactor) / 2;  
  19.             float horzMargin = pageWidth * (1 - scaleFactor) / 2;  
  20.             if (position < 0) {  
  21.                 view.setTranslationX(horzMargin - vertMargin / 2);  
  22.             } else {  
  23.                 view.setTranslationX(-horzMargin + vertMargin / 2);  
  24.             }  
  25.             // Scale the page down (between MIN_SCALE and 1)  
  26.             view.setScaleX(scaleFactor);  
  27.             view.setScaleY(scaleFactor);  
  28.             // Fade the page relative to its size.  
  29.             view.setAlpha(MIN_ALPHA + (scaleFactor - MIN_SCALE)  
  30.                     / (1 - MIN_SCALE) * (1 - MIN_ALPHA));  
  31.         } else { // (1,+Infinity]  
  32.                     // This page is way off-screen to the right.  
  33.             view.setAlpha(0);  
  34.         }  
  35.     }  
  36. }  

 

 

有了这两种效果，我们在代码中设置一下就生效了：mPager.setPageTransformer(true, new DepthPageTransformer());

 

下面是效果图：第一张是DepthPageTransformer效果，第二张是ZoomOutPageTransformer效果。

技术分享 技术分享

OK，最后奉上源代码：http://download.csdn.net/detail/weidi1989/6443601

ViewPager切换动画PageTransformer使用

标签：

原文地址：http://www.cnblogs.com/dongweiq/p/4331542.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！