IMG_ANIM

Start from API_LEVEL 2.0 . Please refer to API_LEVEL.

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

Create UI widget

import { createWidget, widget } from '@zos/ui'

const imgAnim = createWidget(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 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
step	Frame animation step size, more than '1' will jump frame	NO	number

Supported properties 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
anim_status.START	Start animation; only pause stop is allowed to be called after starting the animation.
anim_status.PAUSE	Pause animation; can only be called after starting the animation and resuming it.
anim_status.RESUME	Resume animation; can only be called after pausing the animation.
anim_status.STOP	Stop animation; can only be called after starting the animation and resuming it.

Get animation status Return type boolean

Value	Description
prop.ANIM_IS_RUNINNG	Is the animation running.
prop.ANIM_IS_PAUSE	Whether the animation is paused.
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

import { createWidget, widget, prop, anim_status } from '@zos/ui'

Page({
  build() {
    const imgAnimation = createWidget(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(prop.ANIM_STATUS, anim_status.START)
    imgAnimation.addEventListener(event.CLICK_DOWN, () => {
      const isRunning = imgAnimation.getProperty(prop.ANIM_IS_RUNINNG)

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