Android 自定义 PageTransformer 实现 ViewPager 动画切换效果

2.3 添加 PageTransformer

ViewPager 提供了一个 setPageTransformer(boolean reverseDrawingOrder, PageTransformer transformer) 方法用于设置切换时的动画效果。

1. DepthPageTransformer (深度变换)

这是 Google 官方示例之一，模拟卡片堆叠的深度效果。

public class DepthPageTransformer implements ViewPager.PageTransformer {
    private static final float MIN_SCALE = 0.75f;

    public void transformPage(View view, float position) {
        int pageWidth = view.getWidth();

        if (position < -1) { // [-Infinity,-1)
            // This page is way off-screen to the left.
            view.setAlpha(0);

        } else if (position <= 0) { // [-1,0]
            // Use the default slide transition when moving to the left page
            view.setAlpha(1);
            view.setTranslationX(0);
            view.setScaleX(1);
            view.setScaleY(1);

        } else if (position <= 1) { // (0,1]
            // Fade the page out.
            view.setAlpha(1 - position);

            // Counteract the default slide transition
            view.setTranslationX(pageWidth * -position);

            // Scale the page down (between MIN_SCALE and 1)
            float scaleFactor = MIN_SCALE
                    + (1 - MIN_SCALE) * (1 - Math.abs(position));
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);

        } else { // (1,+Infinity]
            // This page is way off-screen to the right.
            view.setAlpha(0);
        }
    }
}

调用方式：

mViewPager.setPageTransformer(true, new DepthPageTransformer());

2. ZoomOutPageTransformer (缩放退出)

此效果会在滑动时缩小当前页并淡出。

package com.zhy.view;

import android.support.v4.view.ViewPager;
import android.view.View;

public class ZoomOutPageTransformer implements ViewPager.PageTransformer {
    private static final float MIN_SCALE = 0.85f;
    private static final float MIN_ALPHA = 0.5f;

    public void transformPage(View view, float position) {
        int pageWidth = view.getWidth();
        int pageHeight = view.getHeight();

        if (position < -1) { // [-Infinity,-1)
            view.setAlpha(0);

        } else if (position <= 1) { // [-1,1]
            // Modify the default slide transition to shrink the page as well
            float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
            float vertMargin = pageHeight * (1 - scaleFactor) / 2;
            float horzMargin = pageWidth * (1 - scaleFactor) / 2;
            if (position < 0) {
                view.setTranslationX(horzMargin - vertMargin / 2);
            } else {
                view.setTranslationX(-horzMargin + vertMargin / 2);
            }

            // Scale the page down (between MIN_SCALE and 1)
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);

            // Fade the page relative to its size.
            view.setAlpha(MIN_ALPHA + (scaleFactor - MIN_SCALE)
                    / (1 - MIN_SCALE) * (1 - MIN_ALPHA));

        } else { // (1,+Infinity]
            view.setAlpha(0);
        }
    }
}

调用方式：

mViewPager.setPageTransformer(true, new ZoomOutPageTransformer());

注意： 上述代码使用了属性动画 API，在 Android 3.0 (API 11) 之前是不生效的。注释中提到：setting a PageTransformer prior to Android 3.0 (API 11) will have no effect。

3. 版本的向下兼容

3.1 不兼容原因分析

在 Android 3.0 之前，系统不支持 View 的属性动画（Property Animation）。因此，直接使用 view.setAlpha() 等方法在旧版本上无效。此外，setPageTransformer 方法内部也有版本判断逻辑，仅当 Build.VERSION.SDK_INT >= 11 时才执行相关逻辑。

3.2 完美向下兼容方案

为了兼容 3.0 以下版本，我们需要做两步处理：

1. 引入 NineOldAndroids 库，使用 ViewHelper 替代原生属性动画方法。
2. 修改或替换 ViewPager 源码，移除 SDK 版本判断。

第一步：使用 ViewHelper

将代码中的 view.setAlpha() 等替换为 ViewHelper.setAlpha(view, ...)。

// 示例：DepthPageTransformer 兼容写法
public class DepthPageTransformer implements ViewPager.PageTransformer {
    private static final float MIN_SCALE = 0.75f;

    public void transformPage(View view, float position) {
        int pageWidth = view.getWidth();

        if (position < -1) {
            ViewHelper.setAlpha(view, 0);
        } else if (position <= 0) {
            ViewHelper.setAlpha(view, 1);
            ViewHelper.setTranslationX(view, 0);
            ViewHelper.setScaleX(view, 1);
            ViewHelper.setScaleY(view, 1);
        } else if (position <= 1) {
            ViewHelper.setAlpha(view, 1 - position);
            ViewHelper.setTranslationX(view, pageWidth * -position);
            float scaleFactor = MIN_SCALE + (1 - MIN_SCALE) * (1 - position);
            ViewHelper.setScaleX(view, scaleFactor);
            ViewHelper.setScaleY(view, scaleFactor);
        } else {
            ViewHelper.setAlpha(view, 1);
        }
    }
}

第二步：修改 ViewPager 源码

由于 setPageTransformer 内部有 if (Build.VERSION.SDK_INT >= 11) 的判断，直接修改源码是最彻底的方案。我们将 android.support.v4.view.ViewPager 拷贝一份至项目中，重命名为 ViewPagerCompat，并注释掉版本判断语句。

public class ViewPagerCompat extends ViewGroup {
    // ... 其他代码 ...

    public void setPageTransformer(boolean reverseDrawingOrder, ViewPager.PageTransformer transformer) {
        // 注释掉版本判断
        // if (Build.VERSION.SDK_INT >= 11) {
            final boolean hasTransformer = transformer != null;
            final boolean needsPopulate = hasTransformer != (mPageTransformer != null);
            mPageTransformer = transformer;
            setChildrenDrawingOrderEnabledCompat(hasTransformer);
            if (hasTransformer) {
                mDrawingOrder = reverseDrawingOrder ? DRAW_ORDER_REVERSE : DRAW_ORDER_FORWARD;
            } else {
                mDrawingOrder = DRAW_ORDER_DEFAULT;
            }
            if (needsPopulate) populate();
        // }
    }
}

在项目中使用 ViewPagerCompat 替换原有的 ViewPager，即可在 Android 2.3.3 等低版本设备上运行自定义动画。

4. 自定义 PageTransformer 实现个性切换动画

PageTransformer 接口非常简单，只包含一个方法：

public interface PageTransformer {
    void transformPage(View page, float position);
}

• page: 当前正在变换的 View。
• position: 页面相对于中心位置的状态。0 表示正中间，1 表示右侧一整页，-1 表示左侧一整页。

4.1 Position 参数详解

当用户滑动时，transformPage 会被频繁调用。position 的值域通常分为三部分：

• [-Infinity, -1): 页面完全在屏幕左侧之外。
• (1, +Infinity]: 页面完全在屏幕右侧之外。
• [-1, 1]: 页面处于可见区域附近，是动画计算的核心区间。

假设当前显示 A 页，向右滑动出现 B 页：

• A 页的 position 从 0 变为 -1。
• B 页的 position 从 1 变为 0。

4.2 实现旋转动画

我们可以利用 position 的变化来实现页面的旋转效果。例如，让滑出的页面向左旋转，滑入的页面向右旋转。

设计思路：

1. 设置旋转中心点：底部中心。
2. 根据 position 计算旋转角度。

代码实现：

public class RotatePageTransformer implements ViewPager.PageTransformer {
    private static final float ROTATION_MAX = 20.0f; // 最大旋转角度

    @Override
    public void transformPage(View view, float position) {
        // 设置旋转中心为底部中心
        view.setPivotX(view.getMeasuredWidth() * 0.5f);
        view.setPivotY(view.getMeasuredHeight());

        // 计算旋转角度
        // 当 position 为负数（左侧页面），向左旋转
        // 当 position 为正数（右侧页面），向右旋转
        float rotation = ROTATION_MAX * position;
        view.setRotation(rotation);
    }
}

注意事项：

1. 测量时机：在 transformPage 中获取 view.getMeasuredWidth() 可能返回 0，因为此时 View 尚未完成测量。建议将旋转中心的设置放在 onLayout 之后，或者使用 view.post() 确保 View 已测量完毕后再设置 Pivot。
2. 性能优化：避免在每次滑动时重复创建对象，尽量复用变量。

5. 总结与最佳实践

通过 PageTransformer，我们可以轻松实现各种复杂的页面切换动画，无需依赖第三方库。但在使用时也需注意以下几点：

1. 兼容性：对于需要支持 Android 3.0 以下的老旧设备，必须使用 ViewPagerCompat 方案配合 NineOldAndroids。
2. 性能：频繁的 View 属性修改会影响 FPS。尽量使用硬件加速，避免在 transformPage 中进行复杂计算或内存分配。
3. 维护性：Google 已推荐使用 ViewPager2 替代旧版 ViewPager。ViewPager2 基于 RecyclerView 构建，提供了更好的性能和更灵活的动画控制（通过 PageTransformer 同样支持）。如果在新项目中开发，建议优先考虑 ViewPager2。

掌握 PageTransformer 的原理，能够帮助开发者创造出更具交互感和视觉吸引力的移动应用界面。