uniapp中利用lottie实现JSON动画

不喜欢废话直接开干

一、引入相干依赖

1. npm install lottie-web
2. # 如果有问题可以和我保持一致：npm install lottie-web@5.12.2

复制代码

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

• 存放资源的目录，用于存放JSON动画：/static/svgJson/*
  
• 用于存放动画组件的目录：/components/SvgAnimation/*
  

三、操作步调

在一些素材网站上下载我们需要的JSON素材，或者直接找UI给你
比如我们熟知的iconfon
下载后我们会得到一个.json的文件，我们把它放在资源目录下，比如：/static/svgJson/start.json
在存放动画组件中新增一个自界说组件，就比如：/components/SvgAnimation/start.vue
四、编写自界说组件代码

模板代码如下：

1. <template>
2.   <view class="container-start">
3.     <view id="start"></view>
4.   </view>
5. </template>
7. <script module="renderScript" lang="renderjs">
8. import lottie from 'lottie-web'
9. import start from "../../static/svgJson/start.json";
10. export default {
11.     mounted() {
12.         this.ready()
13.     },
14.     methods: {
15.         ready() {
16.             lottie.loadAnimation({
17.                 container: document.getElementById("start"),
18.                 renderer: 'svg',
19.                 loop: true,
20.                 autoplay: true,
21.                 animationData: start
22.             });
23.         }
24.     }
25. };
26. </script>
28. <style>
29. /* 这里可以自己定义相关的样式，这里只是做个示范，具体按照界面而定 */
30. .container-start {
31.   width: 50%;
32. }
33. #start {
34.   width: 100%;
35. }
36. </style>

复制代码

  须知：代码中的start可以替换成自己生存的JSON文件
  打个比方就是：我下载了一个名字叫end.json文件，我就在/components/SvgAnimation目录下新增一个end.vue
  然后利用快捷键ctrl+h，然后将模板中的start单词全部替换成end即可！
  五、组件的利用

在页面中引入组件直接利用即可：

1. import More from "../../components/SvgAnimation/more.vue"
3. # 在界面中使用：
4. <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的时候，需要调用该方法
  添加点击事件

1. <template>
2.   <view class="container">
3.     <view id="home"></view>
4.   </view>
5. </template>
7. <script module="renderScript" lang="renderjs">
8. import lottie from 'lottie-web'
9. import home from "../../static/svgJson/home.json";
10. export default {
11.     data(){
12.         return {
13.             animation: null
14.         }
15.     },
16.     mounted() {
17.         this.ready()
18.         this.addClickEvent()
19.     },
20.     methods: {
21.         ready() {
22.             this.animation = lottie.loadAnimation({
23.                 container: document.getElementById("home"),
24.                 renderer: 'svg',
25.                 loop: false, //是否循环播放
26.                 autoplay: true, //是否自动播放
27.                 animationData: home // 加载json的文件名
28.             }); // 加载
29.             this.animation.goToAndStop(55,true)
30.         },
31.         addClickEvent(){
32.             document.getElementById("home").addEventListener("click",()=>{
33.                 this.animation.playSegments([10,65],true)
34.             })
35.         }
36.     },
37.     beforeDestroy() {
38.         document.getElementById("home").removeEventListener("click",()=>{})
39.     }
40. };
41. </script>

复制代码

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

1. <Home @click.native="clickSvg"></Home>

复制代码

---

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。