feat: add h5 animation-view

pages/index/index.vue

 <template>
-	<view class="content">
-		<image class="logo" src="/static/logo.png"></image>
-		<view class="text-area">
-			<text class="title">{{title}}</text>
-		</view>
-	</view>
+	<div>
+		<animation-view-h5 class="animation" :path="path" :loop="loop" :autoplay="autoplay" :action="action"
+			:hidden="hidden" @bindended="lottieEnd">
+		</animation-view-h5>
+		<button @click="playLottie" type="primary">{{status}}lottie动画</button>
+		<button @click="changeLottie" type="primary">切换{{location}}动画</button>
+		<button @click="changeLottieDisplay" type="primary">{{display}}动画</button>
+	</div>
 </template>
 
 <script>
 	export default {
 		data() {
 			return {
-				title: 'Hello'
+				path: '/uni_modules/uni-animation-view/static/lottie.json',
+				loop: false,
+				autoplay: false,
+				action: 'stop',
+				hidden: false,
+				status: '播放',
+				location: '网络',
+				display: '隐藏'
 			}
-		},
-		onLoad() {
-
 		},
 		methods: {
-
+			playLottie() {
+				this.action = ('play' !== this.action) ? 'play' : 'pause';
+				this.status = ('pause' === this.action) ? '播放' : '暂停';
+			},
+			changeLottie() {
+				this.action = 'stop';
+				this.status = '播放';
+				this.path = ('网络' === this.location) ? 'https://native-res.dcloud.net.cn/uni-app/static/lottie.json' : '/uni_modules/uni-animation-view/static/lottie.json';
+				this.location = ('网络' === this.location) ? '本地' : '网络';
+				console.log('path='+this.path);
+			},
+			changeLottieDisplay() {
+				this.hidden = !this.hidden;
+				this.display = this.hidden ? '显示' : '隐藏';
+			},
+			lottieEnd() {
+				this.status = '播放';
+				this.action = 'stop';
+				console.log('动画播放结束');
+			}
 		}
 	}
 </script>
 
 <style>
-	.content {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.logo {
-		height: 200rpx;
-		width: 200rpx;
-		margin-top: 200rpx;
-		margin-left: auto;
-		margin-right: auto;
-		margin-bottom: 50rpx;
-	}
-
-	.text-area {
-		display: flex;
-		justify-content: center;
-	}
-
-	.title {
-		font-size: 36rpx;
-		color: #8f8f94;
+	.animation {
+		width: 750rpx;
+		height: 300rpx;
+		background-color: #CCCCCC;
+		margin-bottom: 20px;
 	}
 </style>

uni_modules/animation-view-h5/components/animation-view-h5/animation-view-h5.vue

+<template>
+	<view v-show="!hidden" ref="animation">
+	</view>
+</template>
+
+<script>
+	import lottie from './lottie.js'
+	export default {
+		name: 'animation-view',
+		props: {
+			/**
+			 * 动画资源地址，支持远程 URL 地址和本地绝对路径
+			 */
+			"path": {
+				type: String,
+				default: ""
+			},
+			/**
+			 * 动画是否自动播放
+			 */
+			"autoplay": {
+				type: Boolean,
+				default: false
+			},
+			/**
+			 * 动画是否循环播放
+			 */
+			"loop": {
+				type: Boolean,
+				default: false
+			},
+			/**
+			 * 是否隐藏动画
+			 */
+			"hidden": {
+				type: Boolean,
+				default: true
+			},
+			/**
+			 * 动画操作，可取值 play、pause、stop
+			 */
+			"action": {
+				type: String,
+				default: "play",
+				validator: (value) => {
+					return ['play', 'pause', 'stop'].includes(value)
+				}
+			}
+		},
+		watch: {
+			path(val) {
+				this.init()
+			},
+			action(val) {
+				switch (val) {
+					case "play":
+						this.play()
+						break
+					case "pause":
+						this.pause()
+						break
+					case "stop":
+						this.stop()
+						break
+					default:
+						break
+				}
+			}
+		},
+		data() {
+			return {
+				animation: null
+			}
+		},
+		mounted() {
+			this.init()
+		},
+		methods: {
+			init() {
+				if (this.animation) {
+					this.animation.destroy()
+				}
+				// 初始化
+				this.animation = lottie.loadAnimation({
+					path: this.path,
+					loop: this.loop,
+					autoplay: this.autoplay,
+					loop: this.loop,
+					container: this.$refs.animation.$el
+				})
+				// 动画结束
+				this.animation.onComplete = () => {
+					this.$emit('bindended')
+				}
+			},
+			play() {
+				this.animation?.play()
+			},
+			pause() {
+				this.animation?.pause()
+			},
+			stop() {
+				this.animation?.stop()
+			},
+		}
+	}
+</script>
\ No newline at end of file

uni_modules/animation-view-h5/package.json

+{
+	"id": "animation-view-h5",
+	"displayName": "animation-view",
+	"version": "1.0.0",
+	"description": "使用uts组件开发，实现animation-view组件",
+	"keywords": [
+		"animation-view",
+		"lottie"
+	],
+	"repository": "",
+	"engines": {
+		"HBuilderX": "^3.7.0"
+	},
+	"dcloudext": {
+		"type": "component-uts",
+		"sale": {
+			"regular": {
+				"price": "0.00"
+			},
+			"sourcecode": {
+				"price": "0.00"
+			}
+		},
+		"contact": {
+			"qq": ""
+		},
+		"declaration": {
+			"ads": "无",
+			"data": "插件不采集任何数据",
+			"permissions": "无"
+		},
+		"npmurl": ""
+	},
+	"uni_modules": {
+		"dependencies": [],
+		"encrypt": [],
+		"platforms": {
+			"cloud": {
+				"tcb": "y",
+				"aliyun": "y"
+			},
+			"client": {
+				"Vue": {
+					"vue2": "y",
+					"vue3": "y"
+				},
+				"App": {
+					"app-android": {
+						"minVersion": "21"
+					},
+					"app-ios": {
+						"minVersion": "11"
+					}
+				},
+				"H5-mobile": {
+					"Safari": "u",
+					"Android Browser": "u",
+					"微信浏览器(Android)": "u",
+					"QQ浏览器(Android)": "u"
+				},
+				"H5-pc": {
+					"Chrome": "u",
+					"IE": "u",
+					"Edge": "u",
+					"Firefox": "u",
+					"Safari": "u"
+				},
+				"小程序": {
+					"微信": "u",
+					"阿里": "u",
+					"百度": "u",
+					"字节跳动": "u",
+					"QQ": "u",
+					"钉钉": "u",
+					"快手": "u",
+					"飞书": "u",
+					"京东": "u"
+				},
+				"快应用": {
+					"华为": "u",
+					"联盟": "u"
+				}
+			}
+		}
+	}
+}

uni_modules/uni-animation-view/utssdk/web/index.vue

+<template>
+    <view>
+    </view>
+</template>
+<script >
+  
+    export default {
+        name: "uni-animation-view",
+        data() {
+            return {}
+        }
+    }
+</script>