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