前端 - Lottie 实现 AE 动效(Bodymovin)(一)

简介: 前端 - Lottie 实现 AE 动效(Bodymovin)(一)

项目背景

在海外项目中,为了优化用户体验加入了几处微交互动画,实现方式是设计输出合成的雪碧图,前端通过序列帧实现动画效果:


image.png


image.png


帧动画的缺点和局限性比较明显,合成的雪碧图文件大,且在不同屏幕分辨率下可能会失真。经调研发现,Lottie是个简单、高效且性能高的动画方案。


Lottie是可应用于Android, iOS, Web和Windows的库,通过Bodymovin解析AE动画,并导出可在移动端和web端渲染动画的json文件。换言之,设计师用AE把动画效果做出来,再用Bodymovin导出相应地json文件给到前端,前端使用Lottie库就可以实现动画效果。


image.png


Bodymovin插件的安装与使用

  1. 关闭AE
  2. 下载并安装ZXP installer
    https://aescripts.com/learn/zxp-installer
  3. 下载最新版bodymovin插件
    lottie-web/bodymovin.zxp at master · airbnb/lottie-web · GitHub
  4. 把下载好的bodymovin.zxp拖到ZXP installer

image.png


打开AE,在菜单首选项->常规中勾选☑️允许脚本写入文件和访问网络(否则输出JSON文件时会失败)


image.png


在AE中制作动画,打开菜单窗口->拓展->Bodymovin,勾选要输出的动画,并设置输出文件目录,点击render


image.png


打开输出目录会看到生成的JSON文件,若动画里导入了外部图片,则会在images中存放JSON中引用的图片

目录
相关文章
|
JavaScript 前端开发
React+html2canvas+jspdf+antd快速实现前端pdf预览及打印
文章的总结目标实际上就是一个前端pdf打印组件,由於能在往后的其他项目中得以快速上手,并能根据所在项目需要快速自定义扩展,因此組件非常简陋直白,文章是实践过程的记录产物,并不保证完全正确,仅作参考。
React+html2canvas+jspdf+antd快速实现前端pdf预览及打印
|
6月前
|
JSON 前端开发 JavaScript
前端使用lottie-web,使用AE导出的JSON动画贴心教程
前端使用lottie-web,使用AE导出的JSON动画贴心教程
602 2
|
6月前
|
JSON 前端开发 JavaScript
🌟前端使用Lottie实现炫酷的开关效果🌟
🌟前端使用Lottie实现炫酷的开关效果🌟
|
前端开发 JavaScript
微前端实现方案之iframe
微前端实现方案之iframe
微前端实现方案之iframe
|
JavaScript 算法 前端开发
【前端算法】JS实现数字千分位格式化
JS实现数字千分位格式化的几种思路,以及它们之间的性能比较
345 1
|
JavaScript 前端开发 IDE
如何从一台新电脑配置前端常用工具实现快速开发
如何从一台新电脑配置前端常用工具实现快速开发
如何从一台新电脑配置前端常用工具实现快速开发
|
前端开发
前端实现导出word(docxtemplater、pizzip、jszip-utils、file-saver )
docxtemplater、pizzip、jszip-utils、file-saver 前端实现导出word
1218 0
前端实现导出word(docxtemplater、pizzip、jszip-utils、file-saver )
|
存储 JSON JavaScript
|
JavaScript 前端开发
vue 前端实现随机背景色
vue 前端实现随机背景色
vue 前端实现随机背景色
|
存储 前端开发 算法
一行代码解决LeetCode实现 strStr()使用JavaScript解题|前端学算法
一行代码解决LeetCode实现 strStr()使用JavaScript解题|前端学算法
163 0
一行代码解决LeetCode实现 strStr()使用JavaScript解题|前端学算法