Android:ViewPager动画的实现原理

最新推荐文章于 2024-09-23 13:56:36 发布

转载最新推荐文章于 2024-09-23 13:56:36 发布 · 727 阅读

文章标签：

#viewpager #动画

Android 专栏收录该内容

95 篇文章

订阅专栏

本文解析了ViewPager动画的实现原理，介绍了PageTransformer接口的应用，并对比了AndroidImageSlider与JazzyViewPager两种实现方式，还展示了如何利用PageTransformer巧妙处理ViewPager中的内容动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

来源 http://www.lightskystreet.com/2014/12/15/viewpager-anim/

前言
前两天看到鲍永章分享的Great animations with PageTransformer以及农民伯伯分享的Create ViewPager transitions 文章，都是通过ViewPager来实现酷炫的动画，而现在的App中ViewPager的动画使用也非常的广泛。正好最近一直研究动画，那么就趁热打铁，分析一下相关的开源库吧。

本篇文章介绍的ViewPager动画，可以分为两类，第一类是针对于ViewPager的界面滑动动画(这个是PageTransformer的真正用途)，分析并比较了AndroidImageSlider和JazzyViewPager两种实现，第二类是对ViewPager中的内容进行动画处理，这个是这个是PageTransformer的巧妙应用，处理好了可以达到很棒的交互效果，示例是Yahoo天气的视差效果。

ViewPager动画的实现原理
从3.0开始，ViewPager开始支持自定义切换动画，暴露的接口为PageTransformer，因此只要实现PageTransformer接口和其唯一的方法transformPage(View view, float position)即可。

/**
* A PageTransformer is invoked whenever a visible/attached page is scrolled.
* This offers an opportunity for the application to apply a custom transformation
* to the page views using animation properties.
*
* <p>As property animation is only supported as of Android 3.0 and forward,
* setting a PageTransformer on a ViewPager on earlier platform versions will
* be ignored.</p>
*/
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);
}

参数position
给定界面的位置相对于屏幕中心的偏移量。在用户滑动界面的时候，是动态变化的。那么我们可以将position的值应用于setAlpha(), setTranslationX(), or setScaleY()方法，从而实现自定义的动画效果。
另外在ViewPager滑动时，内存中存活的Page都会执行transformPage方法，在滑动过程中涉及到两个Page，当前页和下一页，而它们的position值是相反的（因为是相对运动,一个滑入一个滑出），比如，页面A向右滑动到屏幕一半，页面B也正好处于一半的位置，那么A和B的 position为：0.5 和 -0.5
position == 0 ：当前界面位于屏幕中心的时候
position == 1 ：当前Page刚好滑出屏幕右侧
position == -1 ：当前Page刚好滑出屏幕左侧

http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0115/2314.html