uni-app Vue3 使用洛丽塔动画

成果图

成果图

安装 lottiejs-miniapp 组件:

1
npm i lottiejs-miniapp

使用

1
2
//在 <template> 中 加入 <canvas> 组件
<canvas id="lottiejs-canvas" canvas-id="lottiejs-canvas" class="lottiejs-canvas" type="2d"></canvas>

引入 lottiejs-miniapp

1
2
3
4
5
6
<script setup lang="ts">
import * as lottie from 'lottiejs-miniapp'
import {
onReady
} from '@dcloudio/uni-app'
</script>

在下面再加入以下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
onReady(() => {
wx.createSelectorQuery().select('#lottiejs-canvas').fields({
node: true,
size: true
}).exec(res => {
const canvas = res[0].node;
const ctx = canvas.getContext('2d')
const rpx = wx.getSystemInfoSync().pixelRatio;
canvas.width = res[0].width * rpx;
canvas.height = res[0].height * rpx;
ctx.scale(rpx, rpx);
lottie.setup(canvas);
lottie.loadAnimation({
loop: true,
autoplay: true,
path: 'https://gw.alipayobjects.com/os/sage/a3711687-ae2c-42b4-b618-966d0bae9340/lottie.json?_output_charset=utf-8&_input_charset=utf-8',
rendererSettings: {
context: ctx,
},
});
});
})
1
大家主要替换 loadAnimation 中的 path 参数为自己Lottie动画json文件的http地址即可。

完整代码

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
<template>
<view class="content">
<!-- #ifdef MP-WEIXIN -->
<canvas id="lottiejs-canvas" canvas-id="lottiejs-canvas" class="lottiejs-canvas" type="2d"></canvas>
<view class="title">我知道你会来,所以我会等。</view>
<view class="title_name">——星星Star</view>
<!-- #endif -->

</view>
</template>

<script setup lang="ts">
// #ifdef MP-WEIXIN
import * as lottie from 'lottiejs-miniapp'
import {
onReady
} from '@dcloudio/uni-app'
onReady(() => {
wx.createSelectorQuery().select('#lottiejs-canvas').fields({
node: true,
size: true
}).exec(res => {
const canvas = res[0].node;
const ctx = canvas.getContext('2d')
const rpx = wx.getSystemInfoSync().pixelRatio;
canvas.width = res[0].width * rpx;
canvas.height = res[0].height * rpx;
ctx.scale(rpx, rpx);
lottie.setup(canvas);
lottie.loadAnimation({
loop: true,
autoplay: true,
path: 'https://gw.alipayobjects.com/os/sage/a3711687-ae2c-42b4-b618-966d0bae9340/lottie.json?_output_charset=utf-8&_input_charset=utf-8',
rendererSettings: {
context: ctx,
},
});
});
})
// #endif
</script>

<style lang="scss" scoped>

.content{
height: calc(100vh);
width: 100%;
background-color: #1a1b1f;
}
/* #ifdef MP-WEIXIN */
.lottiejs-canvas{
width: 750rpx;
height:700rpx;
/* background-color: rgb(255, 187, 0); */
background-color: #1a1b1f;
}
.title{
color: #dedede;
font-size: 14px;
right: 40rpx;
position: absolute;
margin-top: -80rpx;
}
.title_name{
color: #dedede;
font-size: 14px;
right: 40rpx;
margin-top: -40rpx;
position: absolute;
}
/* #endif */
</style>