uniapp中使用lottie实现JSON动画

uniapp中使用lottie实现JSON动画

不喜欢废话直接开干

一、引入相关依赖

javascript 复制代码
npm install lottie-web
# 如果有问题可以和我保持一致:npm install [email protected]

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

  • 存放资源的目录,用于存放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>

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

相关推荐
庸俗今天不摸鱼18 分钟前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下25 分钟前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox36 分钟前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞39 分钟前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行39 分钟前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_5937581040 分钟前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周43 分钟前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端
三翼鸟数字化技术团队1 小时前
Vue自定义指令最佳实践教程
前端·vue.js
Jasmin Tin Wei2 小时前
蓝桥杯 web 学海无涯(axios、ecahrts)版本二
前端·蓝桥杯
圈圈编码2 小时前
Spring Task 定时任务
java·前端·spring