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>

---

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