提交 4ae3f505 编写于 作者: DCloud_iOS_XHY's avatar DCloud_iOS_XHY

修改 Lottie 组件名称为 uts-animation-view

上级 7d53d8d1
<template> <template>
<view class="defaultStyles"> <view class="defaultStyles">
</view> </view>
</template> </template>
<script lang="ts"> <script lang="ts">
import { import {
LottieAnimationView, LottieAnimationView,
LottieAnimation, LottieAnimation,
LottieLoopMode LottieLoopMode
} from 'Lottie' } from 'Lottie'
import { import {
URL, URL,
Bundle Bundle
} from 'Foundation' } from 'Foundation'
import { import {
UIView UIView
} from "UIKit" } from "UIKit"
import { UTSiOS } from "DCloudUTSFoundation" import {
UTSiOS
} from "DCloudUTSFoundation"
//原生提供以下属性或方法的实现
export default {
name: "animation-view", //原生提供以下属性或方法的实现
/** export default {
* 当播放到末尾时触发 ended 事件(自然播放结束会触发回调,循环播放结束及手动停止动画不会触发) name: "uts-animation-view",
*/ /**
emits: ['bindended'], * 当播放到末尾时触发 ended 事件(自然播放结束会触发回调,循环播放结束及手动停止动画不会触发)
props: { */
/** emits: ['bindended'],
* 动画资源地址,目前只支持绝对路径 props: {
*/ /**
"path": { * 动画资源地址,目前只支持绝对路径
type: String, */
default: "" "path": {
}, type: String,
/** default: ""
* 动画是否循环播放 },
*/ /**
"autoplay": { * 动画是否循环播放
type: Boolean, */
default: false "autoplay": {
}, type: Boolean,
/** default: false
* 动画是否自动播放 },
*/ /**
"loop": { * 动画是否自动播放
type: Boolean, */
default: false "loop": {
}, type: Boolean,
/** default: false
* 是否隐藏动画 },
*/ /**
"hidden": { * 是否隐藏动画
type: Boolean, */
default: false "hidden": {
}, type: Boolean,
/** default: false
* 动画操作,可取值 play、pause、stop },
*/ /**
"action": { * 动画操作,可取值 play、pause、stop
type: String, */
default: "stop" "action": {
} type: String,
default: "stop"
}, }
data() {
return { },
data() {
} return {
},
watch: { }
"path": { },
handler(newValue: string, oldValue: string) { watch: {
this.path = newValue "path": {
this.playAnimation() handler(newValue: string, oldValue: string) {
}, this.path = newValue
immediate: false //创建时是否通过此方法更新属性,默认值为false this.playAnimation()
}, },
"loop": { immediate: false //创建时是否通过此方法更新属性,默认值为false
handler(newValue: boolean, oldValue: boolean) { },
this.loop = newValue "loop": {
if (this.loop) { handler(newValue: boolean, oldValue: boolean) {
this.$el.loopMode = LottieLoopMode.loop this.loop = newValue
} else { if (this.loop) {
this.$el.loopMode = LottieLoopMode.playOnce this.$el.loopMode = LottieLoopMode.loop
} } else {
}, this.$el.loopMode = LottieLoopMode.playOnce
immediate: false //创建时是否通过此方法更新属性,默认值为false }
}, },
"autoplay": { immediate: false //创建时是否通过此方法更新属性,默认值为false
handler(newValue: boolean, oldValue: boolean) { },
this.autoplay = newValue "autoplay": {
if (this.autoplay) { handler(newValue: boolean, oldValue: boolean) {
this.playAnimation() this.autoplay = newValue
} if (this.autoplay) {
}, this.playAnimation()
immediate: false //创建时是否通过此方法更新属性,默认值为false }
}, },
"action": { immediate: false //创建时是否通过此方法更新属性,默认值为false
handler(newValue: string, oldValue: string) { },
const action = newValue "action": {
handler(newValue: string, oldValue: string) {
if (action == "play" || action == "pause" || action == "stop") { const action = newValue
this.action = action
switch (action) { if (action == "play" || action == "pause" || action == "stop") {
case "play": this.action = action
this.playAnimation() switch (action) {
break; case "play":
case "pause": this.playAnimation()
this.$el.pause() break;
break; case "pause":
case "stop": this.$el.pause()
this.$el.stop() break;
break; case "stop":
default: this.$el.stop()
break; break;
} default:
} else { break;
// 非法入参,不管 }
} } else {
}, // 非法入参,不管
immediate: false //创建时是否通过此方法更新属性,默认值为false }
}, },
immediate: false //创建时是否通过此方法更新属性,默认值为false
"hidden": { },
handler(newValue: boolean, oldValue: boolean) {
this.hidden = newValue "hidden": {
this.$el.isHidden = this.hidden handler(newValue: boolean, oldValue: boolean) {
}, this.hidden = newValue
immediate: false //创建时是否通过此方法更新属性,默认值为false this.$el.isHidden = this.hidden
}, },
immediate: false //创建时是否通过此方法更新属性,默认值为false
}, },
expose: ['setRepeatMode'],
methods: { },
// 需要对外暴露的方法 expose: ['setRepeatMode'],
// 设置 RepeatMode methods: {
setRepeatMode(repeatMode: string) { // 需要对外暴露的方法
if (repeatMode == "RESTART") { // 设置 RepeatMode
if (this.loop) { setRepeatMode(repeatMode: string) {
this.$el.loopMode = LottieLoopMode.loop if (repeatMode == "RESTART") {
} else { if (this.loop) {
this.$el.loopMode = LottieLoopMode.playOnce this.$el.loopMode = LottieLoopMode.loop
} } else {
} else if (repeatMode == "REVERSE") { this.$el.loopMode = LottieLoopMode.playOnce
if (this.loop) { }
this.$el.loopMode = LottieLoopMode.autoReverse } else if (repeatMode == "REVERSE") {
} else { if (this.loop) {
this.$el.loopMode = LottieLoopMode.repeatBackwards(1) this.$el.loopMode = LottieLoopMode.autoReverse
} } else {
} this.$el.loopMode = LottieLoopMode.repeatBackwards(1)
}, }
// 不对外暴露的方法 }
// 播放动画 },
playAnimation() { // 不对外暴露的方法
// 构建动画资源 url // 播放动画
var animationUrl: URL | null playAnimation() {
// 构建动画资源 url
if (this.path.hasPrefix("http")) { var animationUrl: URL | null
animationUrl = new URL(string = this.path)
} else { if (this.path.hasPrefix("http")) {
const filePath = UTSiOS.getResourcePath(this.path) animationUrl = new URL(string = this.path)
animationUrl = new URL(fileURLWithPath = filePath) } else {
} const filePath = UTSiOS.getResourcePath(this.path)
animationUrl = new URL(fileURLWithPath = filePath)
if (animationUrl != null) { }
// 加载动画 LottieAnimation
LottieAnimation.loadedFrom(url = animationUrl!, closure = (animation: LottieAnimation | null): if (animationUrl != null) {
void => { // 加载动画 LottieAnimation
if (animation != null) { LottieAnimation.loadedFrom(url = animationUrl!, closure = (animation: LottieAnimation | null):
// 加载成功开始播放 void => {
this.$el.animation = animation if (animation != null) {
this.$el.play(completion = (isFinish: boolean): void => { // 加载成功开始播放
if (isFinish) { this.$el.animation = animation
// 播放完成回调事件 this.$el.play(completion = (isFinish: boolean): void => {
this.fireEvent("bindended") if (isFinish) {
} // 播放完成回调事件
}) this.fireEvent("bindended")
} }
}) })
} else { }
console.log("url 构建失败,请检查 path 是否正确") })
} } else {
} console.log("url 构建失败,请检查 path 是否正确")
}, }
created() { //创建组件,替换created }
},
}, created() { //创建组件,替换created
measure(size: UTSSize): UTSSize { //测量组件大小
//可选实现,仅当需要原生计算组件大小时需要实现 },
return new UTSSize(100, 100); measure(size: UTSSize): UTSSize { //测量组件大小
}, //可选实现,仅当需要原生计算组件大小时需要实现
NVBeforeLoad() { //组件将要创建,对应前端beforeMount return new UTSSize(100, 100);
//可选实现,这里可以提前做一些操作 },
}, NVBeforeLoad() { //组件将要创建,对应前端beforeMount
NVLoad(): LottieAnimationView { //创建原生View,必须定义返回值类型(Android需要明确知道View类型,需特殊校验) //可选实现,这里可以提前做一些操作
// 初始化 Lottie$el },
const animationView = new LottieAnimationView() NVLoad(): LottieAnimationView { //创建原生View,必须定义返回值类型(Android需要明确知道View类型,需特殊校验)
// 默认只播放一次动画 // 初始化 Lottie$el
animationView.loopMode = LottieLoopMode.playOnce const animationView = new LottieAnimationView()
return animationView // 默认只播放一次动画
}, animationView.loopMode = LottieLoopMode.playOnce
NVLoaded() { //原生View已创建 return animationView
},
/// 更新 props 中定义的属性值 NVLoaded() { //原生View已创建
if (this.loop) { /// 更新 props 中定义的属性值
this.$el.loopMode = LottieLoopMode.loop
} if (this.loop) {
this.$el.loopMode = LottieLoopMode.loop
this.$el.isHidden = this.hidden }
if (this.autoplay) { this.$el.isHidden = this.hidden
this.playAnimation()
} if (this.autoplay) {
}, this.playAnimation()
}
NVLayouted() { //原生View布局完成 },
//可选实现,这里可以做布局后续操作
}, NVLayouted() { //原生View布局完成
//可选实现,这里可以做布局后续操作
NVBeforeUnload() { //原生View将释放 },
//可选实现,这里可以做释放View之前的操作
}, NVBeforeUnload() { //原生View将释放
NVUnloaded() { //原生View已释放 //可选实现,这里可以做释放View之前的操作
//可选实现,这里可以做释放View之后的操作 },
}, NVUnloaded() { //原生View已释放
unmounted() { //组件销毁 //可选实现,这里可以做释放View之后的操作
//可选实现 },
} unmounted() { //组件销毁
} //可选实现
</script> }
<style> }
//定义默认样式值, 组件使用者没有配置时使用 </script>
.defaultStyles { <style>
width: 750rpx; //定义默认样式值, 组件使用者没有配置时使用
height: 240rpx; .defaultStyles {
} width: 750rpx;
height: 240rpx;
}
</style> </style>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册