前端懒人神器--lottie动画库使用指北

lottie 介绍

​ Lottie是一个Airbnb 开发的用于Android，iOS，Web和Windows的库，用于解析使用Bodymovin导出为json的Adobe After Effects动画，并在移动设备和网络上呈现

优势

这套方案最优秀的地方在于，解放了前端开发者，让设计师可以直接对接到动画实现上

github仓库地址

• lottie-web: https://github.com/airbnb/lot...
• lottie-ios: https://github.com/airbnb/lot...
• lottie-android: https://github.com/airbnb/lot...

基本使用

1. 安装依赖

   yarn add lottie-web

2. 项目内引用

   import lottie from 'lottie-web'

3. 实例化

   lottie.loadAnimation({
       container: document.getElementById('lottie-animation'),
       renderer: 'svg',
       loop: false,
       path: 'https://gaeacdn.jiliguala.com/jlgl/pages/animation/finger02.json'
   })

api 介绍

loadAnimation 的参数

名称	描述
container	用于渲染的容器，一般使用一个 div 即可
renderer	渲染器，可以选择 'svg' / 'canvas' / 'html'，个人测试发现 svg 效果和兼容性最好
name	动画名称，用于 reference
loop	循环
autoplay	自动播放
path	json 路径，页面会通过一个 http 请求获取 json
animationData	json 动画数据，与 path 互斥，建议使用 path，因为 animationData 会将数据打包进来，会使得 js bundle 过大

实例化后的api

名称	参数	描述
stop	无	停止动画
play	无	播放动画
pause	无	暂停
setSpeed	Number	设置播放速度，1 表示1倍速度，0.5 表示 0.5倍速度
setDirection	Number	正反向播放，1 表示 正向，-1 表示反向
goToAndStop	Number, [Boolean]	跳到某一帧或某一秒停止，第二个参数 iFrame 为是否基于帧模式还是时间，默认为 false
goToAndPlay	Number, [Boolean]	跳到某一帧或某一秒开始，第二个参数 iFrame 为是否基于帧模式还是时间，默认为 false
playSegments	Array, [Boolean]	播放片段，参数1为数组，两个元素为开始帧和结束帧；参数2为，是否立即播放片段，还是等之前的动画播放完成
destroy	无	销毁

事件

• onComplete
• onLoopComplete
• onEnterFrame
• onSegmentStart
• you can also use addEventListener with the following events:
• complete
• loopComplete
• enterFrame
• segmentStart
• config_ready (when initial config is done)
• data_ready (when all parts of the animation have been loaded)
• DOMLoaded (when elements have been added to the DOM)
• destroy

高级用法

动态修改 Lottie 中的图片

动态修改 Lottie 中的文本

用 async/await 优雅地控制 Lottie 播放

Lottie 更多应用方向

• 可控制的动画

  由于 Lottie 动画是可以通过程序控制播放的，不少营销活动页上的动画可以考虑采用 Lottie 来实现

  比如很常见的「大转盘」「抽奖机」这样的抽奖交互形式，如果设计师做出一个更精致的抽奖动画，我们只需要在用户点击抽奖时，调用 .play() 控制 Lottie 播放就可以了，页面体验会更高大上

• 替代短视频

  今年开始淘宝商品详情中，短视频开始成为潮流，但是其实不少视频完全可以用 Lottie 来实现（其实设计工具可能都是 AE），一方面文件体积更小，另一方面 Lottie 这种技术方案很容易替换动画中的关键「文案」

• 可交互的动画

  由于 Lottie 的 JSON 内描述了动画的各种细节如关键帧、位移轨迹等等，因此如果在动画播放时，根据用户的交互去动态改变这些参数，就可以实现可交互的动画

• 简单游戏

  通过 Lottie 自带的播放控制能力，我们甚至能做出一些简单的游戏，比如下面是最近我们业务中的例子，投骰子、蚂蚁走楼梯等等动画，就使用了 Lottie

示例：https://www.yuque.com/lottie/...

工具库

1. 洛丽塔 ：https://design.alipay.com/lolita

​ 作用：

• 可以用来压缩动画源文件
• 查看动画文件的相关属性（动画时常，帧数，画布大小。。。）
• 导出不同格式的文件
• 动画编辑

1. 犸良：https://design.alipay.com/emo...

   作为一站式动效制作平台，通过海量的动效素材以及可视化编辑能力，帮助零基础的用户轻松完成动效制作