掌握 MotionLayout：交互动画开发

news2025/6/6 18:01:12

前言

在 Android 开发中，系统自带的属性动画（如 ObjectAnimator 和 ValueAnimator）虽然功能强大，但在复杂动画场景下，第三方动画库能提供更高效的开发体验和更丰富的效果。本文将深入解析 Lottie、MotionLayout、AndroidViewAnimations、Rebound 等热门第三方动画库，提供详细的代码实现、对比分析及关键点总结，助力开发者快速选择合适的工具。

一、Lottie（Airbnb）

定位：复杂矢量动画（JSON 格式）的渲染引擎，适合加载动画、复杂交互动画。
对比：相比传统帧动画（AnimationDrawable），Lottie 的 JSON 动画体积更小、可编辑性更强，且支持动态修改属性。

1. 使用步骤与代码实现

1.1 添加依赖

// build.gradle (Module)
dependencies {
    implementation 'com.airbnb.android:lottie:6.1.0' // 使用最新版本
}

1.2 准备动画资源

从 LottieFiles 下载 JSON 文件，或通过 Adobe After Effects 导出。
将 JSON 文件放入 res/raw 目录（如 loading.json）。

1.3 XML 布局配置

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/lottie_view"
    android:layout_width="200dp"
    android:layout_height="200dp"
    app:lottie_rawRes="@raw/loading"
    app:lottie_loop="true"
    app:lottie_autoPlay="false" />

1.4 代码控制动画

val lottieView = findViewById<LottieAnimationView>(R.id.lottie_view)

// 播放动画
lottieView.playAnimation()

// 暂停动画
lottieView.pauseAnimation()

// 动态修改颜色（Kotlin 扩展函数）
lottieView.setAnimation("loading.json")
lottieView.setColorFilterToLayer("icon_layer", Color.RED)

// 监听动画事件
lottieView.addAnimatorListener(object : Animator.AnimatorListener {
    override fun onAnimationStart(animation: Animator) {}
    override fun onAnimationEnd(animation: Animator) {}
    override fun onAnimationCancel(animation: Animator) {}
    override fun onAnimationRepeat(animation: Animator) {}
})

2. 关键点总结

优点：
- 支持 After Effects 复杂动画，设计师可直接参与开发。
- 高性能渲染，支持硬件加速。
缺点：
- JSON 文件可能较大，需压缩优化。
- 动态修改部分属性需通过代码实现。
适用场景：启动页动画、复杂图标动效、动态插画。

二、MotionLayout（Google）

定位：基于 ConstraintLayout 的布局过渡动画库，适合实现视图间的平滑切换效果。
对比：相比传统属性动画，MotionLayout 直接在 XML 中定义动画逻辑，减少代码量，且支持触摸交互。

1. 使用步骤与代码实现

2.1 添加依赖

dependencies {
    implementation 'androidx.constraintlayout:constraintlayout:2.1.4'
}

2.2 定义 MotionScene 文件

创建 res/xml/scene_login.xml，定义起始和结束布局状态：

<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <Transition
        app:constraintSetStart="@id/collapsed"
        app:constraintSetEnd="@id/expanded"
        app:duration="1000">
        <OnClick app:targetId="@id/button_expand" />
    </Transition>

    <!-- 初始状态：折叠 -->
    <ConstraintSet android:id="@+id/collapsed">
        <Constraint
            android:id="@id/header"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            app:layout_constraintTop_toTopOf="parent" />
    </ConstraintSet>

    <!-- 结束状态：展开 -->
    <ConstraintSet android:id="@+id/expanded">
        <Constraint
            android:id="@id/header"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            app:layout_constraintTop_toTopOf="parent" />
    </ConstraintSet>
</MotionScene>

2.3 在布局中关联 MotionScene

<androidx.constraintlayout.motion.widget.MotionLayout
    android:id="@+id/motion_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutDescription="@xml/scene_login">

    <View
        android:id="@+id/header"
        android:background="#FF5722" />

    <Button
        android:id="@+id/button_expand"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.motion.widget.MotionLayout>

2.4 代码控制过渡动画

val motionLayout = findViewById<MotionLayout>(R.id.motion_layout)

// 动态切换动画状态
motionLayout.transitionToEnd() // 切换到结束状态
motionLayout.transitionToStart() // 切换回初始状态

// 监听动画进度
motionLayout.setTransitionListener(object : MotionLayout.TransitionListener {
    override fun onTransitionStarted(layout: MotionLayout, startId: Int, endId: Int) {}
    override fun onTransitionChange(layout: MotionLayout, progress: Float) {}
    override fun onTransitionCompleted(layout: MotionLayout, currentId: Int) {}
    override fun onTransitionTrigger(layout: MotionLayout, triggerId: Int, positive: Boolean, progress: Float) {}
})

2. 关键点总结

优点：
- 在 XML 中完成复杂动画定义，减少代码耦合。
- 支持触摸拖动交互（如抽屉菜单展开）。
缺点：
- 学习成本较高，需熟悉 ConstraintSet 和 Transition。
- 不适合非布局属性的动画（如颜色渐变）。
适用场景：页面转场、可折叠布局、交互式视图动画。

三、AndroidViewAnimations（daimajia）

定位：提供预定义视图动画（如弹跳、淡入淡出），快速实现常见动效。
对比：相比系统 ViewPropertyAnimator，API 更简洁，但灵活性较低。

1. 使用步骤与代码实现

3.1 添加依赖

dependencies {
    implementation 'com.daimajia.androidanimations:library:2.4@aar'
}

3.2 代码中使用预定义动画

import com.daimajia.androidanimations.library.Techniques
import com.daimajia.androidanimations.library.YoYo

// 弹跳动画
YoYo.with(Techniques.Bounce)
    .duration(1000)
    .repeat(2)
    .playOn(view)

// 渐入动画
YoYo.with(Techniques.FadeIn)
    .duration(500)
    .playOn(view)

// 自定义插值器
YoYo.with(Techniques.Pulse)
    .duration(1000)
    .interpolate(AccelerateDecelerateInterpolator())
    .playOn(view)

2. 关键点总结

优点：
- 一行代码实现常见动画，开发效率极高。
- 支持链式调用，可配置重复次数、插值器等。
缺点：
- 无法自定义动画属性（如缩放比例、旋转角度）。
- 库已停止更新，兼容性需测试。
适用场景：快速实现简单动效（如按钮点击反馈）。

四、Rebound（Facebook）

定位：基于弹簧物理模型的动画库，适合实现弹性效果。
对比：相比系统 SpringAnimation，Rebound 提供更精细的物理参数控制。

1. 使用步骤与代码实现

4.1 添加依赖

dependencies {
    implementation 'com.facebook.rebound:rebound:0.3.8'
}

4.2 代码示例：弹性缩放

val springSystem = SpringSystem.create()
val spring = springSystem.createSpring()

// 配置弹簧参数
spring.springConfig = SpringConfig.fromOrigamiTensionAndFriction(100.0, 10.0)

// 监听弹簧值变化
spring.addListener(object : SpringListener {
    override fun onSpringUpdate(spring: Spring) {
        val value = spring.currentValue.toFloat()
        view.scaleX = value
        view.scaleY = value
    }
})

// 触发动画
spring.endValue = 1.0 // 目标值

2. 关键点总结

优点：
- 自然流畅的物理动画效果。
- 支持自定义弹簧刚度、阻尼系数。
缺点：
- 需手动处理属性更新逻辑。
- 文档较少，调试成本高。
适用场景：弹性按钮、动态图标、物理模拟效果。

五、综合对比与选型指南

库名称	核心优势	适用场景	学习成本	性能影响
Lottie	复杂矢量动画支持	启动页、动态插画	低	中
MotionLayout	布局过渡动画	页面转场、交互式布局	高	低
AndroidViewAnimations	快速实现预定义动画	按钮反馈、简单动效	低	低
Rebound	物理弹簧效果	弹性控件、物理模拟	中	中