add component animation-view

pages/index/index.nvue

+<template>
+	<div>
+		<animation-view class="animation" :path="path" :loop="loop" :autoplay="autoplay" :action="action"
+			:hidden="hidden" @bindended="lottieEnd">
+		</animation-view>
+		<button @click="playLottie" type="primary">{{status}}lottie动画</button>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				path: 'https://b.bdstatic.com/miniapp/images/lottie_example_one.json',
+				loop: false,
+				autoplay: false,
+				action: 'play',
+				hidden: false,
+				status: '暂停'
+			}
+		},
+		methods: {
+			playLottie() {
+				this.action = ('play' !== this.action) ? 'play' : 'pause';
+				this.status = ('pause' === this.action) ? '播放' : '暂停';
+			},
+			lottieEnd() {
+				this.status = '播放';
+				this.action = 'stop';
+				console.log('动画播放结束');
+			}
+		}
+	}
+</script>
+
+<style>
+	.animation {
+		width: 750rpx;
+		height: 300rpx;
+		background-color: #FF0000;
+		margin-bottom: 20px;
+	}
+</style>

uni_modules/uni-animation-view/changelog.md

+## 1.0.0（2023-01-14）
+实现android/ios平台animation-view组件，仅支持nvue页面

uni_modules/uni-animation-view/package.json

+{
+	"id": "uni-animation-view",
+	"displayName": "animation-view",
+	"version": "1.0.0",
+	"description": "使用uts组件开发，实现animation-view组件",
+	"keywords": [
+		"animation-view",
+		"lottie"
+	],
+	"repository": "",
+	"engines": {
+		"HBuilderX": "^3.7.0"
+	},
+	"dcloudext": {
+		"type": "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/readme.md

+# animation-view
+
+> animation-view组件是[uts插件](https://uniapp.dcloud.net.cn/plugin/uts-component.html)，需 HBuilderX 3.7.0+  
+
+> 使用文档：[https://uniapp.dcloud.net.cn/component/animation-view.html](https://uniapp.dcloud.net.cn/component/animation-view.html)
+
+
+### 属性说明  
+
+|属性名|类型|默认值|说明|
+|:-|:-|:-|:-|
+| path			| String		|		| 动画资源地址，支持本地路径和网络路径	|
+| loop			| Boolean		| false	| 动画是否循环播放 					|
+| autoplay		| Boolean		| true	| 动画是否自动播放					|
+| action		| String		| play	| 动画操作，可取值 play、pause、stop	|
+| hidden		| Boolean		| true	| 是否隐藏动画						|
+| @bindended	| EventHandle	|		| 当播放到末尾时触发 ended 事件（自然播放结束会触发回调，循环播放结束及手动停止动画不会触发）	|
+
+
+**注意**
+* animation-view 仅App端nvue页面支持  
+* App端实现使用了Lottie三方SDK，参考开源项目：[Lottie for Android](https://github.com/airbnb/lottie-android)，[Lottie for iOS](https://github.com/airbnb/lottie-ios)  
+* App-Android平台要求Android5（API Leavel 21）及以上系统  
+* App-iOS平台要求iOS11及以上版本系统  
+
+
+### 代码示例
+
+```html
+<template>
+	<div>
+		<animation-view class="animation" :path="path" :loop="loop" :autoplay="autoplay" :action="action"
+			:hidden="hidden" @bindended="lottieEnd">
+		</animation-view>
+		<button @click="playLottie" type="primary">{{status}}lottie动画</button>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				path: 'https://b.bdstatic.com/miniapp/images/lottie_example_one.json',
+				loop: false,
+				autoplay: false,
+				action: 'play',
+				hidden: false,
+				status: '暂停'
+			}
+		},
+		methods: {
+			playLottie() {
+				this.action = ('play' !== this.action) ? 'play' : 'pause';
+				this.status = ('pause' === this.action) ? '播放' : '暂停';
+			},
+			lottieEnd() {
+				this.status = '播放';
+				this.action = 'stop';
+				console.log('动画播放结束');
+			}
+		}
+	}
+</script>
+
+<style>
+	.animation {
+		width: 750rpx;
+		height: 300rpx;
+		background-color: #FF0000;
+		margin-bottom: 20px;
+	}
+</style>
+```
+
+
+
+
+
+

uni_modules/uni-animation-view/utssdk/app-android/config.json

+{
+	"minSdkVersion": "21",
+	"dependencies": [
+		"com.airbnb.android:lottie:3.4.0"
+	]
+}

uni_modules/uni-animation-view/utssdk/app-android/index.vue

+<template>
+    <view class="defaultStyles">
+
+    </view>
+</template>
+<script lang="uts">
+    import Animator from 'android.animation.Animator'
+    import TextUtils from 'android.text.TextUtils'
+    import View from 'android.view.View'
+    import LottieAnimationView from 'com.airbnb.lottie.LottieAnimationView'
+    import LottieDrawable from 'com.airbnb.lottie.LottieDrawable'
+	import FileInputStream from 'java.io.FileInputStream'
+	import { UTSAndroid } from "io.dcloud.uts";
+
+    class CustomAnimListener extends Animator.AnimatorListener {
+
+        comp: UTSComponent < LottieAnimationView >
+            constructor(com: UTSComponent < LottieAnimationView > ) {
+                super();
+                this.comp = com
+            }
+
+        override onAnimationStart(animation: Animator | null) {}
+
+        override onAnimationEnd(animation: Animator | null, isReverse: Boolean) {
+            this.comp.$emit("bindended")
+        }
+
+        override onAnimationEnd(animation: Animator | null) {}
+
+        override onAnimationCancel(animation: Animator | null) {}
+
+        override onAnimationRepeat(animation: Animator | null) {}
+    }
+
+    //原生提供以下属性或方法的实现  
+    export default {
+        name: "animation-view",
+        /**
+         * 当播放到末尾时触发 ended 事件（自然播放结束会触发回调，循环播放结束及手动停止动画不会触发）
+         */
+        emits: ['bindended'],
+        props: {
+            /**
+             * 动画资源地址，目前只支持绝对路径
+             */
+            "path": {
+                type: String,
+                default: ""
+            },
+            /**
+             * 动画是否循环播放
+             */
+            "autoplay": {
+                type: Boolean,
+                default: false
+            },
+            /**
+             * 动画是否自动播放
+             */
+            "loop": {
+                type: Boolean,
+                default: false
+            },
+            /**
+             * 是否隐藏动画
+             */
+            "hidden": {
+                type: Boolean,
+                default: false
+            },
+            /**
+             * 动画操作，可取值 play、pause、stop
+             */
+            "action": {
+                type: String,
+                default: "stop"
+            }
+
+        },
+        data() {
+            return {
+
+            }
+        },
+        watch: {
+            "path": {
+                handler(newPath: string) {
+
+					if(this.$el != null){
+						let lottieAnimationView = this.$el!
+						if (!TextUtils.isEmpty(newPath)) {
+							
+						    if (newPath.startsWith("http://") || newPath.startsWith("https://")) {
+						        lottieAnimationView.setAnimationFromUrl(newPath)
+						    } else {
+						        // 默认是static了
+								var realJsonPath = UTSAndroid.getResourcePath(newPath)
+						        lottieAnimationView.setAnimation(new FileInputStream(realJsonPath),newPath)
+						    }
+						}
+						if (this.autoplay) {
+						    lottieAnimationView.playAnimation()
+						}
+					}
+                },
+                immediate: false
+            },
+            "loop": {
+                handler(newLoop: Boolean) {
+					if(this.$el != null){
+						if (newLoop) {
+						    this.$el!.repeatCount = Int.MAX_VALUE
+						} else {
+						    // 不循环则设置成1次
+						    this.$el!.repeatCount = 0
+						}
+						
+						if (this.autoplay) {
+						    this.$el!.playAnimation()
+						}
+					}
+                    
+                },
+                immediate: false
+            },
+
+            "autoplay": {
+                handler(newValue: boolean) {
+					if(this.$el != null){
+						if (newValue) {
+						    this.$el!.playAnimation()
+						}
+					}
+                    
+                },
+                immediate: false
+            },
+
+            "action": {
+                handler(newAction: string) {
+
+                    if (newAction == "play" || newAction == "pause" || newAction == "stop") {
+
+						if(this.$el != null){
+							if (this.action == "play") {
+							    this.$el!.playAnimation()
+							} else if (this.action == "pause") {
+							    this.$el!.pauseAnimation()
+							} else if (this.action == "stop") {
+							    this.$el!.cancelAnimation()
+							    this.$el!.clearAnimation()
+							}
+						}
+
+                    } else {
+                        // 非法入参，不管
+                    }
+                },
+                immediate: false
+            },
+
+            "hidden": {
+                handler(newValue: boolean) {
+					if(this.$el != null){
+						if (newValue) {
+						    this.$el!.visibility = View.GONE
+						} else {
+						    this.$el!.visibility = View.VISIBLE
+						}
+					}
+                },
+                immediate: false
+            },
+
+        },
+        methods: {
+            setRepeatMode(repeat: string) {
+				if(this.$el != null){
+					if ("RESTART" == repeat) {
+					    this.$el!.repeatMode = LottieDrawable.RESTART
+					} else if ("REVERSE" == repeat) {
+					    this.$el!.repeatMode = LottieDrawable.RESTART
+					}
+				}
+            },
+        },
+        
+        NVLoad(): LottieAnimationView { 
+            let lottieAnimationView = new LottieAnimationView($androidContext)
+            return lottieAnimationView
+        },
+		
+        NVLoaded() { 
+			if(this.$el != null){
+				this.$el!.repeatMode = LottieDrawable.RESTART;
+				this.$el!.visibility = View.GONE
+				this.$el!.repeatCount = 0
+				this.$el!.addAnimatorListener(new CustomAnimListener(this))
+			}
+        }
+        
+    }
+</script>
+<style>
+    /* 定义默认样式值, 组件使用者没有配置时使用 */
+    .defaultStyles {
+        width: 750rpx;
+        height: 240rpx;
+    }
+</style>

uni_modules/uni-animation-view/utssdk/app-ios/Frameworks/Lottie.framework/Modules/module.modulemap

+framework module Lottie {
+  header "Lottie-Swift.h"
+  requires objc
+}

uni_modules/uni-animation-view/utssdk/app-ios/config.json

+{
+	"deploymentTarget": "11.0",
+	"validArchitectures": [
+		"arm64",
+		"x86_64"
+	]
+}