IMG_ANIM

Play the pre-given image at the set frame rate to create an animation effect.

Create UI widget

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

Type

Param: object

Properties	Description	Required	Type
x	The x-coordinate of animation.	YES	number
y	The y-coordinate of animation.	YES	number
anim_path	The path to the image for animation.	YES	string
anim_prefix	The name to the image for animation.	YES	string
anim_ext	Image extensions.	YES	string
anim_fps	Number of frames of animation.	YES	number
repeat_count	Number of animation repetitions, can be set 0: infinite repetition, 1: single repetition.	YES	number
anim_repeat	Whether to repeat the playback; this value is true if repeat_count is 0.	NO	boolean
anim_size	The number of images.	YES	number
anim_status	The status of animation; Reference hmUI.anim_status	YES	number
anim_complete_call	This function is callback when the animation is executed successfully. repeat_count is invalid if 0. Parameters anim is an instance to create the animation.	NO	function
display_on_restart	Whether to restart the animation when the dial resume triggers	NO	boolean
anim_auto_resume_call	When diaplay_on_restart is set to true, this callback function will be called before the animation is played automatically and then replayed	NO	boolean
step	Frame animation step, will skip frames when greater than 1.	NO	number
default_frame_index	Index of displayed sequence frames in power saving mode	NO	number

Supported properties hmUI.anim_status

Please pay attention to the animation order of the current settings when setting animation properties, the widget has been protected internally.

Value	Description
hmUI.anim_status.START	Start animation; only pause stop is allowed to be called after starting the animation.
hmUI.anim_status.PAUSE	Pause animation; can only be called after starting the animation and resuming it.
hmUI.anim_status.RESUME	Resume animation; can only be called after pausing the animation.
hmUI.anim_status.STOP	Stop animation; can only be called after starting the animation and resuming it.

Get animation status Return type boolean

Value	Description
hmUI.prop.ANIM_IS_RUNINNG	Is the animation running.
hmUI.prop.ANIM_IS_PAUSE	Whether the animation is paused.
hmUI.prop.ANIM_IS_STOP	Whether the animation is stopped.

Code example

tip

Please refer to Design Resources for the image resources in the code example

// Resource Storage Directory
.
└── assets
        └── gtr-3
                └── anim // anim_path
                        ├── 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)
      }
    })
  }
})