如果 在工作过程中遇到一些用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=
复杂的动画完美解决!!!