Android动画的小小使用

前言

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


一、Lottie(Airbnb)

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


1. 使用步骤与代码实现

1.1 添加依赖

gradle 复制代码
// 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 布局配置

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 代码控制动画

kotlin 复制代码
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 添加依赖

gradle 复制代码
dependencies {
    implementation 'androidx.constraintlayout:constraintlayout:2.1.4'
}

2.2 定义 MotionScene 文件

  • 创建 res/xml/scene_login.xml,定义起始和结束布局状态:
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

xml 复制代码
<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 代码控制过渡动画

kotlin 复制代码
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 添加依赖

gradle 复制代码
dependencies {
    implementation 'com.daimajia.androidanimations:library:2.4@aar'
}

3.2 代码中使用预定义动画

kotlin 复制代码
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 添加依赖

gradle 复制代码
dependencies {
    implementation 'com.facebook.rebound:rebound:0.3.8'
}

4.2 代码示例:弹性缩放

kotlin 复制代码
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 物理弹簧效果 弹性控件、物理模拟 中 中

六、总结

  • Lottie 是设计师与开发者协作的首选工具,适合需要复杂矢量动画的场景。
  • MotionLayout 在布局过渡动画中表现卓越,但需投入时间学习 XML 配置。
  • AndroidViewAnimations 和 YoYo 适合快速实现简单动效,提升开发效率。
  • Rebound 在需要物理交互的场景下不可替代,但需手动控制动画细节。

根据项目需求选择合适的动画库,既能提升用户体验,又能避免过度设计。

相关推荐
千里马学框架3 天前
一起学 Android 14:ShellTransition 屏幕旋转过程深度剖析
android·智能手机·性能优化·framework·性能·屏幕旋转·rotation
美狐美颜SDK开放平台3 天前
开发直播APP时如何接入视频美颜SDK?开发流程与注意事项
android·人工智能·计算机视觉·音视频·直播美颜sdk
AFinalStone3 天前
Android7 SystemUI源码解析(七)Keyguard锁屏模块深度解析
android·systemui
致远ccc3 天前
Google Play 上架前如何测试 App?多国家 Android 环境测试
android·app测试·googleplay·多国家应用测试
ttyyttemo3 天前
Kotlin 协程中的 Job 结构化并发与取消
android
sun0077003 天前
tbox 4g/5g切换,导致wan ip 改变,导致车机旧网络不可用。需要重启车机才行
android
ai2work3 天前
ch23 综合复刻:从零做一个最小可用版本(capstone)
kotlin
其实防守也摸鱼3 天前
内网穿透与反向代理:原理、工具与实战指南
android·大数据·运维·安全·网络安全·自动化·渗透
ai2work3 天前
ch21 签名、校验与发版
kotlin
AFinalStone3 天前
Android7 SystemUI 源码解析(四)NavigationBar 导航栏与 SystemBars
android·systemui