基于上一篇《Android ViewPager使用》http://gqdy365.iteye.com/blog/2114963
本文实现ViewPager切换的7中常用动画,先上效果图:
[img]http://dl2.iteye.com/upload/attachment/0101/0362/48df5bae-3078-3575-aa15-96bfe51fc6fc.gif[/img]
[img]http://dl2.iteye.com/upload/attachment/0101/0128/df289d0a-64d4-3d6e-8e17-615e2673754b.png[/img]
实现过程:
1、ViewPager有提供一个接口PageTransformer,ViewPager在做页面切换时(onPageScrolled方法)会调用PageTransformer,来调用我们自定义的特效,逻辑关系如图:
[img]http://dl2.iteye.com/upload/attachment/0101/0126/935fdea4-f3d6-3aed-b4d6-c9fd7fac6bfb.jpg[/img]
2、动画的实现:
从Android3.1开始,View新增了如下方法:
setsetAlpha:透明度变化;
setTranslation:位置变化;
setScale:缩放变化;
setRotation:角度变化;
我们可以用这些方法的组合来实现各种View切换特效;
那是不是说Android3.1之前的版本就没办法使用这些方法呢?当然不是,我们有万能的github,万能的开源项目:https://github.com/JakeWharton/NineOldAndroids
他提供了我们在3.1以下版本实现上述方法的调用,为开源致敬,为共享致敬!!!
下面来看一下例子,立方体效果:
注释已经很详细了,怎么样,再不需要特别说明了吧!
其他效果类似!
3、使用方法:
只需一句话:
Demo见附件!
本文实现ViewPager切换的7中常用动画,先上效果图:
[img]http://dl2.iteye.com/upload/attachment/0101/0362/48df5bae-3078-3575-aa15-96bfe51fc6fc.gif[/img]
[img]http://dl2.iteye.com/upload/attachment/0101/0128/df289d0a-64d4-3d6e-8e17-615e2673754b.png[/img]
实现过程:
1、ViewPager有提供一个接口PageTransformer,ViewPager在做页面切换时(onPageScrolled方法)会调用PageTransformer,来调用我们自定义的特效,逻辑关系如图:
[img]http://dl2.iteye.com/upload/attachment/0101/0126/935fdea4-f3d6-3aed-b4d6-c9fd7fac6bfb.jpg[/img]
2、动画的实现:
从Android3.1开始,View新增了如下方法:
setsetAlpha:透明度变化;
setTranslation:位置变化;
setScale:缩放变化;
setRotation:角度变化;
我们可以用这些方法的组合来实现各种View切换特效;
那是不是说Android3.1之前的版本就没办法使用这些方法呢?当然不是,我们有万能的github,万能的开源项目:https://github.com/JakeWharton/NineOldAndroids
他提供了我们在3.1以下版本实现上述方法的调用,为开源致敬,为共享致敬!!!
下面来看一下例子,立方体效果:
public class CubeTransformer implements PageTransformer {
/**
* position参数指明给定页面相对于屏幕中心的位置。它是一个动态属性,会随着页面的滚动而改变。当一个页面填充整个屏幕是,它的值是0,
* 当一个页面刚刚离开屏幕的右边时,它的值是1。当两个也页面分别滚动到一半时,其中一个页面的位置是-0.5,另一个页面的位置是0.5。基于屏幕上页面的位置
* ,通过使用诸如setAlpha()、setTranslationX()、或setScaleY()方法来设置页面的属性,来创建自定义的滑动动画。
*/
@Override
public 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) {
//从左向右滑动为当前View
ViewHelper.setPivotX(view, 0);
ViewHelper.setPivotY(view, view.getMeasuredHeight() * 0.5f);
ViewHelper.setRotationY(view, 90f * position);
}
}
}
注释已经很详细了,怎么样,再不需要特别说明了吧!
其他效果类似!
3、使用方法:
只需一句话:
vPage.setPageTransformer(true, new CubeTransformer());
Demo见附件!