vue3中lottie-web封装组件和api的利用

 

     利用ts的话定义范例components/Lottie/type.ts

1. type Segment = [ number, number]
3. export interface LottieEvent {
4.   play: () => void, // 播放动画
5.   pause: () => void, // 暂停动画
6.   stop: () => void, // 停止动画
7.   setSpeed: (speed: number) => void, // 设置播放速度，1 表示1倍速度，0.5 表示 0.5倍速度
8.   goToAndStop: (value: number, isFrame?: boolean) => void, // 跳到某一帧或某一秒停止，第二个参数 isFrame 为是否基于帧模式还是时间，默认为 false
9.   goToAndPlay: (value: number, isFrame?: boolean) => void, // 跳到某一帧或某一秒开始，第二个参数 isFrame 为是否基于帧模式还是时间，默认为 false
10.   setDirection: (direction: 1 | -1) => void, // 设置播放方向，1 表示正向播放，-1 表示反向播放
11.   playSegments: (segments: Segment[], forceFlag?: boolean) => void, // 播放指定的片段，参数1为数组，两个元素为开始帧和结束帧；参数2为，是否立即播放片段，还是等之前的动画播放完成
12.   destroy: () => void, // 销毁动画
13.   getDuration: (isFrames: boolean) => void,  // 获取动画时长，参数为是否基于帧模式，默认为 false. 如果为真，则返回以帧为单位的持续时间，如果为假，则以秒为单位。
16.   [propname: string]: any
17. }
19. // Events
20. // onComplete - 播放完成时触发
21. // onLoopComplete - 循环播放完成时触发
22. // onEnterFrame - 每一帧播放时触发
23. // onSegmentStart - 播放指定片段开始时触发

复制代码

   封装组件 components/Lottie/index.vue 

1. <script setup>
2. import { ref, onMounted } from 'vue'
3. import lottie from 'lottie-web'
5. // 设置组件参数
6. const props = defineProps({
7.   renderer: {
8.     type: String,
9.     default: 'svg',
10.   },
11.   // 循环播放
12.   loop: {
13.     type: Boolean,
14.     default: true,
15.   },
16.   autoplay: {
17.     type: Boolean,
18.     default: true,
19.   },
20.   animationData: {
21.     type: Object,
22.     default: () => ({}),
23.   },
24.   name: {
25.     type: String,
26.     default: '',
27.   }
28. })
30. // 创建 lottie 接收变量和获取dom
31. const animation = ref(null)
32. const dom = ref(null)
34. // 创建事件返回初始化lottie对象
35. const emits = defineEmits(['getAnimation', 'getDom'])
37. // 初始化渲染 lottie动画，并返回lottie对象
38. onMounted(() => {
39.   animation.value = lottie.loadAnimation({
40.     container: dom.value,  // 用于渲染的容器
41.     // 渲染方式 svg、canvas、html
42.     renderer: props.renderer,
43.     // 是否循环
44.     loop: props.loop,
45.     autoplay: props.autoplay, // 自动播放
46.     // UED 提供的 动画的 json 文件
47.     animationData: props.animationData,
48.     name: props.name,
49.   });
50.   emits('getAnimation', animation.value)
51. })
52. </script>
54. <template>
55.     <!-- 渲染 lottie 动画 -->
56.     <div id="lottieId" ref="dom"></div>
57. </template>
59. <style scoped>
61. #lottieId {
62.   width: 100%;
63.   height: 100%;
64. }
66. </style>

复制代码

  引用组件，例如HelloWord.vue

1. <script setup>
2. import { ref, onMounted, watch } from 'vue'
3. import Lottie from './Lottie/index.vue'
4. import Animation from '../assets/Animation - 1712559820721.json'
5. import Animation1 from '../assets/Animation-1.json'
7. const a1 = ref(null)
8. const count = ref(0)
9. const likeFlag = ref(false)
11. const getAnimation = (animation) => {
12.   a1.value = animation
13.   if (a1.value) {
14.     a1.value.addEventListener('enterFrame', () => {
15.       // console.log(a1.value, '--a1.value--');
16.       if (a1.value.currentFrame >= 63) { // 当前帧
17.         a1.value.goToAndPlay(0, true) // 跳转到指定帧开始
18.       }
19.     })
20.     a1.value.addEventListener('complete', () => {
21.       console.log('播放完毕');
22.     })
23.   }
24. }
25. const play = () => {
26.   if (likeFlag.value) {
27.     a1.value.playSegments([31, 64], true) // 播放指定的片段，([开始帧，结束帧], 是否立即播放)
28.   } else {
29.     a1.value.playSegments([0, 30], true)
30.   }
31.   likeFlag.value = !likeFlag.value
32.   count.value++
33. }
35. // const likeClick = () => {
36. //   console.log('likeClick');
37. //   a1.value.setSpeed(2) // 设置播放速度
38. //   // a1.value.setDirection(-1) // 设置播放速度,不知道什么原因这里没有生效
39. //   a1.value.stop()
40. //   setTimeout(() => {
41. //     // a1.value.goToAndStop(31, true) // 跳到指定帧结束，第二个参数 isFrame 为是否基于帧模式还是时间，默认为 false
42. //     // a1.value.goToAndPlay(21, true) // 跳转到指定帧开始
43. //     a1.value.play();
44. //   }, 100); // 延迟100毫秒播放
45. //   const duration = a1.value.getDuration(true) // true 为帧， false 为秒
46. //   console.log(duration, '--duration--'); // 64帧 2.56秒
47. // }
49. // 监听鼠标滚动事件
50. let frame = 0
51. const maxFrame = 60; // 假设最大值为100
52. window.addEventListener('wheel', (event) => {
53.   console.log(event, '--event--');
54.   if (event.wheelDelta < 0) {
55.     frame += 10
56.     count.value++
57.   } else if (event.wheelDelta >= 149) {
58.     frame -= 10
59.     count.value--
60.   }
61.   if (frame >= maxFrame) {
62.     frame = 0; // 重置为0
63.   } else if (frame < 0) {
64.     frame = maxFrame; // 重置为最大值
65.   }
66.   a1.value.goToAndStop(frame, true)
67.   console.log(frame, '--frame--');
69. })
71. onMounted(() => {
72. })
73. </script>
75. <template>
77.   <div class="card">
78.     <div>
79.       <Lottie :animation-data="Animation" />
80.     </div>
81.     <div class="card-body">
82.       <Lottie class="a1" :animation-data="Animation1" :loop="false" :autoplay="true" @get-animation="getAnimation"
83.         @click="likeClick" />
84.       <button @click="play">Play</button>
85.       <div class="count">{{ count }}</div>
86.       <div class="info">测试内容</div>
87.     </div>
88.   </div>
90. </template>
92. <style scoped>
93. .card {
94.   display: flex;
95.   align-items: center;
96.   width: 700px;
98.   /* margin: 0 auto; */
99.   .card-body {
100.     position: relative;
102.     .info {
103.       position: absolute;
104.       left: 50%;
105.       top: 20%;
106.       transform: translate(-50%, -50%);
107.       color: rgb(255, 255, 255);
108.     }
109.   }
110. }
111. </style>

复制代码

 

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