浅谈 Android ViewPager 切换动画

这篇文章不是我自己写的, 是 Stew 写的,我发在我的简书,为了公众账号可以有一个原文链接,因为公众账号比较看代码不方便。


应部门大神邀请,写一篇关于 Android 动画方面的小记,也算是一种锻炼吧,自知菜鸟,学识浅陋,有错提之。

​ViewPager 是谷歌官方给我们提供的一个向下兼容包(Android-support-v4.jar)里面的一个类。我可以用其做简单的app引导页,也可以做一些复杂的页菜单(类似网易新闻,简书等app的页面菜单)。不熟悉 ViewPager 的同学可以参照如下链接进行学习:

  1. http://blog.csdn.net/harvic880925/article/details/38453725 (harvic 大神写的基础篇)
  2. http://developer.android.com/reference/android/support/v4/view/ViewPager.html ViewPager 对应官方文档地址

具体细节不再敖述,下面我们直接进入主题—— Viewpager 切换动画

ViewPager 是从 Android 3.0 开始支持自定义动画的,官方给出了 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);
    }

从官方文档可以看出,在 transformPage 方法中, 会传递两个参数, page 即当前界面,以及该 page 对应的 position。重点在于参数 position ,其意思是当前界面的位置相对于屏幕中心的偏移量。在滑动界面时,参数 position 是实时变化的,具体规律如下:

  1. 开始或活动结束:

当position = 0 :当前界面位于屏幕中心

当position = 1 :当前Page刚好滑出屏幕,位于屏幕右侧

当position = -1 :当前Page刚好滑出屏幕,位于屏幕左侧

  1. 滑动过程中:

滑动过程中涉及到两个 page ,当前 page 和下一个 page(一个滑出屏幕,一个滑入屏幕),且都会执行 transformPage 方法。举个简单例子:从前往后有 A、B、C 3个界面的引导页,开始显示 A 界面,然后手指向左滑动,A 界面开始向左滑出屏幕,B 界面开始向左滑入屏幕,A 界面的 position0 渐变到 -1 ,B 界面的 position 从 1 渐变到 0 。

可以想象到两者的 position 的绝对值相加一直是1。同学们可以将 position 用日志打出来观察其具体的变化规律。掌握了position的变化规律,就不难理解,为什么可以将 position 运用到我们的切换动画中了。我们可以对 page 本身设置 setAlpha() , setTranslationX() , setTranslationY() , setScaleX() , setScaleY() 方法,也可以对 page 中的内容设置动画,前提是通过 page 找到 page 中的内容。

下面举一个 我自己做的 Demo ( page 有动画,page 中的内容也有动画)

效果如下:

Viewpager 动画效果

核心代码如下:

@Override
        public void transformPage(View page, float position) {
            RelativeLayout backgroundView = (RelativeLayout) page.findViewById(R.id.simple_pager_bg);
            View text_head = page.findViewById(R.id.slide_fragment_text_1);
            View text_content = page.findViewById(R.id.slide_fragment_text_2);
            View welcomeImage01 = page.findViewById(R.id.slide_pic_1);
            View welcomeImage02 = page.findViewById(R.id.slide_pic_2);
            View welcomeImage03 = page.findViewById(R.id.slide_pic_3);
            View welcomeImage04 = page.findViewById(R.id.slide_pic_4);
            if (0 <= position && position < 1) {
                ViewHelper.setTranslationX(page, pageWidth * -position);
            }
            if (-1 < position && position < 0) {
                ViewHelper.setTranslationX(page, pageWidth * -position);
            }
            if (position <= -1.0f || position >= 1.0f) {
                    //当前界面已经向左或者向右滑出屏幕
            }
            else if (position == 0.0f) {
                    //当前界面未滑动或者滑动结束
            }
            else {
                    //滑动过程中
                if (backgroundView != null) {
                    ViewHelper.setAlpha(backgroundView, 1.0f - Math.abs(position));
                }
                if (text_head != null) {
                    ViewHelper.setTranslationX(text_head, pageWidth * position);
                    ViewHelper.setAlpha(text_head, 1.0f - Math.abs(position));
                }
                if (text_content != null) {
                    ViewHelper.setTranslationX(text_content, pageWidth * position);
                    ViewHelper.setAlpha(text_content, 1.0f - Math.abs(position));
                }
                if (welcomeImage01 != null) {
                    ViewHelper.setRotationY(welcomeImage01, 90 * position);
                    ViewHelper.setAlpha(welcomeImage01, 1.0f - Math.abs(position));
                }
                if (welcomeImage02 != null) {
                    ViewHelper.setRotationY(welcomeImage02, 90 * position);
                    ViewHelper.setAlpha(welcomeImage02, 1.0f - Math.abs(position));
                }
                if (welcomeImage03 != null) {
                    ViewHelper.setRotationY(welcomeImage03, 90 * position);
                    ViewHelper.setAlpha(welcomeImage03, 1.0f - Math.abs(position));
                }
                if (welcomeImage04 != null) {
                    ViewHelper.setRotationY(welcomeImage04, 90 * position);
                    ViewHelper.setAlpha(welcomeImage04, 1.0f - Math.abs(position));
                }
            }
        }

Github上类似的效果有很多

https://github.com/daimajia/AndroidImageSlider(代码家写的动画库,强烈推荐!)

https://github.com/prolificinteractive/ParallaxPager

https://github.com/flavienlaurent/discrollview

https://github.com/andraskindler/parallaxviewpager

主要是以前没研究过 PageTransformer ,其实实现起来很简单,但是功能很强大,如果能善于运用position参数,可以做出非常炫酷的效果。

其实对于上述 Viewpagerpage 切换动画可以有2种方式(只考虑 page ),不仅可以用 transformPage 方式,也可以用 onPageScrolled 方式。具体细节可以参照 AndroidImageSliderJazzyViewPager 的两种实现。下一篇我也会给出这两种方式的具体实现思路,敬请期待。

其实对于上述 Viewpagerpage 切换动画可以有2种方式(只考虑 page ),不仅可以用 transformPage 方式,也可以用 onPageScrolled 方式。具体细节可以参照 AndroidImageSliderJazzyViewPager 的两种实现。下一篇我也会给出这两种方式的具体实现思路,敬请期待。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 160,033评论 24 690
  • afinalAfinal是一个android的ioc,orm框架 https://github.com/yangf...
    passiontim阅读 12,811评论 2 43
  • 英国一直都是我很喜欢的国家之一,最大的原因应该就是英伦音乐了吧,喜欢的好多歌手都是英国人有被很多人熟知的也有偏冷门...
    熊大侠是怪女生阅读 319评论 0 2
  • 今天起风了,还夹杂着小雨,心情有点不好,因为我似乎又做错事情,把一个包裹发错地方了,真的很不好。我自认为自己责任心...
    地瓜222阅读 77评论 0 0
  • 埋藏了一冬的思绪 随着一列火车 飞速蔓延 瞧着天上混乱了的 灰白的云 太阳在其间穿梭 与我同一个速度 飞快的穿梭 ...
    王子骞阅读 123评论 2 2