在线资源

官方资源

1. Lottie Official Documentation (Legacy - Airbnb):

   • 说明: 虽然 Airbnb 逐步将 Lottie 的主导权移交给了社区 (LottieFiles)，但其原始文档站仍包含核心概念和早期信息。
   • 资源链接: http://airbnb.io/lottie/

2. Lottie Web (GitHub Repository):

   • 说明: lottie-web 是在 Web 端渲染 Lottie 动画的核心 JavaScript 库。GitHub 仓库包含最新代码、Issue 跟踪、以及一些基本的 README 文档。
   • 资源链接: https://github.com/airbnb/lottie-web (虽然名为 airbnb，但社区贡献活跃)

3. Lottie iOS (GitHub Repository):

   • 说明: 用于在 iOS (Swift & Objective-C) 应用中原生渲染 Lottie 动画的官方库。
   • 资源链接: https://github.com/airbnb/lottie-ios

4. Lottie Android (GitHub Repository):

   • 说明: 用于在 Android (Kotlin & Java) 应用中原生渲染 Lottie 动画的官方库。
   • 资源链接: https://github.com/airbnb/lottie-android

5. Bodymovin (AE 插件):

   • 说明: 这是 Lottie 工作流的起点。它是 Adobe After Effects 的一个扩展插件，用于将 AE 动画导出为 Lottie 支持的 .json 文件。
   • 资源链接:
     • GitHub: https://github.com/airbnb/bodymovin
     • Adobe Exchange: https://exchange.adobe.com/creativecloud.details.12557.html

社区资源

1. LottieFiles:
   • 说明: 目前 Lottie 生态中最核心、最活跃的平台。集成了动画市场、测试工具、编辑工具、协作功能、开发者资源等。是查找、测试、优化和获取 Lottie 动画的首选之地。
   • 资源链接: https://lottiefiles.com/
   • 关键功能:
     • 动画市场: 大量免费和付费的 Lottie 动画素材。
     • 在线编辑器/调试器: 可在线预览、测试 JSON 文件，甚至做一些简单的修改（如颜色）。
     • JSON 优化器: 帮助减小 JSON 文件体积。
     • SVG 转 Lottie: 提供将 SVG 转换为 Lottie JSON 的工具（功能有限）。
     • Lottie Interactivity Library: 用于轻松实现滚动、点击等交互的库。
     • 开发者文档与教程: 提供各平台集成 Lottie 的指南。
     • Figma 插件: 将 Figma 设计转换为 Lottie 动画。
2. 聚合社区资源：https://github.com/LottieFiles/awesome-lottie

学习资源

1. LottieFiles Learn:

   • 说明: LottieFiles 官方提供的学习中心，包含从入门到进阶的各类教程、文章和视频。
   • 资源链接: https://lottiefiles.com/learn

2. LottieFiles Blog:

   • 说明: 发布 Lottie 相关新闻、案例研究、教程和最佳实践。
   • 资源链接: https://lottiefiles.com/blog

框架与库

1. React:

   • lottie-react: 流行的 React 封装库。
     • 资源链接: https://github.com/gamote/lottie-react
   • @lottiefiles/react-lottie-player: LottieFiles 官方提供的 React 组件。
     • 资源链接: https://github.com/LottieFiles/lottie-react (仓库名 lottie-react，包名不同)
   • @lottiefiles/dotlottie-react: 用于在 React 应用中渲染 DotLottie 文件（一种优化过的 Lottie JSON）。

2. Vue:

   • vue-lottie: 常用的 Vue 封装库。
     • 资源链接: https://github.com/chenqingspring/vue-lottie
   • @lottiefiles/vue-lottie-player: LottieFiles 官方提供的 Vue 组件。
     • 资源链接: https://github.com/LottieFiles/lottie-vue

3. Angular:

   • ngx-lottie: Angular 的 Lottie 封装库。
     • 资源链接: https://github.com/ngx-lottie/ngx-lottie

4. React Native:

   • lottie-react-native: 官方提供的 React Native 库。
     • 资源链接: https://github.com/lottie-react-native/lottie-react-native

5. Flutter:

   • lottie-flutter: 社区维护的 Flutter 库。
     • 资源链接: https://github.com/xvrh/lottie-flutter

6. Web Components:

   • @lottiefiles/lottie-player: LottieFiles 提供的 Web Component，可以轻松嵌入任何 HTML 页面或框架中。
     • 资源链接: https://github.com/LottieFiles/lottie-player

素材灵感

1. LottieFiles Marketplace: (已在核心社区中提及)

   • 说明: 最大的 Lottie 动画交易和分享平台。

2. IconScout:

   • 说明: 一个大型的图标和插画资源库，也提供大量的 Lottie 动画素材。
   • 资源链接: https://iconscout.com/lottie-animations

3. UI8.net:

   • 说明: 设计资源网站，也包含一些高质量的 Lottie 动画。
   • 资源链接: https://ui8.net/ (需自行搜索 Lottie)

4. Awwwards / Dribbble / Behance:

   • 说明: 在这些设计展示平台搜索 "Lottie" 或 "Web Animation"，可以找到很多使用 Lottie 的优秀网页设计和动效案例，获取灵感。
   • 资源链接:
     • https://www.awwwards.com/
     • https://dribbble.com/
     • https://www.behance.net/

5. https://finsweet.com/lottieflow/explore

制作工具

• Adobe After Effects：最专业的设计工具当然还得是 Adobe
• Figma：最新的流行设计工具
• Sketch：主流的设计工具
• LottieFiles：一个 Lottie 动画共享和制作的平台
• Lottielab：一款创建和编辑 Lottie 动画的工具