Lottie简单使用

最新推荐文章于 2025-10-31 04:37:41 发布
原创 最新推荐文章于 2025-10-31 04:37:41 发布 · 1.2w 阅读 · 25 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

一、简介

Lottie 是Airbnb开源的一个面向 iOS、Android、React Native 的动画库，能分析 Adobe After Effects 导出的动画，并且能让原生 App 像使用静态素材一样使用这些动画，完美实现动画效果。

现在使用各平台的 native 代码实现一套复杂的动画是一件很困难并且耗时的事，我们需要为不同尺寸的屏幕加载不同的素材资源，还需要写大量难维护的代码，而Lottie可以做到同一个动画文件在不同平台上实现相同的效果，极大减少开发时间，实现不同的动画，只需要设置不同的动画文件即可，极大减少开发和维护成本。

Lottie 地址：https://github.com/airbnb/lottie-android

Lottie 官网：https://airbnb.design/lottie/

为什么使用Lottie

  1. 跨平台只有制作一套json动画文件便可以跨平台在 Android  ios ReactNeative上使用，lottie库负责解析json文件并播放动画

  2. 可以支持网络下载json文件，本地播放，实时更新动画资源。

  3. 运行时效率上仅仅用Canvas去draw而已，流畅度非常棒，所以哪怕在Listview里去大量显示，内存占用和绘图效率都远远高于帧动画。

  4. 实现效果可以按设计出的100%还原到产品中

  5. 开发周期大大减少

使用Lottie实现的效果

lottie

Android端使用方法

1. 在项目 的 build.gradle 文件添加依赖

dependencies {
   
   
  implementation 'com.airbnb.android:lottie:$lottieVersion'
}

2. 添加 Adobe After

最低0.47元/天 解锁文章
前端啊，拿Lottie炫个动画吧
weixin_39415598的博客
11-07 3364
本文可在公众号「德育处主任」免费阅读有时候在网页上看到一些很炫酷的小动画，比如loading特效，还能控制这个动画的状态，真的觉得很神奇。大部分做后端的不想碰前端，做前端的不想碰动画特效。其实啊，很多时候不需要自己写炫酷的特效，会调用第三方库已经挺厉害的了。比如今天要介绍的 Lottie。
前端-动画库Lottie 3分钟学会使用
制定持续可量化的目标，不断坚持。
01-01 2048
前端-动画库Lottie 3分钟学会使用
AndroidLibs动画效果：Lottie/属性动画开源库应用
最新发布
gitblog_00477的博客
10-31 304
你是否还在为Android应用中的动画效果实现复杂、兼容性差而烦恼？本文将介绍如何利用AndroidLibs中的动画库轻松实现高质量动画效果，涵盖Lottie、属性动画等主流解决方案，帮助开发者快速提升应用视觉体验。读完本文，你将能够：掌握Lottie动画集成方法、理解属性动画原理、学会选择适合的动画库。 ## 动画库概览 AndroidLibs的动画模块([动画Animation/](htt...
Android Lottie使用
qq_42905524的博客
04-20 825
一、简介 Lottie 是Airbnb开源的一个面向 iOS、Android、React Native 的动画库，能分析 Adobe After Effects 导出的动画，并且能让原生 App 像使用静态素材一样使用这些动画，完美实现动画效果。 二、Lottie动画文件制作 1.让设计师使用Adobe 的 After Effects(简称 AE)工具(美工一般都会这个)制作这个动画。 2.在A...
Lottie动画系列：LottieAnimationView简单使用
知道这个有什么用？
06-02 9572
上效果图： 隐藏标题栏 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> ··· </style> 导入依赖 implementation 'com.airbnb.android:lottie:3.1.0' 新建assets目录，复制json文件。 示例中是横屏，所以宽度比高度高。布局文件核心代码和完整代码： app:lottie_auto
Android 动画 Lottie 如何使用
Makenna's World
12-13 3025
Lottie 是Airbnb开源的一个面向 iOS、Android、React Native 的动画库，能分析 Adobe After Effects 导出的动画，并且能让原生 App 像使用静态素材一样使用这些动画，完美实现动画效果。1.劣势（1）性能不够好—某些动画特效，内存和性能不够好；相对于属性动画，在展示大动画时，帧率较低2.优势(1)开发效率高—代码实现简单，更换动画方便，易于调试和维护。(2)数据源多样性—可从assets,sdcard,网络加载动画资源，能做到不发版本，动态更新。
Lottie - 轻松实现复杂的动画效果
lmpt90的专栏
11-01 1025
Lottie 是Airbnb开源的一套跨平台的完整的动画效果解决方案，设计师可以使用设计出漂亮的动画之后，使用Lottic提供的Bodymovin插件将设计好的动画导出成 JSON 格式，就可以直接运用在iOSAndroidWeb和之上，无需其他额外操作。Lottie 官网结构层：可以读取到动画画布的宽高，帧数，背景色，时间，起始关键帧，结束帧等信息。asset：图片资源信息集合，这里放置的是 制作动画时引用的图片资源。layers。
Lottie动画库的使用1
08-08
通过Lottie，开发者可以将原本需要大量代码实现的复杂动画变得简单易用，大大提高了开发效率，并且能够在多个平台上保持一致的视觉体验。不过，要注意的是，虽然Lottie简化了动画的实现，但在AE中创建动画时仍需一定...
lottielottie
01-19
标题 "lottielottie" 可能是指一个关于 Lottie 动画技术的项目或者教程，可能是为了帮助开发者更好地理解和使用 Lottie。而描述中的 "lottielottie" 没有提供具体信息，可能是因为它是简短的项目名称或者是对 Lottie...
Android Lottie动画使用
2401_84132617的博客
04-13 1551
2.在AE中安装一个叫做Bodymovin的插件。下载，解压缩后只需要\build\extension\bodymovin.zxp这个档案就可以3.手动安装plugin，以windows系统而言，要先下载 ****并解压缩。再来把下载的bodymovin压缩后的 bodymovin-master\build\extension 目录下的bodymovin.zxp 这个档案复制进去同一个资料夹。4.去找cmd，并以系统管理员身分执行。5.打“cd C:/ExManCmd_win所在的路径。
Android动画框架Lottie使用详解
2501_92489053的博客
06-17 1508
Lottie 是一个基于 After Effects 动画的库，它可以将 After Effects 动画转换为 JSON 格式，并在 Android、iOS、Web 等平台上进行渲染。使用 Lottie，开发者无需编写复杂的动画代码，只需将 JSON 文件集成到应用中即可。Lottie 支持对动画参数进行自定义，如动画时长、重复次数等。 Lottie 是一款功能强大、易于使用的动画框架，它能够帮助开发者轻松地将高质量的动画引入 Android 应用。
Lottie动画资源json文件
04-02
https://blog.youkuaiyun.com/yiranhaiziqi/article/details/88965548，此博客所需动画资源
lottie动画效果使用简例
02-21
lottie动画效果使用简例
动画魔术师：Lottie，让你的页面动起来！
xyhrd333的博客
11-26 5644
Lottie官网Lottie 是 Airbnb 开源的一套跨平台的完整的动画效果解决方案，设计师可以使用 Adobe After Effects 设计出漂亮的动画之后，使用Lottie提供的 Bodymovin 插件将设计好的动画导出成 JSON 格式，就可以直接运用在iOSAndroidWeb和之上，无需其他额外操作。​。
Flutter开发之——Android通信-BasicMessageChannel
2401_84122902的博客
04-25 1096
我们搜集整理过这几年字节跳动，以及腾讯，阿里，华为，小米等公司的面试题，把面试的要求和技术点梳理成一份大而全的“ Android架构师”面试 Xmind（实际上比预期多花了不少精力），包含知识脉络 + 分支细节。网上学习 Android的资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。那么这份面试题对你的帮助会很有限。var result = await channel.send({‘name’: ‘张三’, ‘age’: 18}) as Map;
Lottie动画库
X01动力装甲的专栏
03-27 704
Lottie动画库 Lottie是一个用于Android，iOS，Web和Windows的库，用于解析使用Bodymovin导出为json的Adobe After Effects动画，并在移动设备和网络上呈现它们！ http://airbnb.io/lottie/#/README https://github.com/airbnb/lottie-web ...
【Android -- 动画】Lottie 动画的基本使用
Kevin Learn Android
12-06 6443
Lottie 是 Airbnb 开源的一个面向 iOS、Android、React Native 的动画库，能分析 Adobe After Effects 导出的动画，并且能让原生 App 像使用静态素材一样使用这些动画，完美实现动画效果。
HarmonyOS NEXT应用开发—Lottie
maniuT的博客
03-18 1387
Lottie是一个适用于OpenHarmony的动画库，它可以解析Adobe After Effects软件通过Bodymovin插件导出的json格式的动画，并在移动设备上进行本地渲染， 可以在各种屏幕尺寸和分辨率上呈现，并且支持动画的交互性，通过添加触摸事件或其他用户交互操作，使动画更加生动和具有响应性。
html 使用lottie
02-09
### 如何在 HTML 中添加和配置 Lottie 动画 要在 HTML 项目中集成并使用 Lottie 动画，可以按照如下方法操作： #### 安装依赖库 首先，在 HTML 页面中引入 Lottie 的 JavaScript 库。可以通过 CDN 方式快速加载此库。 ```html <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.4/lottie.min.js"></script> ``` 这一步骤确保了可以在网页上利用 Lottie API 来控制动画[^1]。 #### 创建容器元素 接着，在页面内创建一个用于承载动画的 DOM 元素。通常是一个 `div` 或者其他合适的标签，并为其指定唯一的 ID 属性以便后续引用。 ```html <div id="lottie-animation-container"></div> ``` 上述代码片段定义了一个名为 `lottie-animation-container` 的 div 作为未来显示动画的地方[^2]。 #### 加载 JSON 数据文件 如果打算展示本地存储的动画，则需提前准备好对应的 JSON 配置文件，并将其路径告知给 Lottie 实例化对象；如果是远程 URL 提供的数据源，则直接传入完整的链接即可。 对于本地资源而言，假设已经有一个位于 `/path/to/local/lottie.json` 下面的 JSON 文件，那么应该像这样读取它： ```javascript fetch('/path/to/local/lottie.json') .then(response => response.json()) .then(data => { const container = document.getElementById('lottie-animation-container'); lottie.loadAnimation({ container: container, renderer: 'svg', loop: true, autoplay: true, animationData: data // 这里的data就是之前获取到的对象形式的JSON内容 }); }) .catch(error => console.error('Error loading the local Lottie file:', error)); ``` 这段脚本展示了如何异步请求本地 JSON 文件并通过 fetch API 解析成 JavaScript 对象传递给 Lottie 初始化函数。 而对于在线资源来说，只需要简单修改为提供有效的 HTTP(S) 地址字符串代替上面提到的方法调用部分就可以了。 #### 控制动画行为 一旦成功设置了动画实例之后就可以自由操控其属性比如速度(`setSpeed`)、循环模式(`loop`)以及自动播放选项(`autoplay`)等特性。还可以监听某些特定时刻发生的事件例如完成一次迭代后触发回调处理逻辑等等[^4]。 例如设置两倍速率回放当前动画序列： ```javascript const animationInstance = lottie.loadAnimation({...}); animationInstance.setSpeed(2); ```
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值