1# animate 2 3The **<animate\>** component is used to apply animation to an **<svg\>** component. 4 5> **NOTE:** 6>This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 7 8## Required Permissions 9 10None 11 12## Child Components 13 14Not supported 15 16## Attributes 17 18| Name | Type | Default Value | Mandatory | Description | 19| ------------- | ---------------------------------------- | ------------- | --------- | ------------------------------------------------------------ | 20| id | string | - | No | Unique ID of the component. | 21| attributeName | string | - | No | Name of the component to which the animation is applied. | 22| 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. | 23| 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. | 24| end | \<time> | 0 | No | Duration after which the animation ends. <br/>The value can be ms (ms), s (second), or m (minute). The default value is s (second). Other formats are not supported. | 25| 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. | 26| fill | \<freeze \| remove> | remove | No | State when the animation ends. | 27| calcMode | \<discrete \| linear \| paced \| spline> | linear | No | Interpolation mode of the animation.<br/>**discrete**: The value of **from** directly jumps to the value of **to**.<br/>**linear**: linear.<br/>**paced**: linear. After this value is set, the values of **keyTimes** and **keyPoints** are invalid.<br/>**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**. | 28| 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. | 29| 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**. | 30| 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. | 31| 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. | 32| 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. | 33| values | string | - | No | Change value of a group of animations. The format is value1;value2;value3. | 34 35 36## Example 37 38``` 39<!-- xxx.hml --> 40<div class="container"> 41 <svg width="400" height="400"> 42 <rect x="20" y="20" width="100" height="100" fill="red" rx="0" ry="20"> 43 <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"> 44 </animate> 45 </rect> 46 </svg> 47</div> 48``` 49 50 51 52``` 53<!-- xxx.hml --> 54<div class="container"> 55 <svg width="400" height="400"> 56 <rect x="20" y="20" width="100" height="100" fill="red" rx="0" ry="20"> 57 <animate attributeName="fill" from="red" to="blue" dur="1000" repeatCount="indefinite"></animate> 58 <animate attributeName="height" from="50" to="150" begin="500" end="1000" repeatCount="indefinite"> </animate> 59 </rect> 60 </svg> 61</div> 62``` 63 64 65 66``` 67<!-- xxx.hml --> 68<div class="container"> 69 <svg width="400" height="400"> 70 <rect x="20" y="20" width="100" height="100" fill="red" rx="0" ry="20"> 71 <animate attributeName="rx" values="0;30" dur="1000" repeatCount="10" fill="freeze" calcMode="linear"></animate> 72 </rect> 73 </svg> 74</div> 75``` 76 77 78 79``` 80<!-- xxx.hml --> 81<div class="container"> 82 <svg fill="white" width="600" height="600"> 83 <circle cx="60" cy="70" r="50" stroke-width="4" fill="white" stroke="blue"> 84 <animate attributeName="r" from="0" to="50" dur="2000" repeatCount="indefinite"></animate> 85 <animate attributeName="cx" from="60" to="200" dur="2000" repeatCount="indefinite"></animate> 86 </circle> 87 <circle cx="60" cy="200" r="50" stroke-width="4" fill="white" stroke="blue"> 88 <animate attributeName="stroke-width" from="4" to="10" calcMode="discrete" dur="2000" repeatCount="indefinite"></animate> 89 <animate attributeName="stroke" values="red;blue" dur="2000" repeatCount="indefinite"></animate> 90 </circle> 91 <circle cx="180" cy="200" r="50" stroke-width="10" stroke="red" stroke-dasharray="60 10" stroke-dashoffset="3"> 92 <animate attributeName="stroke-opacity" from="1.0" to="0.5" dur="2000" repeatCount="indefinite"></animate> 93 <animate attributeName="stroke-dashoffset" values="30;0;30" dur="500" repeatCount="indefinite"></animate> 94 <animate attributeName="cx" from="180" to="400" dur="2000" repeatCount="indefinite"></animate> 95 </circle> 96 <circle cx="180" cy="200" r="5" fill="blue"> 97 <animate attributeName="cx" from="180" to="400" dur="2000" repeatCount="indefinite"></animate> 98 </circle> 99 <circle cx="60" cy="380" r="50" fill="blue"> 100 <animate attributeName="fill" values="red;blue" dur="2000" repeatCount="indefinite"></animate> 101 </circle> 102 <circle cx="180" cy="380" r="50" fill="blue"> 103 <animate attributeName="fill-opacity" from="1.0" to="0.5" dur="2000" repeatCount="indefinite"></animate> 104 </circle> 105 </svg> 106</div> 107``` 108 109 110 111
