【安卓高级】ViewPager视差动画效果

在安卓开发中，是否遇见过一些很酷的视差动画效果，当ViewPager滑动下一页的时候，页面内的各种元素也能跟随滑动做位移效果，整体看起来非常有活力。

 

关键的PageTransformer

PageTransformer的用途这里就不展开了，相信做Android开发的都经常使用它实现ViewPager的各种切换效果。

 

public void transformPage(@NonNull View view, float position)

 

关键点就是PageTransformer的函数，这里详细讲解一下他们两个参数：

 

view：是应用变换的View，可以对View或子View进行动画，例如从第一页滑动到第二页，会将第一页的View和第二页的View分别传入，即调用了两次。

 

position：View的当前位置，其位置信息是一个范围值： -1 --- 0 --- 1，-1是前一个View的位置，0是当前View的位置，1是后一个View的位置。

    手指往右滑动：当前View从0到1变化，前一个View从-1到0变化。

    手指往左滑动：当前View从0到-1变化，后一个View从1到0变化。

 

子View进行位移操作

核心：根据上面的positon，在应用变换的时候，在view查找出子View，对子View应用各种操作（例如偏移）等等，就能显示出跟随手指滑动的视差效果。

 

大概的代码例子如下：

uiGuidePager.setPageTransformer(true, new ViewPager.PageTransformer() {
            @Override
            public void transformPage(@NonNull View view, float v) {
                View uitestOne = view.findViewById(R.id.uitestOne);
                View uiOneLogo = view.findViewById(R.id.uiOneLogo);
                View uiOneDevice = view.findViewById(R.id.uiOneDevice);
                View uiOneTip = view.findViewById(R.id.uiOneTip2);
                View uiOneTouch = view.findViewById(R.id.uiOneTouch);
                if (uitestOne != null) {
                    Log.e(">>>>", v + "");
                    uitestOne.setTranslationX(400 * v);
                    uiOneLogo.setTranslationX(50 * v);
                    uiOneDevice.setTranslationX(50 * v);
                    uiOneTip.setTranslationX(200 * v);
                    uiOneTouch.setTranslationX(200 * v);
                }
            }
        });

 

 

（扩展） 画廊视觉效果

在实现视差动画效果的同时，也可以叠加画廊视觉效果，用ViewPager实现画廊视觉效果，加上视差动画效果，滑动的时候每一页内部的元素会跟随滑动进行动画位移，视觉就更加炫。

 

画廊视觉效果的步骤实现是比较简单：

  1）在XML中设置设置ViewPager的宽度小于父布局，留出空间展示两边页面的内容。

  2）设置ViewPager的clipChildren为false，让ViewPager两边页面的内容绘制显示出来。

  3）代码中设置viewPager.setPageMargin(10)，设置相邻页面的间距。

 

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.anbang.family.surface.impl.guide.GuideActivity">

    <android.support.v4.view.ViewPager
        android:clipChildren="false"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:id="@+id/uiGuidePager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">


    </android.support.v4.view.ViewPager>

</android.support.constraint.ConstraintLayout>

 

viewPager.setPageMargin(30);

 

 

（相关）ViewPager2

 在ViewPager2上使用视差动画效果的原理是一样的，ViewPager2一样提供了完全一致的PageTransformer，所以切换到ViewPager2时可以直接复用动画的代码，迁移零成本。

转载于:https://www.cnblogs.com/nicojerry/p/11446601.html