# AnimatorProperty 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	Linear	The default curve is linear. For details about the valid values, see Curve enums.
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	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 }) } } ``` ![](figures/attranimation.gif)