一、简介
Lottie 是一个应用十分广泛动画库，适用于Android、iOS、Web、ReactNative、Windows的库，它解析了用Bodymovin导出为json的Adobe After Effects动画，并在移动和网络上进行了原生渲染。其和 GSAP 这类专注动画曲线、插值等js动画库不同，它本质上是一套跨平台的平面动画解决方案。其提供了一套完整得从AE到各个终端的工具流，通过AE的插件将设计师做的动画导出成一套定义好的json文件，之后再通过渲染器进行渲染，它提供了“SVG”、“Canvas”和“HTML”三种渲染模式，最常用的是第一种和第二种。
image.png
二、优缺点
2.1 优点
Lottie方法方案是由设计师出动画，导出为json，给前端播放。所以，使用Lottie方案的好处在于：
① 动画由设计使用专业的动画制作工具Adobe After Effects来实现，使动画实现更加方便，动画效果也更好；
② 前端可以方便的调用动画，并对动画进行控制，减少前端动画工作量；
③ 设计制作动画，前端展现动画，专业人做专业事，分工合理；
④ 还原程度高，百分之百；
⑤ 使用lottie方案，json文件大小会比gif文件小很多，性能也会更好。
总结：能直接将AE中设计的动画效果导出为json，并直接在页面上显示，是一种开发成本又小，效果又很还原的方案。
2.2 不足
① lottie-web文件本身仍然比较大（大小为262k，经过gzip后，大小为65.8k）。所以，需要注意lottie-web的加载。目前H5项目有离线包，PC项目也会上PWA，会对其进行缓存，保证加载速度。
② lottie动画其实可以理解为svg动画/canvas动画，不能给已存在的html添加动画效果；
③ 动画json文件的导出，目前是将AE里面的参数一一导出成json内容，如果设计师建了很多的图层，可能仍然有json文件比较大（20kb+）的问题。需要设计师遵循一定的规范。
④ 有很少量的AE动画效果，lottie无法实现，有些是因为性能问题，有些是没有做。比如：描边动画等。
三、使用
3.1 基本步骤
-
安装 lottie-web
npm install lottie-web --save -
引入这个库
import lottie from 'lottie-web' -
拿到 UI 给的配置文件（JSON 数据）
-
初始化动画
const animation = lottie.loadAnimation({ container: document.getElementById('box'), renderer: 'svg',// 渲染方式：svg、canvas loop: true, // 循环播放，默认：false autoplay: true, //自动播放 ，默认：true path: ' ' // json 路径 })
3.2 常用方法
animation.play(); // 播放，从当前帧开始播放
animation.stop(); // 停止，并回到第0帧
animation.pause(); // 暂停，并保持当前帧
animation.goToAndStop(value, isFrame); // 跳到某个时刻/帧并停止isFrame(默认false)指示value表示帧还是时间(毫秒)
animation.goToAndPlay(value, isFrame); // 跳到某个时刻/帧并进行播放
animation.goToAndStop(30, true); // 跳转到第30帧并停止
animation.goToAndPlay(300); // 跳转到第300毫秒并播放
animation.playSegments(arr, forceFlag); // arr可以包含两个数字或者两个数字组成的数组，forceFlag表示是否立即强制播放该片段
animation.playSegments([10,20], false); // 播放完之前的片段，播放10-20帧
animation.playSegments([[0,5],[10,18]], true); // 直接播放0-5帧和10-18帧
animation.setSpeed(speed); // 设置播放速度，speed为1表示正常速度
animation.setDirection(direction); // 设置播放方向，1表示正向播放，-1表示反向播放
animation.destroy(); // 删除该动画，移除相应的元素标签等。在unmount的时候，需要调用该方法
3.3 常用事件
监听方式一：
- onComplete：动画整体播放完成（如果是循环播放，循环播放完成后触发）
- onLoopComplete：针对循环动画，单次一遍播放完成后触发
- onEnterFrame
- onSegmentStart
监听方式二：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
四、JSON 字段介绍
image.png
网友评论