uniapp中使用lottie实现JSON动画

不喜欢废话直接开干

一、引入相关依赖

npm install lottie-web
# 如果有问题可以和我保持一致：npm install lottie-web@5.12.2

二、在项目的目录新建目录结构

• 存放资源的目录，用于存放JSON动画：/static/svgJson/*
• 用于存放动画组件的目录：/components/SvgAnimation/*

三、操作步骤

在一些素材网站上下载我们需要的JSON素材，或者直接找UI给你

比如我们熟知的iconfon

下载后我们会得到一个.json的文件，我们把它放在资源目录下，比如：/static/svgJson/start.json

在存放动画组件中新增一个自定义组件，就比如：/components/SvgAnimation/start.vue

四、编写自定义组件代码

模板代码如下：

<template><view class="container-start"><view id="start"></view></view>
</template><script module="renderScript" lang="renderjs">
import lottie from 'lottie-web'
import start from "../../static/svgJson/start.json";
export default {mounted() {this.ready()},methods: {ready() {lottie.loadAnimation({container: document.getElementById("start"),renderer: 'svg',loop: true,autoplay: true, animationData: start }); }}
};
</script><style>
/* 这里可以自己定义相关的样式，这里只是做个示范，具体按照界面而定 */
.container-start {width: 50%;
}
#start {width: 100%;
}
</style>

须知：代码中的start可以替换成自己保存的JSON文件

打个比方就是：我下载了一个名字叫end.json文件，我就在/components/SvgAnimation目录下新增一个end.vue

然后使用快捷键ctrl+h，然后将模板中的start单词全部替换成end即可！

五、组件的使用

在页面中引入组件直接使用即可：

import More from "../../components/SvgAnimation/more.vue"# 在界面中使用：
<More></More>

提一嘴

由于比较懒，而且项目中使用的也不是太多，所以并没有进行封装。

一方面由于使用了renderjs，封装起来也不是一件短时间就能完成的事情，涉及到uniapp的视图层和逻辑层的数据交互，更多的是没有机会去深入研究。

另一方面也就是拿着模板代码直接替换一个名称也就是一会的事情。

如果有大佬有封装的代码那更好不过了！

更多

lottie-web常用方法

animation.play(); // 播放该动画，从目前停止的帧开始播放

animation.stop(); // 停止播放该动画，回到第0帧

animation.pause(); // 暂停该动画，在当前帧停止并保持

animation.goToAndStop(value, isFrame); // 跳到某个时刻/帧并停止。isFrame(默认false)指示value表示帧还是时间(毫秒)

animation.goToAndPlay(value, isFrame); // 跳到某个时刻/帧并进行播放

animation.goToAndStop(30, true); // 跳转到第30帧并停止

animation.goToAndPlay(300); // 跳转到第300毫秒并播放

animation.playSegments(arr, forceFlag); // arr可以包含两个数字或者两个数字组成的数组，forceFlag表示是否立即强制播放该片段

animation.playSegments([10,20], false); // 播放完之前的片段，播放10-20帧

animation.playSegments([[0,5],[10,18]], true); // 直接播放0-5帧和10-18帧

animation.setSpeed(speed); // 设置播放速度，speed为1表示正常速度

animation.setDirection(direction); // 设置播放方向，1表示正向播放，-1表示反向播放

animation.destroy(); // 删除该动画，移除相应的元素标签等。在unmount的时候，需要调用该方法

添加点击事件

<template><view class="container"><view id="home"></view></view>
</template><script module="renderScript" lang="renderjs">
import lottie from 'lottie-web'
import home from "../../static/svgJson/home.json";
export default {data(){return {animation: null}},mounted() {this.ready()this.addClickEvent()},methods: {ready() {this.animation = lottie.loadAnimation({container: document.getElementById("home"),renderer: 'svg',loop: false, //是否循环播放autoplay: true, //是否自动播放animationData: home // 加载json的文件名}); // 加载this.animation.goToAndStop(55,true)},addClickEvent(){document.getElementById("home").addEventListener("click",()=>{this.animation.playSegments([10,65],true)})}},beforeDestroy() {document.getElementById("home").removeEventListener("click",()=>{})}
};
</script>

界面中给组件添加点击事件：

<Home @click.native="clickSvg"></Home>

---

结尾：更多的操作由各位去发掘吧