Compose 多平台 Lottie 动画引擎 Compottie 安装与使用指南

Compose 多平台 Lottie 动画引擎 Compottie 安装与使用指南

compottie Compose Multiplatform Lottie animations // port of airbnb/lottie-compose 项目地址: https://gitcode.com/gh_mirrors/co/compottie

1. 项目介绍

Compottie 是一个基于 Kotlin 的开源项目，旨在为 Jetpack Compose 提供跨平台的支持，以渲染 Adobe After Effects 通过 Bodymovin 导出的 Lottie 动画。版本 2.x 带来了自研的多平台渲染引擎，废弃了依赖于 Skottie 和 lottie-android 的旧版渲染方式，提供更稳定的集成体验。此项目由 Alexander Zhirkevich 开发维护，并采用 MIT 许可证。

特性亮点：

• 多平台兼容：支持在 Android、iOS 和其他 Kotlin Native 环境中使用。

• 模块化设计：

  • compottie 主模块：核心渲染引擎及Json字符串动画规范。
  • compottie-dot：处理 dotLottie 和 ZIP 格式的动画规范。
  • compottie-network：提供了基于 Ktor 的网络加载能力和Okio本地缓存，用于从网络加载动画和资源。
  • compottie-resources：利用 Compose 内置资源管理器处理资产和字体。

• 动画动态属性：支持动画进度控制和动态属性调整。

2. 项目快速启动

要将 Compottie 添加到您的项目中，请确保您的项目已经支持 Kotlin 和 Compose，并且Android的minSdkVersion至少为26（对于dot和network模块）。

首先，在build.gradle（Module级别）文件的dependencies部分添加以下依赖项，替换 为最新的发布版本，例如2.0.0-beta02:

dependencies {
    implementation("io.github.alexzhirkevich:compottie:<version>")
    // 如需额外功能，可以添加更多模块
    implementation("io.github.alexzhirkevich:compottie-dot:<version>")
    implementation("io.github.alexzhirkevich:compottie-network:<version>")
}

然后，您可以在 Compose 组件内这样使用 Lottie 动画：

import androidx.compose.runtime.remember
import androidx.compose.ui.platform.LocalLifecycleOwner
import com.alexzhirkevich.compottie.ComposableLottieAnimation

// 在你的 Compose 构建函数中
val composition by rememberLottieComposition(
    LottieCompositionSpec.FromAsset("your_lottie_file.json")
)
ComposableLottieAnimation(
    composition = composition,
    progress = remember { mutableStateOf(0f) },
    onProgressChange = { progress ->
        // 更新进度逻辑
    }
)

确保将 "your_lottie_file.json" 替换为您实际的 JSON 动画文件路径或名称。

3. 应用案例与最佳实践

在应用 Compottie 时，遵循以下最佳实践：

• 资源管理：使用compottie-resources模块可以有效整合您的动画资源，保持应用资源清晰有序。
• 性能优化：考虑动画的复杂度，避免在视图层次结构中不必要的重绘，通过状态管理精准控制动画播放。
• 网络加载：利用compottie-network模块实现动画的按需下载和缓存，提升用户体验并减少初始安装包大小。

4. 典型生态项目

虽然 Compottie 自身是围绕 Compose 的生态系统构建，但其引入了一种新的可能性，让开发者能够在不同平台上的应用内无缝集成复杂的动画效果。尽管没有特定列举“典型生态项目”，Compottie 可轻松融入任何希望利用 Lottie 动画增强视觉体验的Jetpack Compose应用，比如社交APP中的交互反馈、教育软件中的动态讲解元素、或是品牌展示的应用界面等。

---

通过以上步骤，您可以开始在您的Kotlin多平台项目中引入和使用 Compottie，提升应用的视觉吸引力和交互体验。记得关注项目GitHub页面获取最新更新和可能的社区贡献实例。

compottie Compose Multiplatform Lottie animations // port of airbnb/lottie-compose 项目地址: https://gitcode.com/gh_mirrors/co/compottie