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(, false); // 播放完之前的片断，播放10-20帧
animation.playSegments([,], 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(,true)
})
}
},
beforeDestroy() {
document.getElementById("home").removeEventListener("click",()=>{})
}
};
</script>
界面中给组件添加点击事件：
<Home @click.native="clickSvg"></Home>
结尾：更多的操作由各位去发掘吧
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]