-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.vue
118 lines (108 loc) · 2.63 KB
/
App.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<script setup lang="ts">
import type { AnimationItem, LottiePlayer } from 'lottie-web'
import { ref } from 'vue'
import { Blottie, type BlottieExpose, useBlottie } from 'blottie'
import animVueJS from './assets/vue-js.json'
const frame = ref(0)
const animationData = ref(animVueJS)
const blottie = ref<BlottieExpose>()
const composableEl = ref<HTMLElement | null>(null)
function onFrame(anim?: AnimationItem) {
frame.value = Math.round(anim ? anim.currentFrame : 0)
}
function onReady(anim?: AnimationItem | undefined) {
anim?.play()
}
async function beforeInit(player: LottiePlayer) {
// eslint-disable-next-line no-console
console.log('beforeInit', player)
}
async function onLoop() {
// eslint-disable-next-line no-console
console.log('loop')
}
useBlottie(
composableEl,
{
path: 'vue-js.json',
autoplay: true,
renderer: 'svg',
loop: true,
},
)
</script>
<template>
<div>
<h1>Blottie Demo</h1>
<div>
<h2>With Path (Frame {{ frame }})</h2>
<Blottie
class="animation"
:lottie="{
path: 'vue-js.json',
autoplay: true,
renderer: 'html',
loop: true,
}"
:before-init="beforeInit"
@enter-frame="onFrame"
/>
</div>
<div>
<h2>Distance Animation from LottieFiles</h2>
<Blottie
class="animation"
:lottie="{
loop: true,
path: 'https://assets6.lottiefiles.com/packages/lf20_bXGMKilbSf.json',
}"
container-tag="main"
@ready="onReady"
@loop-complete="onLoop"
>
<template #loading>
Loading...
</template>
</Blottie>
</div>
<div>
<h2>Loading from data with controls</h2>
<Blottie
ref="blottie"
class="animation"
:lottie="{
renderer: 'canvas',
animationData,
}"
/>
<div v-if="blottie && blottie.anim" class="controls">
<progress
:value="blottie.anim?.currentFrame"
:max="blottie.anim?.totalFrames"
/>
<button @click="blottie?.anim?.play()">
Play
</button>
<button @click="blottie?.anim?.pause()">
Pause
</button>
<button @click="blottie?.anim?.stop()">
Stop
</button>
<button
@click="
blottie?.anim?.setDirection(
blottie?.anim?.playDirection === -1 ? 1 : -1,
)
"
>
Reverse
</button>
</div>
</div>
<div>
<h2>Using useBlottie Composable</h2>
<div ref="composableEl" class="animation" />
</div>
</div>
</template>