Skip to content

H
Hello UTS

DCloud / Hello UTS

通知 1598
Star 27
Fork 9
H
Hello UTS
提交 a0c7a3a0 编写于 作者: 打打卡夫卡's avatar 打打卡夫卡
浏览文件
操作

修改 lottie 插件名称

上级 01365df5
隐藏空白更改
内联 并排
Showing with 244 addition and 244 deletion
uni_modules/uts-animation-view/utssdk/app-ios/config.json → uni_modules/animation-view/utssdk/app-ios/config.json
浏览文件 @ a0c7a3a0
{
"deploymentTarget": "11.0",
"validArchitectures": [
"arm64",
"x86_64"
]
{
"deploymentTarget": "11.0",
"validArchitectures": [
"arm64",
"x86_64"
]
}
uni_modules/uts-animation-view/utssdk/app-ios/index.vue → uni_modules/animation-view/utssdk/app-ios/index.vue
浏览文件 @ a0c7a3a0
<template>
<view class="defaultStyles">
</view>
</template>
<script lang="ts">
import {
LottieAnimationView,
LottieAnimation,
LottieLoopMode
} from 'Lottie'
import {
URL,
Bundle
} from 'Foundation'
import {
UIView
<template>
<view class="defaultStyles">
</view>
</template>
<script lang="ts">
import {
LottieAnimationView,
LottieAnimation,
LottieLoopMode
} from 'Lottie'
import {
URL,
Bundle
} from 'Foundation'
import {
UIView
} from "UIKit"
import { UTSiOS } from "DCloudUTSFoundation"
//原生提供以下属性或方法的实现
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(newValue: string, oldValue: string) {
this.path = newValue
this.playAnimation()
},
immediate: false //创建时是否通过此方法更新属性，默认值为false
},
"loop": {
handler(newValue: boolean, oldValue: boolean) {
this.loop = newValue
if (this.loop) {
this.$el.loopMode = LottieLoopMode.loop
} else {
this.$el.loopMode = LottieLoopMode.playOnce
}
},
immediate: false //创建时是否通过此方法更新属性，默认值为false
},
"autoplay": {
handler(newValue: boolean, oldValue: boolean) {
this.autoplay = newValue
if (this.autoplay) {
this.playAnimation()
}
},
immediate: false //创建时是否通过此方法更新属性，默认值为false
},
"action": {
handler(newValue: string, oldValue: string) {
const action = newValue
if (action == "play" || action == "pause" || action == "stop") {
this.action = action
switch (action) {
case "play":
this.playAnimation()
break;
case "pause":
this.$el.pause()
break;
case "stop":
this.$el.stop()
break;
default:
break;
}
} else {
// 非法入参，不管
}
},
immediate: false //创建时是否通过此方法更新属性，默认值为false
},
"hidden": {
handler(newValue: boolean, oldValue: boolean) {
this.hidden = newValue
this.$el.isHidden = this.hidden
},
immediate: false //创建时是否通过此方法更新属性，默认值为false
},
},
expose: ['setRepeatMode'],
methods: {
// 需要对外暴露的方法
// 设置 RepeatMode
setRepeatMode(repeatMode: string) {
if (repeatMode == "RESTART") {
if (this.loop) {
this.$el.loopMode = LottieLoopMode.loop
} else {
this.$el.loopMode = LottieLoopMode.playOnce
}
} else if (repeatMode == "REVERSE") {
if (this.loop) {
this.$el.loopMode = LottieLoopMode.autoReverse
} else {
this.$el.loopMode = LottieLoopMode.repeatBackwards(1)
}
}
},
// 不对外暴露的方法
// 播放动画
playAnimation() {
// 构建动画资源 url
var animationUrl: URL | null
if (this.path.hasPrefix("http")) {
animationUrl = new URL(string = this.path)
} else {
const filePath = UTSiOS.getResourcePath(this.path)
animationUrl = new URL(fileURLWithPath = filePath)
}
if (animationUrl != null) {
// 加载动画 LottieAnimation
LottieAnimation.loadedFrom(url = animationUrl!, closure = (animation: LottieAnimation | null):
void => {
if (animation != null) {
// 加载成功开始播放
this.$el.animation = animation
this.$el.play(completion = (isFinish: boolean): void => {
if (isFinish) {
// 播放完成回调事件
this.fireEvent("bindended")
}
})
}
})
} else {
console.log("url 构建失败，请检查 path 是否正确")
}
}
},
created() { //创建组件，替换created
},
measure(size: UTSSize): UTSSize { //测量组件大小
//可选实现，仅当需要原生计算组件大小时需要实现
return new UTSSize(100, 100);
},
NVBeforeLoad() { //组件将要创建，对应前端beforeMount
//可选实现，这里可以提前做一些操作
},
NVLoad(): LottieAnimationView { //创建原生View，必须定义返回值类型（Android需要明确知道View类型，需特殊校验）
// 初始化 Lottie$el
const animationView = new LottieAnimationView()
// 默认只播放一次动画
animationView.loopMode = LottieLoopMode.playOnce
return animationView
},
NVLoaded() { //原生View已创建
/// 更新 props 中定义的属性值
if (this.loop) {
this.$el.loopMode = LottieLoopMode.loop
}
this.$el.isHidden = this.hidden
if (this.autoplay) {
this.playAnimation()
}
},
NVLayouted() { //原生View布局完成
//可选实现，这里可以做布局后续操作
},
NVBeforeUnload() { //原生View将释放
//可选实现，这里可以做释放View之前的操作
},
NVUnloaded() { //原生View已释放
//可选实现，这里可以做释放View之后的操作
},
unmounted() { //组件销毁
//可选实现
}
}
</script>
<style>
//定义默认样式值, 组件使用者没有配置时使用
.defaultStyles {
width: 750rpx;
height: 240rpx;
}
import { UTSiOS } from "DCloudUTSFoundation"
//原生提供以下属性或方法的实现
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(newValue: string, oldValue: string) {
this.path = newValue
this.playAnimation()
},
immediate: false //创建时是否通过此方法更新属性，默认值为false
},
"loop": {
handler(newValue: boolean, oldValue: boolean) {
this.loop = newValue
if (this.loop) {
this.$el.loopMode = LottieLoopMode.loop
} else {
this.$el.loopMode = LottieLoopMode.playOnce
}
},
immediate: false //创建时是否通过此方法更新属性，默认值为false
},
"autoplay": {
handler(newValue: boolean, oldValue: boolean) {
this.autoplay = newValue
if (this.autoplay) {
this.playAnimation()
}
},
immediate: false //创建时是否通过此方法更新属性，默认值为false
},
"action": {
handler(newValue: string, oldValue: string) {
const action = newValue
if (action == "play" || action == "pause" || action == "stop") {
this.action = action
switch (action) {
case "play":
this.playAnimation()
break;
case "pause":
this.$el.pause()
break;
case "stop":
this.$el.stop()
break;
default:
break;
}
} else {
// 非法入参，不管
}
},
immediate: false //创建时是否通过此方法更新属性，默认值为false
},
"hidden": {
handler(newValue: boolean, oldValue: boolean) {
this.hidden = newValue
this.$el.isHidden = this.hidden
},
immediate: false //创建时是否通过此方法更新属性，默认值为false
},
},
expose: ['setRepeatMode'],
methods: {
// 需要对外暴露的方法
// 设置 RepeatMode
setRepeatMode(repeatMode: string) {
if (repeatMode == "RESTART") {
if (this.loop) {
this.$el.loopMode = LottieLoopMode.loop
} else {
this.$el.loopMode = LottieLoopMode.playOnce
}
} else if (repeatMode == "REVERSE") {
if (this.loop) {
this.$el.loopMode = LottieLoopMode.autoReverse
} else {
this.$el.loopMode = LottieLoopMode.repeatBackwards(1)
}
}
},
// 不对外暴露的方法
// 播放动画
playAnimation() {
// 构建动画资源 url
var animationUrl: URL | null
if (this.path.hasPrefix("http")) {
animationUrl = new URL(string = this.path)
} else {
const filePath = UTSiOS.getResourcePath(this.path)
animationUrl = new URL(fileURLWithPath = filePath)
}
if (animationUrl != null) {
// 加载动画 LottieAnimation
LottieAnimation.loadedFrom(url = animationUrl!, closure = (animation: LottieAnimation | null):
void => {
if (animation != null) {
// 加载成功开始播放
this.$el.animation = animation
this.$el.play(completion = (isFinish: boolean): void => {
if (isFinish) {
// 播放完成回调事件
this.fireEvent("bindended")
}
})
}
})
} else {
console.log("url 构建失败，请检查 path 是否正确")
}
}
},
created() { //创建组件，替换created
},
measure(size: UTSSize): UTSSize { //测量组件大小
//可选实现，仅当需要原生计算组件大小时需要实现
return new UTSSize(100, 100);
},
NVBeforeLoad() { //组件将要创建，对应前端beforeMount
//可选实现，这里可以提前做一些操作
},
NVLoad(): LottieAnimationView { //创建原生View，必须定义返回值类型（Android需要明确知道View类型，需特殊校验）
// 初始化 Lottie$el
const animationView = new LottieAnimationView()
// 默认只播放一次动画
animationView.loopMode = LottieLoopMode.playOnce
return animationView
},
NVLoaded() { //原生View已创建
/// 更新 props 中定义的属性值
if (this.loop) {
this.$el.loopMode = LottieLoopMode.loop
}
this.$el.isHidden = this.hidden
if (this.autoplay) {
this.playAnimation()
}
},
NVLayouted() { //原生View布局完成
//可选实现，这里可以做布局后续操作
},
NVBeforeUnload() { //原生View将释放
//可选实现，这里可以做释放View之前的操作
},
NVUnloaded() { //原生View已释放
//可选实现，这里可以做释放View之后的操作
},
unmounted() { //组件销毁
//可选实现
}
}
</script>
<style>
//定义默认样式值, 组件使用者没有配置时使用
.defaultStyles {
width: 750rpx;
height: 240rpx;
}
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或