使用lottie-web实现动画效果

2,090 阅读1分钟

**** Lottie是可应用于Android, iOS, Web和Windows的库,通过Bodymovin解析AE动画,并导出可在移动端和web端渲染动画的json文件。换言之,设计师用AE把动画效果做出来,再用Bodymovin导出相应地json文件给到前端,前端使用Lottie库就可以实现动画效果。

npm install lottie-web
import Lottie from 'lottie-web'
import * as dataJson from './dataJson.json'

lottie.loadAnimation({
  container: element, // the dom element that will contain the animation;this.$refs.lottieContainer
  renderer: 'svg',
  loop: true,
  autoplay: true,
 animationData: dataJson,
});