1# Defining Animations for SVG Components 2 3You can use child components in the **\<svg>** component to animate attributes over time. 4 5## Attribute Style Animation 6 7In the [animate](../reference/arkui-js/js-components-svg-animate.md) child component of the **\<svg>** component, set **attributeName** to the attribute you want to animate, set **from** to the animation start value, and set **to** to the animation end value. 8 9 10```html 11<!-- xxx.hml --> 12<div class="container"> 13 <svg> 14 <text x="300" y="300" fill="blue"> 15 Hello 16 <animate attributeName="font-size" from="30" to="60" dur="3s" repeatCount="indefinite"> 17 </animate> 18 <animate attributeName="fill" from="red" to="blue" dur="3s" repeatCount="indefinite"> 19 </animate> 20 <animate attributeName="opacity" from="1" to="0.3" dur="3s" repeatCount="indefinite"> 21 </animate> 22 </text> 23 <text x="300" y="600" fill="blue"> 24 World 25 <animate attributeName="font-size" from="30" to="60" values="30;80" dur="3s" repeatCount="indefinite"> 26 </animate> 27 <animate attributeName="fill" from="red" to="blue" dur="3s" repeatCount="indefinite"> 28 </animate> 29 <animate attributeName="opacity" from="0.3" to="1" dur="3s" repeatCount="indefinite"> 30 </animate> 31 </text> 32 </svg> 33</div> 34``` 35 36 37 38> **NOTE** 39> 40> When values is also set, the **from** and **to** settings do not take effect. 41 42## Motion Path Animation 43 44In the [animateMotion](../reference/arkui-js/js-components-svg-animatemotion.md) child component of the **\<svg>** component, set path to define a shape for the animation. 45 46 47```html 48<!-- xxx.hml --> 49<div class="container"> 50 <svg fill="white" width="800" height="900"> 51 <path d="M300,200 h-150 a150 150 0 1 0 150 -150 z" fill="white" stroke="blue" stroke-width="5" > 52 </path> 53 <path fill="red" d="M-5,-5 L10,0 L-5,5 L0,0 Z" > 54 <animateMotion dur="2000" repeatCount="indefinite" rotate="auto-reverse"path="M300,200 h-150 a150 150 0 1 0 150 -150 z"> 55 </animateMotion> 56 </path> 57 </svg> 58</div> 59``` 60 61 62 63## animateTransform Animation 64 65In the [animateTransform](../reference/arkui-js/js-components-svg-animatetransform.md) child component of the <svg> component, set attributeName to bind the corresponding attribute to the transform attribute, and set type to the animation type, from to the start value, and to to the end value. 66 67 68```html 69<!-- xxx.hml --> 70<div class="container" style=""> 71 <svg> 72 <line x1="90" y1="300" x2="90" y2="730" stroke-width="10" stroke="black" stroke-linecap="round"> 73 <animateTransform attributeName="transform" attributeType="XML" type="translate" dur="3s" values="0;30;10;30;20;30;25;30" keyTimes="0;0.3;0.5;0.7;0.8;0.9;1.0;1.1" 74 fill="freeze"> 75 </animateTransform> 76 </line> 77 <circle cx="500" cy="500" r="50" stroke-width="15" fill="red" stroke="#e70d0d"> 78 <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="3s" values="0;30;10;30;20;30;25;30" keyTimes="0;0.3;0.5;0.7;0.8;0.9;1.0;1.1" fill="freeze"> 79 </animateTransform> 80 <animateTransform attributeName="transform" attributeType="XML" type="scale" dur="6s" values="1;1;1.3" keyTimes="0;0.5;1" fill="freeze"></animateTransform> 81 <animateTransform attributeName="transform" attributeType="XML" type="translate" dur="9s" values="0;0;300 7" keyTimes="0;0.6;0.9" fill="freeze"></animateTransform> 82 </circle> 83 <rect width="500" height="200" x="90" y="840"> 84 <animateTransform attributeName="transform" attributeType="XML" type="skewY" dur="6s" values="0;0;30" keyTimes="0;0.5;1" fill="freeze"></animateTransform> 85 </rect> 86 <line x1="650" y1="300" x2="650" y2="600" stroke-width="20" stroke="blue" stroke-linecap="round"> 87 <animateTransform attributeName="transform" attributeType="XML" type="translate" dur="9s" values="0;0;0 800" keyTimes="0;0.6;1" fill="freeze"></animateTransform> 88 </line> 89 </svg> 90</div> 91``` 92 93 94```css 95/* xxx.css */ 96.container { 97 flex-direction: column; 98 align-items: center; 99 width: 100%; 100 height: 100%; 101 background-color: #F1F3F5; 102} 103``` 104 105
