- 综合排序
- 最热优先
- 最新优先
- 来自专栏腾讯IVWEB团队的专栏
bodymovin 的使用场景初步调研
本文作者：ivweb caorich bodymovin是什么 专业制作动画采用Adobe公司的after effect软件。 做出来的动画可以导出为json文件，bodymovin就是这个动画json文件的前端播放器，支持渲染为svg\canvas\html三种格式。 是否循环播放 autoplay: true, path: 'http://makto.win/bodymovin/bodymovin/data1.json' }; var anim = bodymovin.loadAnimation(animData); 控制动画窗口的大小 bodymovin会将对应的svg或者canvas节点插入容器节点中。 虽然bodymovin提供了在已有canvas上渲染的能力，实测试效果并不理想，且没有api文档说明如何进行调整。所以建议控制container的大小来控制动画的大小。
4.2K00发布于 2017-07-10 - 来自专栏Android机动车
大杀器Bodymovin和Lottie：把AE动画转换成HTML5AndroidiOS原生动画
AE安装完成后，安装Bodymovin插件。 我推荐第二种方法，这个方法步骤如下： 2.1 到Bodymovin的GitHub首页（链接：bodymovin/bodymovin）克隆项目到本地，或者下载.zip包。 ? 把Bodymovin的GitHub项目目录下的“\build\player\bodymovin.js”和刚刚生成的json文件复制到网页根目录，新建一个html文件，代码如下： <! 的完整api文档见GitHub项目首页(https://github.com/bodymovin/bodymovin) </script></body></html> 9. 确实如此，用过Bodymovin之后，不难看出它的灵活性的确很高，而且json形式的动画也远比js写出来的动画更适合跨平台。实在叹服，为Bodymovin点10086个赞。
6.5K22发布于 2018-08-03 - 来自专栏关于Java学习@宁在春
让我们一起来看看可爱的猫咪吧
/build/player/bodymovin.js"></script> <script src="https://labs.nearpod.com/<em>bodymovin</em>/demo/gatin/anim /demo/catrim/<em>bodymovin</em>.js"></script> <script src="https://labs.nearpod.com/<em>bodymovin</em>/demo/catrim/data.js 视频教程 入门 <em>Bodymovin</em> 可以在网络上呈现 Lottie JSON 文件。 首先，获取 <em>bodymovin</em> 播放器 javascript 库。 <script src="js/bodymovin.js" type="text/javascript"></script> <! -- OR --> <script src="https://cdnjs.com/libraries/<em>bodymovin</em>" type="text/javascript"></script> Bodymovin
2K40编辑于 2022-10-31 - 来自专栏彭湖湾的编程世界
Lottie在手，动画我有：ios/Android/Web三端复杂帧动画解决方案
Lottie动画简介 Lottie是一个用于Web和iOS（Android）的移动库，用于解析使用Bodymovin导出为json的Adobe After Effects动画，并在移动设备上呈现它们。 AE安装一个叫做Bodymovin的插件（Bodymovin是lottie-web技术栈下的一个工具） 3. 你的电脑可能不支持Bodymovin的zxp格式，没关系，我们下载一个解析器就可以了，参考链接： https://zxpinstaller.com/ 4. 就可以啦（注意要跨域哦） 参考资料列表 《CDN托管系统》 https://cdnjs.com/libraries/bodymovin 《炫酷神器，AE插件Bodymovin.zxp的安装与使用 所以很多功能要和设计师商量好 吐槽一下：Bodymovin这个插件的使用，真是让人一言难尽。
4.6K20发布于 2019-09-29 - 来自专栏IMWeb前端团队
lottie系列文章(二)：lottie最佳实践
第二步 在需要使用lottie的页面中，在其index.html中引入bodymovin.js。示例如下: {% block preloadScript%} <script src="../.. /assets/lottie/<em>bodymovin</em>.min.js" async></script> {% endblock %} 第三步 而设计师给的json文件，我们也需要统一放到src/assets/ = window.bodymovin.loadAnimation({ container: this.box, renderer: 'svg', loop: true, lottie库使用 lottie-web的npm版本是lottie-web，其对应的cdn外链版则是bodymovin.js 即使是gzip压缩后的lottie-web轻量版的js文件，大小仍然有 json文件 通过bodymovin插件导出的动画json文件大小也可能比较大（可能达到几十kb，负责的动画也可能上百kb），所以不建议将json数据内联到页面中，而最好是当做一个json文件来进行下载
6.1K31发布于 2019-12-03 - 来自专栏青梅煮码
开源免费的Web动画图标
titanic-icons --save 将代码引入你网页的head中后： <script src="/dist/js/titanic.min.js"></script> <script src="/<em>bodymovin</em> /4.5.9/<em>bodymovin</em>.min.js"></script> ---- 在body中初始化： <script> var titanic = new Titanic( ); </script --在整个页面中插入一次脚本 --> <script src="/dist/js/titanic.min.js"></script> <script src="/libs/<em>bodymovin</em> /4.5.9/<em>bodymovin</em>.min.js"></script> </head> <body> <!
1.1K10编辑于 2023-03-13 - 来自专栏零域Blog
从设计师和开发的角度使用 lottie
app (集成了 lottie sdk 的 app) 安装 Bodymovin 插件的流程如下： 关闭 AE 安装 ZXP installer。 下载最新的 bodymovin 扩展。 https://github.com/airbnb/lottie-web/blob/master/build/extension/bodymovin.zxp 打开 ZXP installer 并把 bodymovin 需要准备好 Sketch，AI，AE，并安装好 Bodymovin 插件。 菜单中选择 Window > Extensions > Bodymovin 测试动画。
4.2K21编辑于 2022-03-28 - 来自专栏CMS建站教程
Lottie- Android动画
1.在AE中安装一个叫做Bodymovin的插件。 2.下载 bodymovin，解压缩后只需要\build\extension\bodymovin.zxp这个档案就可以 3.手动安装plugin，以windows系统而言，要先下载ZXP Installer （地址：[http://aescripts.com/learn/zxp-installer/），然后双击打开软件，点击“File”>“Open”菜单项载入上述bodymovin.zxp插件包，ZXP Installer
3K30编辑于 2022-02-19 - 来自专栏黯羽轻扬
Lottie动画简介
支持的AE特性越多，对设计师的约束越少，这也是Lottie方案更受欢迎的原因之一 四.实现思路 JSON Bodymovin ----------> Lottie Player 图片资源 设计师用AE做好动画后，通过Bodymovin（AE插件）导出JSON格式的Lottie动画定义及相关图片资源，输出给Android、iOS、ReactNative、Web lottie-web airbnb/lottie-web是Web环境的Lottie Player，简单的几行代码就能实现复杂的动画效果，例如：
var animation = bodymovin.loadAnimation document.getElementById('bm'), renderer: 'svg', loop: true, autoplay: true, path: 'data.json' }) P.S.具体效果见Simple Bodymovin3K40发布于 2019-06-12 - 来自专栏IMWeb前端团队
lottie系列文章(一)：lottie介绍
a mobile library for Web, and iOS that parses Adobe After Effects animations exported as json with Bodymovin Lottie是一个库，可以解析使用AE制作的动画（需要用bodymovin导出为json格式），支持web、ios、android和react native。 path: 'data.json' // the path to the animation json }); 外链js lottie-web的npm版本是lottie-web，其对应的cdn外链版则是bodymovin.js <script src="https://cdnjs.com/libraries/<em>bodymovin</em>" /> bodymovin.loadAnimation({ container: element 将该动画通过bodymovin插件导出的json，会如以下格式： { "fr": 30, // 帧率 "ip": 0, // 起始关键帧 "op": 20, // 结束关键帧
5.2K32发布于 2019-12-03 - 来自专栏程序亦非猿
【源码分析】Lottie 实现炫酷动画背后的原理
但是现在有了 Lottie，只要设计师用 AE 设计动画，利用 bodymovin 导出 ，导入到 assets, 再写下面那么点代码就可以实现了！ TL;DR bodymovin 将 AE 动画导出为 ,该 描述了该动画，而 lottie-android 的原理就是将 描述的动画用 native code 翻译出来， 其核心原理是 canvas 文件的属性含义 bodymovin 导出的 包含了动画的一切信息, 动画的关键帧信息，动画该怎么做，做什么都包含在 里，Lottie 里所有的 Model 的数据都来自于这个 ( 该 对应的 Model : 0, "op": 75, "w": 500, "h": 500, "ddd": 0, "assets":[] "layers":[] } 属性的含义： 属性 含义 v bodymovin /bodymovin https://medium.com/google-developers/animation-jump-through-861f4f5b3de4 ~~原文完~~ 两年前的我如何
2.4K11发布于 2019-08-16 - 来自专栏前端实验室
Lottie-页面动画100%硬核还原
它就是今天的主角：Lottie Lottie简介 Lottie 是Airbnb开源的一个 面向iOS、Android、React Native 的动画库，能分析 AE 导出的动画（需要用bodymovin 设计师用AE把动画效果做出来，再用Bodymovin导出相应的json文件给到前端，前端使用Lottie库就可以实现动画效果。功能简单且强大。 至于Adobe Effect和Bodymovin插件的安装与使用...嗯嗯，这是设计师的事情，咱们就不操心啦。
1.5K40编辑于 2022-12-02 - 来自专栏搜狗测试
Lottie内存泄漏问题的定位与分析
它可以解析使用 Bodymovin 导出为 json 的 Adobe After Effects 动画，允许应用程序像使用静态图像一样轻松使用动画。 动效设计人员通过Adobe After Effects的Bodymovin插件导出记录动画信息的JSON文件； (3). 开发人员使用Lottie的开源库读取这份JSON文件进行解析和渲染。 ? 4、lottie-android 两种引入方式 xml方式 编程方式 5、Lottie实现原理 Lottie使用通过Bodymovin插件导出的json文件作为动画数据源，（json文件把图片中的元素进行来拆分
7.8K30发布于 2020-07-07 - 来自专栏音视频专栏
AE工程文件拆解可行性分析
（1）XML 项目文件----apex文件； （2）流程图面板信息研究； （3）Adobe ExtendScript Toolkit的分析； （4）bodymovin动画插件过程研究及转换出来的json 3.4 bodymovin动画插件过程研究及转换出来的json文件 7.png 大杀器Bodymovin和Lottie：把AE动画转换成HTML5/Android/iOS原生动画 这片文章介绍了如何使用 Bodymovin插件转换出矢量动画的json文件。
4.1K40发布于 2019-01-14 - 来自专栏张家辉的树屋
React: Lottie 动画初体验和优化策略
什么是 LOTTIE lottie 是 Aribnb 开源一个主要面向 Web、iOS、Android、React Native、Windows 的动画库，可以实时渲染After Effects动画，并以Bodymovin AE 解析出 JSON 动画，前端工程师使用 JSON 文件在 lottie-web 等框架下进行 svg (canvas/html) 渲染 2、看几个简单的 DEMO 先看几个web 端直接使用 bodymovin 只需要解析导出的 JSON 文件及所需要的图片，就能在各个平台上实现相同的动画效果，它实现成本低，上线后只需要动态替换对应的 JSON 文件就能实现可配置、可运营 4、简单的原理解析 来看看 bodymovin 但是这个 api 还在试验阶段，各大浏览器都不支持所以只是暂时讨论和了解一下就可以了，不能正式的开发使用； 参考 [1] Awesome List [2] bodymovin [3] lottie
4.8K40发布于 2021-02-02 - 来自专栏秋风的笔记
又来了！实现微信 “炸屎”大作战
Lottie是一个库，可以解析使用AE制作的动画（需要用bodymovin导出为json格式），支持web、ios、android和react native。 而它的写法非常简单，只需要引入 lottie，然后调用 bodymovin.loadAnimation 方法。 https://cdn.bootcdn.net/ajax/libs/lottie-web/5.7.8/lottie.min.js"></script> </head> <body>
<script> const animation = window.bodymovin.loadAnimation({ container: document.querySelector ('.bodymovin'), // 要包含该动画的dom元素 renderer: 'svg', // 渲染方式，svg、canvas、html（轻量版仅svg渲染） loop1.7K20发布于 2021-07-09 - 来自专栏前端专精
Lottie与LottieFiles：快速为前端Web开发注入精美动画的利器
动画转换为轻量级JSON文件，实现了： 矢量动画的完美缩放 多平台一致性展示 实时编辑与即时预览 二、Lottie的核心组件解析（Lottie的技术架构） 1、Lottie核心三要素 组件 作用 技术特点 Bodymovin 设计阶段：在AE中使用官方规范制作动画（限制复杂滤镜） 导出阶段：通过Bodymovin插件生成JSON 优化阶段：使用LottieFiles Web端进行： 文件压缩 跨平台预览 动态参数配置
1.9K20编辑于 2025-03-11 - 来自专栏无原型不设计
超全面的 UI 工作流程指南（四）：切图标注
这些动画通过一个叫 Bodymovin 的开源 After Effects 插件，以 JSON 文件的形式进行输出。Lottie 通过 JSON 格式下载动画数据并实时提供给开发者。 窗口 – 扩展 – Bodymovin，选择好合成和保存路径后，点击 Render 导出 data.jason 文件，再把该文件交给 iOS 开发 （其他同理），具体如下图： 这里设置选择 Demo
4.4K41编辑于 2022-02-28 - 来自专栏IMWeb前端团队
面向前端的 Lottie & AE 动画手把手入门教学
Intro to Lottie Lottie 是 Airbnb 开源的一个支持 Web、Android、iOS 以及 ReactNative等平台的动画库，它可以结合 AE 和 Bodymovin 来快速实现跨平台动画 要使用 Lottie, 需要在借助 Bodymovin 插件将动画工程文件从 AE 中导出成 JSON。Lottie 分别为每个平台实现了一套 Player, 只需载入JSON动画文件就可播放。 首先需要在 AE 里安装 Bodymovin，参考 GitHub - airbnb/lottie-web: Render After Effects animations natively on Web
5.6K50发布于 2019-12-03 - 来自专栏考拉阅读前端团队
H5小游戏 【篇一】 组词游戏
格式的中文常用词组词库，每次随机抽取词语进行游戏 匹配消除功能，自动在词库中匹配选中词语并进行消除 选中动画以及消除动画，均由svg生成爆炸动画 智能提醒系统，10秒之后未作操作可提示单词 过关判定 bodymovin clear(id) { document.getElementById(id).innerHTML = '' console.log(id,'-----------------') bodymovin.loadAnimation
1.4K20发布于 2019-04-12
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号