Skip to main content
Version: v3

Widget Animation

Start from API_LEVEL 2.0 . Please refer to API_LEVEL.

widget_anim

Widget animation can add animation effects to some of the widget's property changes. The above image shows the TEXT widget's x and y properties changing at the same time, creating a moving animation effect.

Properties that support animations

The properties that support setting animations are

anim_prop
prop.X
prop.Y
prop.W
prop.H
prop.ALPHA

Individual property animation configuration

PropertyTypeDescription
anim_propnumberTo add the properties of the animation, refer to anim_prop
anim_fromnumberThe value of the property at the start of the animation
anim_tonumberThe value of the property at the end of the animation
anim_ratestringAnimation curve, optional values linear, easein, easeout, easeinout, bounce, refer to https://easings.net/
anim_durationnumberAnimation duration, in milliseconds
anim_offsetnumberThe delay before the animation starts, in milliseconds

Animation Configuration

PropertyTypeDescription
anim_stepsArray<anim_config>Attribute animation configuration array, refer to anim_config, multiple sets of animations can be performed simultaneously
anim_fpsnumberAnimation frame rate, default 25
anim_auto_startnumberIf or not the animation plays automatically, default 1, 0: don't play automatically; 1: play automatically
anim_auto_destroynumberIf or not the animation is automatically destroyed, default 1, 0: not automatically destroyed; 1: automatically destroyed
anim_repeatnumberAnimation loop, default 1 times, -1: infinite loop; 0: play once; or specify the number of times to play directly
anim_frame_func() => voidCallback function for each frame of animation playback
anim_complete_func() => voidEnd of animation callback function

Animation Status anim_status

  • Use widget.setProperty to set the animation play state
  • Use widget.getProperty to get the animation play state
anim_statusDescription
anim_status.STARTstart
anim_status.STOPstop
anim_status.PAUSEpause
anim_status.RESUMEresume
anim_status.UNKNOWunknown

Code example

import { createWidget, widget, align, text_style, prop, anim_status } from '@zos/ui'
import { px } from '@zos/utils'

Page({
build() {
const textWidget = createWidget(widget.TEXT, {
x: px(96),
y: px(120),
w: px(288),
h: px(46),
color: 0xffffff,
text_size: px(36),
align_h: align.CENTER_H,
align_v: align.CENTER_V,
text_style: text_style.NONE,
text: 'HELLO ZEPPOS'
})

const anim_step1 = {
anim_rate: 'linear',
anim_duration: 2000,
anim_from: px(10),
anim_to: px(110),
anim_prop: prop.X
}

const anim_step2 = {
anim_rate: 'linear',
anim_duration: 2000,
anim_from: px(120),
anim_to: px(300),
anim_prop: prop.Y
}

const animId = textWidget.setProperty(prop.ANIM, {
anim_steps: [anim_step1, anim_step2],
anim_fps: 25
})

textWidget.setProperty(prop.ANIM_STATUS, {
anim_id: animId,
anim_status: anim_status.PAUSE
})

textWidget.setProperty(prop.ANIM_STATUS, {
anim_id: animId,
anim_status: anim_status.RESUME
})

const currentStatus = textWidget.getProperty(prop.ANIM_STATUS, animId)
}
})