uni-app Vue3 使用洛丽塔动画

成果图

成果图

安装 lottiejs-miniapp 组件：

cmd
1
npm i lottiejs-miniapp

使用

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

引入 lottiejs-miniapp

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

在下面再加入以下代码

js
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,
				},
			});
		});
	})
js
1
大家主要替换 loadAnimation 中的 path 参数为自己Lottie动画json文件的http地址即可。

完整代码

js
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>