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