提交 uts-lottie示例

pages.json

@@ -61,6 +61,15 @@
 		        "enablePullDownRefresh": false
 		    }
 		    
+		},
+		{
+		    "path" : "pages/SDKIntegration/Lottie/index",
+		    "style" :                                                                                    
+		    {
+		        "navigationBarTitleText": "",
+		        "enablePullDownRefresh": false
+		    }
+		    
 		},
 		{
 		    "path" : "pages/SDKIntegration/Toast/Toast",

pages/SDKIntegration/Lottie/index.nvue

+<template>
+    <div>
+        <button @tap="changeHiden">测试隐藏组件</button>
+        <button @tap="updateStyle" :style="{width:widthNum+'px',height:heightNum+'px',background:yanse}">测试更新样式</button>
+        <button @tap="changeUrl">测试更新动画链接</button>
+        <button @tap="changeAutoPlay">测试AutoPlay</button>
+        <button @tap="changeLoop">测试Loop</button>
+        <button @tap="changeAction(1)">测试action play</button>
+        <button @tap="changeAction(2)">测试action pause</button>
+        <button @tap="changeAction(3)">测试action stop</button>
+        <animation-view ref="animView" :path="animUrl" :autoplay="autoplay" :loop="loop" :action="action"
+            :hidden="hidden" @bindended="testAnimEnd" @click="lottieClickTest" @longpress="lottieLongpressTest"
+            :style="{width:widthNum+'px',height:heightNum+'px',background:yanse}">
+        </animation-view>
+        
+    </div>
+</template>
+
+<script>
+  
+    export default {
+        data() {
+            return {
+                hidden: false,
+                autoplay: false,
+                action: "play",
+                loop: false,
+                yanse: "red",
+                widthNum: 200,
+                heightNum: 100,
+                comShow: true,
+                animUrl: "AndroidWave.json"
+            }
+        },
+        
+        methods: {
+
+            updateStyle: function() {
+                this.heightNum = 200
+                this.widthNum = 300
+                this.yanse = "green"
+            },
+            changeHiden: function() {
+                this.hidden = !this.hidden
+            },
+            changeAutoPlay: function() {
+                this.autoplay = !this.autoplay
+            },
+            changeUrl: function() {
+                if (this.animUrl == "zy_lottie_live.json") {
+                    this.animUrl = "AndroidWave.json"
+                } else {
+                    this.animUrl = "zy_lottie_live.json"
+                }
+            },
+
+            changeAction: function(type) {
+                if (type == 1) {
+                    this.action = "play"
+                } else if (type == 2) {
+                    this.action = "pause"
+                } else if (type == 3) {
+                    this.action = "stop"
+                }
+            },
+            changeLoop: function() {
+                this.loop = !this.loop
+            },
+            testAnimEnd: function(res) {
+                console.log("testAnimEnd");
+                console.log(res);
+            },
+
+            changeRepeat: function(res) {
+                let repeatConfig = {
+                    count: 3,
+                    mode: "restart"
+                }
+                console.log(this.$refs["animView"]);
+                this.$refs["animView"].updateRepeatConfig(repeatConfig, function(res) {
+                    console.log(res);
+                });
+
+            },
+            lottieClickTest: function(res) {
+                console.log("lottieClickTest");
+                console.log(res);
+            },
+            lottieLongpressTest: function(res) {
+                console.log("lottieClickTest");
+                console.log(res);
+            },
+        }
+    }
+</script>

pages/SDKIntegration/SDKIntegration.vue

@@ -4,6 +4,7 @@
 		<uni-list>
 			<uni-list-item @tap="gotoTencentLocation" title="腾讯定位sdk集成示例" class="itemButton" :clickable="true" link/>
 			<uni-list-item @tap="gotoToast" title="Toast示例" class="itemButton" :clickable="true" link/>
+			<uni-list-item @tap="gotoLottie" title="Lottie动画示例" class="itemButton" :clickable="true" link/>
 		</uni-list>
 	</view>
 </template>
@@ -14,6 +15,10 @@
 	 	checkHasIntegration
 	 } from "@/uni_modules/uts-tencentgeolocation";
 	 
+	 import {
+	 	checkHasLottieIntegration
+	 } from "@/uni_modules/uts-animation-view";
+	 
 	export default {
 		data() {
 			return {
@@ -27,6 +32,11 @@
 					url:'/pages/SDKIntegration/Toast/Toast'
 				})
 			},
+			gotoLottie:function(e){
+				uni.navigateTo({
+					url:'/pages/SDKIntegration/Lottie/index'
+				})
+			},
 			gotoTencentLocation:function(e){
 				
 				let ret = checkHasIntegration();

uni_modules/uts-animation-view/package.json

+{
+  "id": "animation-view",
+  "displayName": "animation-view",
+  "version": "1.0.0",
+  "description": "animation-view",
+  "keywords": [
+    "animation-view"
+],
+  "repository": "",
+  "engines": {
+    "HBuilderX": "^3.6.8"
+  },
+  "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": "u",
+        "aliyun": "u"
+      },
+      "client": {
+        "Vue": {
+          "vue2": "u",
+          "vue3": "u"
+        },
+        "App": {
+          "app-android": "u",
+          "app-ios": "u"
+        },
+        "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"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file

uni_modules/uts-animation-view/readme.md

+# animation-view
+### 开发文档
+[UTS 语法](https://uniapp.dcloud.net.cn/tutorial/syntax-uts.html)
+[UTS 原生插件](https://uniapp.dcloud.net.cn/plugin/uts-plugin.html)
+[Hello UTS](https://gitcode.net/dcloud/hello-uts/-/tree/dev)
\ No newline at end of file

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

+{
+	"dependencies": [
+		"com.airbnb.android:lottie:3.4.0"
+	],
+	"components":[
+		{
+			"name":"animation-view",
+			"class":"uts.modules.modules.testComponent.AnimationView"
+		}
+	]
+}
+

uni_modules/uts-animation-view/utssdk/app-android/index.uts

+import {
+    UTSAndroid
+} from "io.dcloud.uts";
+
+
+/**
+ * 判断当前的基座是否已经集成了sdk, 即是否是自定义基座
+ */
+export function checkHasLottieIntegration():boolean{
+	
+	let hasIntegration =  true
+	try{
+		let xClass = Class.forName("com.airbnb.lottie.LottieDrawable")
+		console.log(xClass);
+	}catch(e:Exception){
+		hasIntegration = false;
+	}
+	
+	if(!hasIntegration){
+		return false;
+	}
+	
+	return true
+}

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

+<template>
+    <view class="defaultStyles">
+
+    </view>
+</template>
+<script lang="ts">
+    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'
+
+
+    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) {
+
+                    let lottieAnimationView = this.$el
+
+                    if (lottieAnimationView != null && !TextUtils.isEmpty(newPath)) {
+                        if (newPath.startsWith("http://") || newPath.startsWith("https://")) {
+                            lottieAnimationView.setAnimationFromUrl(newPath)
+                        } else {
+                            // 默认是asset了
+                            lottieAnimationView.setAnimation(newPath)
+                        }
+                    }
+                    if (this.autoplay) {
+                        lottieAnimationView.playAnimation()
+                    }
+                },
+                immediate: false //创建时是否通过此方法更新属性，默认值为false  
+            },
+            "loop": {
+                handler(newLoop: Boolean) {
+
+                    if (newLoop) {
+                        this.$el.repeatCount = Int.MAX_VALUE
+                    } else {
+                        // 不循环则设置成1次
+                        this.$el.repeatCount = 0
+                    }
+
+                    if (this.autoplay) {
+                        this.$el.playAnimation()
+                    }
+                },
+                immediate: false //创建时是否通过此方法更新属性，默认值为false  
+            },
+
+            "autoplay": {
+                handler(newValue: boolean) {
+
+                    if (newValue) {
+                        this.$el.playAnimation()
+                    }
+                },
+                immediate: false //创建时是否通过此方法更新属性，默认值为false  
+            },
+
+            "action": {
+                handler(newAction: string) {
+
+                    if (newAction == "play" || newAction == "pause" || newAction == "stop") {
+
+
+                        if (this.action == "play") {
+                            this.$el.playAnimation()
+                        } else if (this.action == "play") {
+                            this.$el.pauseAnimation()
+                        } else if (this.action == "stop") {
+                            this.$el.cancelAnimation()
+                            this.$el.clearAnimation()
+                        }
+
+                    } else {
+                        // 非法入参，不管
+                    }
+                },
+                immediate: false //创建时是否通过此方法更新属性，默认值为false  
+            },
+
+            "hidden": {
+                handler(newValue: boolean) {
+                console.log('hidden',newValue)
+                    if (newValue) {
+                        this.$el.visibility = View.GONE
+                    } else {
+                        this.$el.visibility = View.VISIBLE
+                    }
+                },
+                immediate: false //创建时是否通过此方法更新属性，默认值为false  
+            },
+
+        },
+        methods: {
+            setRepeatMode(repeat: string) {
+                if ("RESTART" == repeat) {
+                    this.$el.repeatMode = LottieDrawable.RESTART
+                } else if ("REVERSE" == repeat) {
+                    this.$el.repeatMode = LottieDrawable.RESTART
+                }
+            },
+            privateMethod() { //如何定义不对外暴露的API？ 暂不支持，需在export外写  
+            }
+        },
+        created() { //创建组件，替换created  
+
+        },
+        NVBeforeLoad() { //组件将要创建，对应前端beforeMount  
+            //可选实现，这里可以提前做一些操作  
+        },
+        NVLoad(): LottieAnimationView { //创建原生View，必须定义返回值类型（Android需要明确知道View类型，需特殊校验）  
+            //必须实现  
+            let lottieAnimationView = new LottieAnimationView(getContext())
+            return lottieAnimationView
+        },
+        NVLoaded() { //原生View已创建  
+            //可选实现，这里可以做后续操作  
+            this.$el.repeatMode = LottieDrawable.RESTART;
+            this.$el.visibility = View.GONE
+            this.$el.repeatCount = 0
+            this.$el.addAnimatorListener(new CustomAnimListener(this))
+
+        },
+        NVLayouted() { //原生View布局完成  
+            //可选实现，这里可以做布局后续操作  
+        },
+        NVBeforeUnload() { //原生View将释放  
+            //可选实现，这里可以做释放View之前的操作  
+        },
+        NVUnloaded() { //原生View已释放  
+            //可选实现，这里可以做释放View之后的操作  
+        },
+        unmounted() { //组件销毁  
+            //可选实现  
+        }
+    }
+</script>
+<style>
+    /* 定义默认样式值, 组件使用者没有配置时使用 */
+    .defaultStyles {
+        width: 750rpx;
+        height: 240rpx;
+    }
+</style>