1# svg动画 2 3 4为svg组件添加动画效果。 5 6 7## 属性样式动画 8 9在Svg的子组件[animate](../reference/arkui-js/js-components-svg-animate.md)中，通过attributeName设置需要进行动效的属性，from设置开始值，to设置结束值。 10 11 12```html 13<!-- xxx.hml --> 14<div class="container"> 15 <svg> 16 <text x="300" y="300" fill="blue"> 17 Hello 18 <animate attributeName="font-size" from="30" to="60" dur="3s" repeatCount="indefinite"> 19 </animate> 20 <animate attributeName="fill" from="red" to="blue" dur="3s" repeatCount="indefinite"> 21 </animate> 22 <animate attributeName="opacity" from="1" to="0.3" dur="3s" repeatCount="indefinite"> 23 </animate> 24 </text> 25 <text x="300" y="600" fill="blue"> 26 World 27 <animate attributeName="font-size" from="30" to="60" values="30;80" dur="3s" repeatCount="indefinite"> 28 </animate> 29 <animate attributeName="fill" from="red" to="blue" dur="3s" repeatCount="indefinite"> 30 </animate> 31 <animate attributeName="opacity" from="0.3" to="1" dur="3s" repeatCount="indefinite"> 32 </animate> 33 </text> 34 </svg> 35</div> 36``` 37 38 39 40> **说明：** 41> 在设置动画变化值时，如果已经设置了values属性，则from和to都失效。 42 43 44## 路径动画 45 46在Svg的子组件[animateMotion](../reference/arkui-js/js-components-svg-animatemotion.md)中，通过path设置动画变化的路径。 47 48 49```html 50<!-- xxx.hml --> 51<div class="container"> 52 <svg fill="white" width="800" height="900"> 53 <path d="M300,200 h-150 a150 150 0 1 0 150 -150 z" fill="white" stroke="blue" stroke-width="5" > 54 </path> 55 <path fill="red" d="M-5,-5 L10,0 L-5,5 L0,0 Z" > 56 <animateMotion dur="2000" repeatCount="indefinite" rotate="auto-reverse"path="M300,200 h-150 a150 150 0 1 0 150 -150 z"> 57 </animateMotion> 58 </path> 59 </svg> 60</div> 61``` 62 63 64 65 66## animateTransform动画 67 68在Svg的子组件[animateTransform](../reference/arkui-js/js-components-svg-animatetransform.md)中，通过attributeName绑定transform属性，type设置动画类型，from设置开始值，to设置结束值。 69 70 71```html 72<!-- xxx.hml --> 73<div class="container" style=""> 74 <svg> 75 <line x1="90" y1="300" x2="90" y2="730" stroke-width="10" stroke="black" stroke-linecap="round"> 76 <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" 77 fill="freeze"> 78 </animateTransform> 79 </line> 80 <circle cx="500" cy="500" r="50" stroke-width="15" fill="red" stroke="#e70d0d"> 81 <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"> 82 </animateTransform> 83 <animateTransform attributeName="transform" attributeType="XML" type="scale" dur="6s" values="1;1;1.3" keyTimes="0;0.5;1" fill="freeze"></animateTransform> 84 <animateTransform attributeName="transform" attributeType="XML" type="translate" dur="9s" values="0;0;300 7" keyTimes="0;0.6;0.9" fill="freeze"></animateTransform> 85 </circle> 86 <rect width="500" height="200" x="90" y="840"> 87 <animateTransform attributeName="transform" attributeType="XML" type="skewY" dur="6s" values="0;0;30" keyTimes="0;0.5;1" fill="freeze"></animateTransform> 88 </rect> 89 <line x1="650" y1="300" x2="650" y2="600" stroke-width="20" stroke="blue" stroke-linecap="round"> 90 <animateTransform attributeName="transform" attributeType="XML" type="translate" dur="9s" values="0;0;0 800" keyTimes="0;0.6;1" fill="freeze"></animateTransform> 91 </line> 92 </svg> 93</div> 94``` 95 96 97```css 98/* xxx.css */ 99.container { 100 flex-direction: column; 101 align-items: center; 102 width: 100%; 103 height: 100%; 104 background-color: #F1F3F5; 105} 106``` 107 108 109
