Lottie动画全攻略：硬核还原100%页面动画效果

更新时间：2024-11-10 23:58 浏览量：4

最近开发大屏页面碰到一个困境：。

小伙伴们是不是也有类似的经历呢?大家可以留言分享哦！

被设计师折磨一顿后，大师兄找到了解决这个困境的方案。它就是今天的主角：Lottie

Lottie 是Airbnb开源的一个 面向iOS、Android、React Native 的动画库，能分析 AE 导出的动画（需要用bodymovin导出为json格式），并且能让原生 App 像使用静态素材一样使用这些动画，完美实现动画效果。下面是Lottie提供的官方效果图。类似下面这种一段动画的播放，非常适合使用Lottie来做。

我们先来看下整个流程简图。

设计师用AE把动画效果做出来，再用Bodymovin导出相应地json文件给到前端，前端使用Lottie库就可以实现动画效果。功能简单且强大。

至于Adobe Effect和Bodymovin插件的安装与使用…嗯嗯，这是设计师的事情，咱们就不操心啦。

静态URL引入

调用loadAnimation

var params = { container: element, // 容器节点 renderer: 'svg', loop: true, autoplay: true, path: 'data.json' // JSON文件路径 } var anim = lottie.loadAnimation(params);

通过NPM安装vue-lottie

npm install --save vue-lottie

vue-lottie使用

Speed: x{{animationSpeed}}

stop pause play import Lottie from './lottie.vue'; import * as animationData from './assets/pinjump.json'; export default { name: 'app', components: { 'lottie': Lottie }, data { return { defaultOptions: {animationData: animationData}, animationSpeed: 1 } }, methods: { handleAnimation: function (anim) { this.anim = anim; }, stop: function { this.anim.stop; }, play: function { this.anim.play; }, pause: function { this.anim.pause; }, onSpeedChange: function { this.anim.setSpeed(this.animationSpeed); } } }

container：在其上呈现动画的 dom 元素

animationData：一个带有导出动画数据的对象。

path：动画对象的相对路径。（animationData 和 path 是互斥的）

loop：默认值为true。可传递需要循环的特定次数

autoplay：true / false 它会在准备好后立即开始播放

name：动画名称以供将来参考

renderer: ‘svg’ / ‘canvas’ / ‘html’ 设置渲染器

Lottie提供了用于监听动画执行情况的事件：

complete

loopComplete

enterFrame

segmentStart

config_ready(初始配置完成)

data_ready（所有动画数据加载完成）

DOMLoaded（元素已添加到DOM节点）

destroy

可使用addEventListener监听事件

// 动画播放完成触发 anm.addEventListener('complete', anmLoaded); // 当前循环播放完成触发 anm.addEventListener('loopComplete', anmComplete); // 播放一帧动画的时候触发 anm.addEventListener('enterFrame', enterFrame);

Lottie的更多详解，请查阅下方链接。

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

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

【程序视点】助力打工人减负，从来不是说说而已！

后续小二哥会继续详细分享更多实用的工具和功能。持续关注，这样就不会错过之后的精彩内容啦！

如果这篇文章对你有帮助的话，别忘了【点赞】【分享】支持下哦~

Lottie动画全攻略：硬核还原100%页面动画效果

相似文章