Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
Hello UTS
提交
4ae3f505
H
Hello UTS
项目概览
DCloud
/
Hello UTS
通知
1595
Star
27
Fork
9
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
2
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
H
Hello UTS
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
2
Issue
2
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
4ae3f505
编写于
12月 29, 2022
作者:
DCloud_iOS_XHY
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
修改 Lottie 组件名称为 uts-animation-view
上级
7d53d8d1
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
241 addition
and
239 deletion
+241
-239
uni_modules/uts-animation-view/utssdk/app-ios/index.vue
uni_modules/uts-animation-view/utssdk/app-ios/index.vue
+241
-239
未找到文件。
uni_modules/uts-animation-view/utssdk/app-ios/index.vue
浏览文件 @
4ae3f505
<
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
:
750
rpx
;
//
定义默认样式值
,
组件使用者没有配置时使用
height
:
240
rpx
;
.defaultStyles
{
}
width
:
750
rpx
;
height
:
240
rpx
;
}
</
style
>
</
style
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录