摘要：什么是是一个可以通过插件来解析动画，并生成格式的文件。对于复杂的动画，开发同学要用很长的时间来实现，并且还有可能无法达到设计同学的最初的效果。是一个基于的动画效果实现组件。它基于开源项目，可以将导出的文件渲染成动画效果。
什么是Lottie
Lottie是一个可以通过bodymovin插件来解析Adobe After Effects动画，并生成json格式的文件。该json文件可以通过Lottie开源库在iOS,Android,macOS,React Native中进行解析生成动画效果。
下面是一些官网给出的动画效果：
一直以来我们的设计同学都是使用设计软件，设计动画效果，开发同学再通过代码来实现动效。对于复杂的动画，开发同学要用很长的时间来实现，并且还有可能无法达到设计同学的最初的效果。
还有一种实现动画的方式就是gif图。然而Android并不支持gif图，而且gif图对于移动端还有占用过多空间的问题。
那么，Lottie为我们做了什么呢。
首先，设计同学在Adobe After Effects上设计了动画效果，通过bodymovin插件，可以将动画导出成一个json文件。
然后，开发同学就可以通过Lottie将前面生成的json文件渲染成动画效果。
这样就可以高效的实现很多复杂动画效果啦。
对于现在十分流行的前端框架vuejs，当然有支持Lottie的组件。
vue-lottie是一个基于vuejs的动画效果实现组件。它基于lottie开源项目，可以将After Effects导出的json文件渲染成svg/canvas/html动画效果。
vue-lottie安装通过NPM安装
npm install --save vue-lottievue-lottie使用
Speed: x{{animationSpeed}}
轮子工厂--一个分享优秀的vue,angular组件的网站
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/85108.html
摘要：简单来说，就是一个可以将动画转成可运行在上的插件。使用工具使用前请确保已安装这以下工具。更详细内容可参考官网库最后再分项目框架提供两个的库 简介 Lottie 是 Airbnb 开源的一套跨平台的完整的动画效果解决方案，设计师可以使用 Adobe After Effects 设计出漂亮的动画之后，使用 Lottic 提供的 Bodymovin 插件将设计好的动画导出成 JSON 格式，...
摘要：经调研发现，是个简单高效且性能高的动画方案。换言之，设计师用把动画效果做出来，再用导出相应地文件给到前端，前端使用库就可以实现动画效果。 项目背景 在海外项目中，为了优化用户体验加入了几处微交互动画，实现方式是设计输出合成的雪碧图，前端通过序列帧实现动画效果：showImg(https://segmentfault.com/img/bVbp6jB);序列帧：showImg(https...
阅读 932·2023-04-26 02:56
阅读 9129·2021-11-23 09:51
阅读 1817·2021-09-26 10:14
阅读 2929·2019-08-29 13:09
阅读 2105·2019-08-26 13:29
阅读 509·2019-08-26 12:02
阅读 3477·2019-08-26 10:42
阅读 2955·2019-08-23 18:18
