Skip to main content
版本：v2

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_status是number
anim_complete_call动画完成回调，动画执行成功后会回调此函数 repeat_count 为 0 时无效 参数 anim 创建动画的实例否function
display_on_restart表盘 resume 触发时是否需要重新播放动画否boolean
anim_auto_resume_call当 diaplay_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)
      }
    })
  }
})