AnimatorProperty
NOTE This animation is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
When the universal attributes of a component change, you can create an AnimatorProperty for gradient to improve user experience.
Name | Type | Default Value | Description |
---|---|---|---|
duration | number | 1000 | Animation duration, in ms. The default duration is 1000 ms. |
curve | Curve | Curve.Linear | Animation curve. The default curve is linear. |
delay | number | 0 | Delay of animation playback, in ms. By default, the playback is not delayed. |
iterations | number | 1 | Number of times that the animation is played. By default, the animation is played once. The value -1 indicates that the animation is played for an unlimited number of times. |
playMode | PlayMode | PlayMode.Normal | Playback mode. By default, the animation is played from the beginning after the playback is complete. |
- Curve enums
Name | Description |
---|---|
Linear | The animation speed keeps unchanged. |
Ease | The animation starts at a low speed and then accelerates. It slows down before the animation ends. The cubic-bezier curve (0.25, 0.1, 0.25, 1.0) is used. |
EaseIn | The animation starts at a low speed. The cubic-bezier curve (0.42, 0.0, 1.0, 1.0) is used. |
EaseOut | The animation ends at a low speed. The cubic-bezier curve (0.0, 0.0, 0.58, 1.0) is used. |
EaseInOut | The animation starts and ends at a low speed. The cubic-bezier curve (0.42, 0.0, 0.58, 1.0) is used. |
FastOutSlowIn | The animation uses the standard cubic-bezier curve (0.4, 0.0, 0.2, 1.0). |
LinearOutSlowIn | The animation uses the deceleration cubic-bezier curve (0.0, 0.0, 0.2, 1.0). |
FastOutLinearIn | The animation uses the acceleration cubic-bezier curve (0.4, 0.0, 1.0, 1.0). |
ExtremeDeceleration | The animation uses the extreme deceleration cubic-bezier curve (0.0, 0.0, 0.0, 1.0). |
Sharp | The animation uses the sharp cubic-bezier curve (0.33, 0.0, 0.67, 1.0). |
Rhythm | The animation uses the rhythm cubic-bezier curve (0.7, 0.0, 0.2, 1.0). |
Smooth | The animation uses the smooth cubic-bezier curve (0.4, 0.0, 0.4, 1.0). |
Friction | Damping curve. The cubic-bezier curve (0.2, 0.0, 0.2, 1.0) is used. |
Example
@Entry
@Component
struct AttrAnimationExample {
@State widthSize: number = 200
@State heightSize: number = 100
@State flag: boolean = true
build() {
Column() {
Button('click me')
.onClick((event: ClickEvent) => {
if (this.flag) {
this.widthSize = 100
this.heightSize = 50
} else {
this.widthSize = 200
this.heightSize = 100
}
this.flag = !this.flag
})
.width(this.widthSize).height(this.heightSize).backgroundColor(0x317aff)
.animation({
duration: 2000, // Animation duration
curve: Curve.EaseOut, // Animation curve
delay: 500, // Animation delay
iterations: 1, // Number of playback times
playMode: PlayMode.Normal // Animation mode
}) // Animation configuration for the width and height attributes of the Button component
}.width('100%').margin({ top: 5 })
}
}