uniapp中使用lottie实现JSON动画

uniapp中使用lottie实现JSON动画

不喜欢废话直接开干

一、引入相关依赖

javascript 复制代码
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

四、编写自定义组件代码

模板代码如下:

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即可

五、组件的使用

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

vue 复制代码
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的时候,需要调用该方法

添加点击事件

vue 复制代码
<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>

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

vue 复制代码
<Home @click.native="clickSvg"></Home>

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

相关推荐
Z_ One Dream9 分钟前
css 在 hover 子元素时,不要让父元素触发 hover 效果
前端·javascript·css
0725游广川3 小时前
cjson内存泄漏问题注意事项
服务器·json
码农幻想梦5 小时前
实验九 视图的使用
前端·数据库·oracle
开心工作室_kaic7 小时前
ssm010基于ssm的新能源汽车在线租赁管理系统(论文+源码)_kaic
java·前端·spring boot·后端·汽车
大力水手~8 小时前
css之loading旋转加载
前端·javascript·css
Nguhyb8 小时前
-XSS-
前端·xss
前端郭德纲8 小时前
深入浅出ES6 Promise
前端·javascript·es6
就爱敲代码8 小时前
ES6 运算符的扩展
前端·ecmascript·es6
王哲晓9 小时前
第六章 Vue计算属性之computed
前端·javascript·vue.js
究极无敌暴龙战神X9 小时前
CSS复习2
前端·javascript·css