前端实现复杂动画灰常好的工具-lottie

如果 在工作过程中遇到一些用css3不好实现的动画，gif又满足不了需求，那么就试试lottie动画！！！

• 官方文档：http://airbnb.io/lottie/#/
• 源码地址：https://github.com/airbnb/lottie
• lottie-web地址：https://github.com/airbnb/lottie-web
• npm地址：https://www.npmjs.com/package/lottie-web

<template>
      <div class="banner-one__moc" ref="lavContainer">
      </div>
</template>

<script>
    //引入lottie
    import lottie from 'lottie-web'
    //引入json数据
    import machinery from "../static/assets/lottie.json"
    export default {
      name: "Banner",
      mounted() {
        lottie.loadAnimation({ //初始化
            container: this.$refs.lavContainer,//在哪个dom容器中生效
            renderer: 'svg',//渲染方式svg
            loop: true,//是否循环 如果传入的参数options.loop不为false 则一直循环 即默认循环
            autoplay: true,//是否自动播放  如果传入的参数options.autoplay不为false 则自动播放 即默认自动播放
            animationData: machinery,//动画数据，这个必须要有
            // rendererSettings: this.options.rendererSettings,
            name:'machinery' //动画名称
        })
      }
    }
</script>

<style scoped>

</style>

lottie.json - Lottie方法方案是由设计师使用工具出动画，导出为json，给前端播放

json效果在线预览工具： https://app.lottiefiles.com/preview?fileUrl=

复杂的动画完美解决！！！