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>
结尾:更多的操作由各位去发掘吧
总结
到此这篇关于uniapp中使用lottie实现JSON动画的文章就介绍到这了,更多相关uniapp用lottie实现JSON动画内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!