1# animate 2 3 4> **NOTE** 5> 6> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 7 8The **\<animate>** component is used to apply animation to an **\<svg>** component. 9 10## Required Permissions 11 12None 13 14 15## Child Components 16 17Not supported 18 19 20## Attributes 21 22| Name| Type| Default Value| Mandatory| Description| 23| -------- | -------- | -------- | -------- | -------- | 24| id | string | - | No| Unique ID of the component.| 25| attributeName | string | - | No| Name of the component to which the animation is applied.| 26| begin | <time> | 0 | No| Delay time of the animation.<br>The value can be ms (ms), s (second), or m (minute). The default value is s (second). Other formats are not supported.| 27| 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.<br>The value can be ms (ms), s (second), or m (minute). The default value is s (second). Other formats are not supported.| 28| 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.| 29| 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.| 30| fill | <freeze \| remove> | remove | No| State when the animation ends.| 31| calcMode | <discrete \| linear \| paced \| spline> | linear | No| Interpolation mode of the animation.<br>**discrete**: The animation directly jumps from the value specified by **from** to the value specified by **to**.<br>**linear**: Linear interpolation between values is used.<br>**paced**: Interpolation that produces an even paced change is used. If this value is set, the values of **keyTimes** and **keyPoints** will not take effect.<br>**spline**: Interpolation is implemented based on a custom Bezier spline. The spline points are defined in the **keyTimes** attribute, and the control points of each interval are defined in the **keySplines** attribute.| 32| keyTimes | string | - | No| Start time of the key frame animation. The value is a semicolon-separated list of values ranging from 0 to 1, for example, **0;0.3;0.8;1**. **keyTimes**, **keySplines**, and **values** are combined to set the key frame animation. The number of values defined for **keyTimes** is the same as that for **values**. The number of values defined for **keySplines** is the number of values defined for **keyTimes** minus 1.| 33| keySplines | string | - | No| A set of Bezier control points associated with **keyTimes**. You can define the Bezier curves for each key frame, separating them with semicolons (;). The format of the two control points 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**.| 34| 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.| 35| from | string | - | No| Start value of the attribute to which the animation is applied.<br>If the **values** attribute has been set, the **from** attribute is invalid.| 36| to | string | - | No| End value of the attribute to which the animation is applied.<br>If the **values** attribute has been set, the **to** attribute is invalid.| 37| values | string | - | No| Change value of a group of animations. The format is value1;value2;value3.| 38 39 40## Example 41 42```html 43<!-- xxx.hml --> 44<div class="container"> 45 <svg width="400" height="400"> 46 <rect x="20" y="20" width="100" height="100" fill="red" rx="0" ry="20"> 47 <animate attributeName="rx" values="0;10;30;0" keyTimes="0;0.25;0.75;1" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1" dur="1000" repeatCount="indefinite"> 48 </animate> 49 </rect> 50 </svg> 51</div> 52``` 53 54 55 56 57 58```html 59<!-- xxx.hml --> 60<div class="container"> 61 <svg width="400" height="400"> 62 <rect x="20" y="20" width="100" height="100" fill="red" rx="0" ry="20"> 63 <animate attributeName="fill" from="red" to="blue" dur="1000" repeatCount="indefinite"></animate> 64 <animate attributeName="height" from="50" to="150" begin="500" end="1000" repeatCount="indefinite"> </animate> 65 </rect> 66 </svg> 67</div> 68``` 69 70 71 72 73 74```html 75<!-- xxx.hml --> 76<div class="container"> 77 <svg width="400" height="400"> 78 <rect x="20" y="20" width="100" height="100" fill="red" rx="0" ry="20"> 79 <animate attributeName="rx" values="0;30" dur="1000" repeatCount="indefinite" fill="freeze" calcMode="linear"></animate> 80 </rect> 81 </svg> 82</div> 83``` 84 85 86 87 88 89```html 90<!-- xxx.hml --> 91<div class="container"> 92 <svg fill="white" width="600" height="600"> 93 <circle cx="60" cy="70" r="50" stroke-width="4" fill="white" stroke="blue"> 94 <animate attributeName="r" from="0" to="50" dur="2000" repeatCount="indefinite"></animate> 95 <animate attributeName="cx" from="60" to="200" dur="2000" repeatCount="indefinite"></animate> 96 </circle> 97 <circle cx="60" cy="200" r="50" stroke-width="4" fill="white" stroke="blue"> 98 <animate attributeName="stroke-width" from="4" to="10" calcMode="discrete" dur="2000" repeatCount="indefinite"></animate> 99 <animate attributeName="stroke" values="red;blue" dur="2000" repeatCount="indefinite"></animate> 100 </circle> 101 <circle cx="180" cy="200" r="50" stroke-width="10" stroke="red" stroke-dasharray="60 10" stroke-dashoffset="3"> 102 <animate attributeName="stroke-opacity" from="1.0" to="0.5" dur="2000" repeatCount="indefinite"></animate> 103 <animate attributeName="stroke-dashoffset" values="30;0;30" dur="500" repeatCount="indefinite"></animate> 104 <animate attributeName="cx" from="180" to="400" dur="2000" repeatCount="indefinite"></animate> 105 </circle> 106 <circle cx="180" cy="200" r="5" fill="blue"> 107 <animate attributeName="cx" from="180" to="400" dur="2000" repeatCount="indefinite"></animate> 108 </circle> 109 <circle cx="60" cy="380" r="50" fill="blue"> 110 <animate attributeName="fill" values="red;blue" dur="2000" repeatCount="indefinite"></animate> 111 </circle> 112 <circle cx="180" cy="380" r="50" fill="blue"> 113 <animate attributeName="fill-opacity" from="1.0" to="0.5" dur="2000" repeatCount="indefinite"></animate> 114 </circle> 115 </svg> 116</div> 117``` 118 119 120 121
