# animate The **** component is used to apply animation to an **** component. >![](../../public_sys-resources/icon-note.gif) **NOTE:** >The APIs of this module are supported since API version 7. ## Permission List None ## Child Components Not supported ## Attributes

Name

Type

Default Value

Mandatory

Description

id

string

-

No

Unique ID of the component.

attributeName

string

-

No

Name of the component to which the animation is applied.

begin

<time>

0

No

Delay time of the animation.

The value can be ms (ms), s (second), or m (minute). The default value is s (second). Other formats are not supported.

dur

<time>

0

No

Animation duration. If dur is not set, the value of end-begin is used as the duration. If the value is less than or equal to 0, the animation is not triggered.

The value can be ms (ms), s (second), or m (minute). The default value is s (second). Other formats are not supported.

end

<time>

0

No

Duration after which the animation ends. The value can be ms (ms), s (second), or m (minute). The default value is s (second). Other formats are not supported.

repeatCount

<number | indefinite>

1

No

Number of times the animation is played. The default value is indefinite. You can set the value to 1 to play the animation only once.

fill

<freeze | remove>

remove

No

State when the animation ends.

calcMode

<discrete | linear | paced | spline>

linear

No

Interpolation mode of the animation.

discrete: The value of from directly jumps to the value of to.

linear: linear.

paced: linear. After this value is set, the values of keyTimes and keyPoints are invalid.

spline: user-defined Bessel curve. The spline point is defined in the keyTimes attribute, and the control point of each interval is defined by keySplines.

keyTimes

string

-

No

Start time of the key frame animation. The value ranges from 0 to 1, separated by semicolons (;), for example, 0;0.3;0.8;1. keyTimes, keySplines, and values are combined to set the key frame animation. The number of keyTimes is the same as that of values. The number of keySplines is the number of keyTimes minus 1.

keySplines

string

-

No

A set of Bessel control points associated with keyTimes. You can define the Bessel curves for each key frame. The curves are separated by semicolons (;). The format of the two controls in the curve is x1 y1 x2 y2. For example, 0.5 0 0.5 1; 0.5 0 0.5 1;0.5 0 0.5 1.

by

number

-

No

Relative offset value to add to a specified attribute in the animation. The default value of from is the original attribute value.

from

string

-

No

Start value of the attribute to which the animation is applied.

If the values attribute has been set, the from attribute is invalid.

to

string

-

No

End value of the attribute to which the animation is applied.

If the values attribute has been set, the to attribute is invalid.

values

string

-

No

Change value of a group of animations. The format is value1;value2;value3.

## Example ```
``` ![](figures/animate-1.gif) ```
``` ![](figures/1-45.gif) ```
``` ![](figures/animate-3.gif) ```
``` ![](figures/animate-4.gif)