vue页面中使用json格式动态图

如图所示，json格式动态图

需要插件 “vue-lottie”

下载插件

npm i vue-lottie -S

main.js 引入使用

import lottie from "vue-lottie";
Vue.component("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