bodymovin/lottie-web快速入门

bodymovin此名称截止到v4.13.0,从v5.0.1后命名为lottie-web
lottie家族还有lottie-react-native、lottie-ios、lottie-android

使用流程:

# with npm
npm install lottie-web

# with bower
bower install bodymovin

1. 引入lottie.js
2. <div id="lottie"></div>
3. lottie.loadAnimation({
       container: document.getElementById('lottie'),
       renderer: 'svg',
       loop: false,
       autoplay: true,
       path: pathData,//如果没有图片做动效,全是设计师用画的矢量图形
       //animationData: animationData   //如果有图片做动效,二者填其一即可
   })

path动画

路径动画
路径动画

图片动画,数组前面多了一些图片资源

图片动画
图片动画

可以手动修改animationData的assets,animationData看上去是一堆杂乱无章的数据,认真看的话实际上,最前面的对象都是动画中所用图片的描述,所以,如果只是所用图片的不同,图片的尺寸,动画的运动轨迹都是一致的,可以手动修改animationData中的数据,以做到类似"换肤"的功能