共计 2105 个字符，预计需要花费 6 分钟才能阅读完成。
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…
根本应用
-
装置依赖
yarn add lottie-web -
我的项目内援用
import lottie from 'lottie-web' -
实例化
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/…
工具库
- 洛丽塔：https://design.alipay.com/lolita
作用：
- 能够用来压缩动画源文件
- 查看动画文件的相干属性（动画时常，帧数，画布大小。。。）
- 导出不同格局的文件
- 动画编辑
- 犸良：https://design.alipay.com/emo…
作为一站式动效制作平台，通过海量的动效素材以及可视化编辑能力，帮忙零根底的用户轻松实现动效制作