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>

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

相关推荐
zwjapple29 分钟前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20203 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem3 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊3 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术4 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing4 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止4 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall4 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴4 小时前
简单入门Python装饰器
前端·python
雪芽蓝域zzs4 小时前
uniapp 国密sm2加密
uni-app