vue页⾯中使⽤json格式动态图如图所⽰，json格式动态图
需要插件 “vue-lottie”
下载插件
npm i vue-lottie -S
main.js 引⼊使⽤
vuejs流程图插件import lottie from"vue-lottie";
Vueponent("lottie", lottie);
代码中使⽤
// 引⼊⽂件
import gif1 from"@/assets/img/taurus/阿⽜动画/json/cow1.json";
// 页⾯中使⽤，options中的animationData值是图⽚路径，引⼊后替换上去
<lottie
:
options="{ animationData: gif1 }"
@animCreated="handleAnimation1"
/>
// animCreated⽅法实例化json图⽚
methods:{
handleAnimation1(anim){
this.gif1Control = anim;
}
}
实例化⽅法
// 可以使⽤实例化的图⽚去控制动态图播放暂停和重载
this.gif1Control.stop();// 停⽌动态图动作，动画回到第⼀帧
this.gif1Control.play();// 开始动态图动作，动画播放
this.gif1Control.pause();// 暂停动态图动作，动画再当前帧暂停
注意：如果需要在同⼀位置去切换不同的动态图，不可⽤ v-if 去控制 lottie 的显⽰隐藏，只能⽤ v-show

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。