Skip to main content
版本:v3

IMG_ANIM

img_anim_sample

按照设置的帧率播放预先给定的图片,形成动画效果。

创建 UI 控件

const imgAnim = hmUI.createWidget(hmUI.widget.IMG_ANIM, Param)

类型

Param: object

属性说明是否必须类型
x动画 x 坐标number
y动画 y 坐标number
anim_path图片帧所在路径,通常为目录名称string
anim_prefix图片名前缀string
anim_ext图片扩展名string
anim_fps动画帧数number
repeat_count动画重复次数,可设置 0:无限重复、1: 单次重复number
anim_size图片数量number
anim_status动画状态,参考 hmUI.anim_statusnumber
anim_complete_call动画完成回调,动画执行成功后会回调此函数 repeat_count0 时无效 参数 anim 创建动画的实例function
display_on_restart表盘 resume 触发时是否需要重新播放动画boolean
anim_auto_resume_calldiaplay_on_restart 设置为 true 时生效,在自动播放动画之前会先调用此回调函数,之后再重新播放动画boolean
step帧动画步长,大于 1 时会跳帧number
default_frame_index省电模式下,显示的序列帧索引number

支持设置的属性 hmUI.anim_status

设置动画属性请注意当前设置的动画顺序,widget 内部已经做了保护处理

说明
hmUI.anim_status.START开始动画 开始动画后只允许调用 pause stop
hmUI.anim_status.PAUSE暂停动画 只能在开始动画 恢复动画后调用
hmUI.anim_status.RESUME恢复动画 只能在暂停动画后调用
hmUI.anim_status.STOP停止动画 只能在开始动画 恢复动画后调用

获取动画状态 返回类型 boolean

说明
hmUI.prop.ANIM_IS_RUNINNG动画是否在运行
hmUI.prop.ANIM_IS_PAUSE动画是否暂停
hmUI.prop.ANIM_IS_STOP动画是否停止

代码示例

提示

代码示例中的图片资源请参考 设计资源

// 资源存放目录
.
└── assets
└── gtr-3
└── anim
├── animation_0.png
├── animation_1.png
├── animation_2.png
├── animation_3.png
├── animation_4.png
└── animation_5.png
Page({
build() {
const imgAnimation = hmUI.createWidget(hmUI.widget.IMG_ANIM, {
anim_path: 'anim',
anim_prefix: 'animation',
anim_ext: 'png',
anim_fps: 60,
anim_size: 36,
repeat_count: 1,
anim_status: 3,
x: 208,
y: 230,
anim_complete_call: () => {
console.log('animation complete')
}
})

imgAnimation.setProperty(hmUI.prop.ANIM_STATUS, hmUI.anim_status.START)
imgAnimation.addEventListener(hmUI.event.CLICK_DOWN, () => {
const isRunning = imgAnimation.getProperty(hmUI.prop.ANIM_IS_RUNINNG)

if (!isRunning) {
imgAnimation.setProperty(hmUI.prop.ANIM_STATUS, hmUI.anim_status.START)
}
})
}
})