基础使用
官方文档 lottie
分为两类：命令式和申明式
命令式
// container为lottie放置的dom元素
// renderer为渲染方式。'svg'|'canvas'|'html' 本人项目使用的svg渲染效果较好，性能较佳
// loop 是否渲染播放
// autoplay 是否自动播放
// path 动画的json文件路径
// animationData 动画json对象
lottie.loadAnimation({
container: element, // the dom element that will contain the animation
renderer: 'svg',
loop: true,
autoplay: true,
path: 'data.json' // the path to the animation json
// animationData: animationData 和path是互斥的，取其中一个即可
});
申明式
// 必传属性：class和data-animation-path
// class 必须为lottie
// data-animation-path 为文件的相对路径
<div style="width:1067px;height:600px" class="lottie" data-animation-path="animation/" data-anim-loop="true" data-name="ninja"></div>
// 本人项目是react所以采用的是lottie-react 该包对lottie声明式进行了封装
食用方式
<Lottie
options={{
loop: true,
autoplay: true,
rendererSettings: {
progressiveLoad: true,
},
animationData: animationData?.json,
}}
eventListeners={eventListeners}
width="100vw"
isClickToPauseDisabled
style={{
height: 'auto',
}}
isStopped={isStopped}
/>
API方法
// 仅介绍常用的，具体可以根据业务查看官方文档
// name 可选参数
lottie.play(name）开始动画
lottie.stop(name) 暂停动画
lottie.setSpeed(name) 设置播放速度
lottie.setDirection(name) 设置动画方向
lottie.destroy(name) 摧毁动画
lottie.resize(name) 对动画尺寸进行重新加载
// 声明式属性
isStopped:boolean 停止动画
isPaused:boolean 暂停动画
eventListeners?: readonly EventListener[] 监听事件数组。具体事件在下方查看
speed?: number 速度
direction?: number 方向
style?: React.CSSProperties css属性
width?: number | string 动画宽度
height?: number | string 动画高度
interface EventListener {
eventName:
| "complete" 动画加载完毕事件
| "loopComplete" 循环一次完毕，可触发多次
| "enterFrame" 进入页面触发
| "segmentStart" 动画片段初始
| "config_ready" 配置加载完毕
| "data_ready" 动画json数据加载完毕
| "loaded_images" 图片加载完毕
| "DOMLoaded" DOM加载完毕
| "destroy"; 摧毁时触发
callback: () => void; 事件回调函数
}
lottie容器宽高设置100vh和100vw实现宽高自适应
优化措施
本项目lottie动画Json有12个。
- 采用了异步加载+虚拟进度条来提升用户体验
虚拟进度条设置为3s内加载到80%
// 为保证动画顺序，使用promise.all
const loadAllAnimation = async (annualStatements: IAnnualStatement[] = []) => {
const values = await Promise.all(
(annualStatements || []).map((item) => {
return baseRequest({
method: 'GET',
url: item.animationDataUrl,
showLoading: false,
})
.then((res) => res?.json())
.then((json) => ({ json }));
}),
);
return values;
};
// 通过循环loadAllAnimation数组来加载lottie动画，并对lottie动画监听loaded_image事件，当所有图片加载完毕后将虚拟进度条设置为100%
-
lottie动画通过数组循环渲染，仅对当前视口的lottie动画进行播放，其余视口外的动画通过isStopped暂停，提升性能
-
AE设计师对动画的图层进行精简复用，压缩json体积，图片尽量复用
总结
优点：lottie兼容性比较好，可以适配不同的浏览器。同时定制化程度高。
缺点：lottie的定制化和一些动态化操作需要设计师进行配合。（如动画内的动态文案，动画的交互等等）
