1# animateTransform
2
3
4>  **说明：**
5> 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
6
7transform动效，支持的组件范围：
8
9
10<circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>
11
12## 权限列表
13
14无
15
16
17## 子组件
18
19不支持。
20
21
22## 属性
23
24支持animate属性和以下表格中的属性。
25
26| 名称 | 类型 | 默认值 | 必填 | 描述 |
27| -------- | -------- | -------- | -------- | -------- |
28| type | [translate \| scale \| rotate \| skewX \| skewY] | - | 是 | 设置transform动画的类型 |
29
30
31## 示例
32
33```html
34<!-- xxx.hml -->
35<div class="container">
36  <div class="back_container">
37    <svg>
38      <polygon points="60,30 90,90 30,90" fill="red">
39        <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 120 140" to="360 360 420" dur="3s" repeatCount="indefinite"></animateTransform>
40      </polygon>
41      <polygon points="60,30 90,90 30,90" fill="red">
42        <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="360" dur="3s" repeatCount="indefinite"></animateTransform>
43      </polygon>
44      <polygon points="60,30 90,90 30,90" fill="green">
45        <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="2" dur="3s" repeatCount="indefinite"></animateTransform>
46      </polygon>
47      <polygon points="60,30 90,90 30,90" fill="green">
48        <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1 1" to="2 4" dur="3s" repeatCount="indefinite"></animateTransform>
49      </polygon>
50      <polygon points="60,30 90,90 30,90" fill="#D2691E">
51        <animateTransform attributeName="transform" attributeType="XML" type="skewX" from="10" to="100" dur="3s" repeatCount="indefinite"></animateTransform>
52      </polygon>
53      <polygon points="60,30 90,90 30,90" fill="#D2691E">
54        <animateTransform attributeName="transform" attributeType="XML" type="skewY" from="10" to="100" dur="3s" repeatCount="indefinite"></animateTransform>
55      </polygon>
56      <polygon points="60,30 90,90 30,90" fill="#D2691E">
57        <animateTransform attributeName="transform" attributeType="XML" type="skewX" from="10" to="100" dur="3s" repeatCount="indefinite"></animateTransform>
58        <animateTransform attributeName="transform" attributeType="XML" type="skewY" from="10" to="100" dur="3s" repeatCount="indefinite"></animateTransform>
59      </polygon>
60      <polygon points="60,30 90,90 30,90" fill="blue">
61        <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="300" dur="3s" repeatCount="indefinite"></animateTransform>
62      </polygon>
63      <polygon points="60,30 90,90 30,90" fill="blue">
64        <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0 0" to="0 300" dur="3s" repeatCount="indefinite"></animateTransform>
65      </polygon>
66      <polygon points="60,30 90,90 30,90" fill="blue">
67        <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0 0" to="300 300" dur="3s" repeatCount="indefinite"></animateTransform>
68      </polygon>
69    </svg>
70  </div>
71</div>
72```
73
74```css
75/* xxx.css */
76.container {
77  flex-direction: column;
78  justify-content: flex-start;
79  align-items: flex-start;
80  background-color: #f8f8ff;
81}
82
83.back_container {
84  flex-direction: row;
85  justify-content: flex-start;
86  align-items: flex-start;
87  height: 1000px;
88  width: 1080px;
89}
90```
91
92
93![zh-cn_image_0000001127285004](figures/zh-cn_image_0000001127285004.gif)
94
95
96动画叠加
97
98
99```html
100<!-- xxx.hml -->
101<div class="container">
102  <div class="back_container">
103    <svg>
104      <polygon points="60,30 90,90 30,90" fill="black">
105        <animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0; 200 200; 400 0;
106          600 200" keyTimes="0; 0.4; 0.8;1.0" dur="3s" repeatCount="indefinite"></animateTransform>
107      </polygon>
108      <polygon points="60,30 90,90 30,90" fill="green">
109        <animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0; 200 200; 400 0;
110          600 200" keyTimes="0; 0.4; 0.8;1.0" dur="3s" repeatCount="indefinite"></animateTransform>
111        <animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0; 5; 0; 10" keyTimes="0;
112          0.4; 0.8; 1.0" dur="3s" repeatCount="indefinite"></animateTransform>
113      </polygon>
114      <polygon points="60,30 90,90 30,90" fill="blue">
115        <animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0; 200 200; 400 0;
116          600 200" keyTimes="0; 0.4; 0.8;1.0" dur="3s" repeatCount="indefinite"></animateTransform>
117        <animateTransform attributeName="transform" attributeType="XML" type="scale" values="1; 1.2; 1; 1.2"
118          keyTimes="0; 0.4; 0.8; 1.0" dur="3s" repeatCount="indefinite"></animateTransform>
119      </polygon>
120      <polygon points="60,30 90,90 30,90" fill="red">
121        <animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0; 200 200; 400 0;
122          600 200" keyTimes="0; 0.4; 0.8;1.0" dur="3s" repeatCount="indefinite"></animateTransform>
123        <animateTransform attributeName="transform" attributeType="XML" type="scale" values="1; 1.2; 1; 1.2"
124          keyTimes="0; 0.4; 0.8; 1.0" dur="3s" repeatCount="indefinite"></animateTransform>
125        <animateTransform attributeName="transform" attributeType="XML" type="skewX" values="0; 10; 0; 10"
126          keyTimes="0; 0.4; 0.8; 1.0" dur="3s" repeatCount="indefinite"></animateTransform>
127      </polygon>
128    </svg>
129  </div>
130</div>
131```
132
133
134```css
135/* xxx.css */
136.container {
137  flex-direction: column;
138  justify-content: flex-start;
139  align-items: flex-start;
140  background-color: #f8f8ff;
141}
142.back_container {
143  flex-direction: row;
144  justify-content: flex-start;
145  align-items: flex-start;
146  height: 1000px;
147  width: 1080px;
148}
149```
150
151
152![zh-cn_image_0000001127125192](figures/zh-cn_image_0000001127125192.gif)
153
154
155涉及组件示例
156
157
158```html
159<!-- xxx.hml -->
160<div class="container">
161  <div class="back_container">
162    <svg>
163      <svg fill="white" width="600" height="600" viewBox="0 0 50 50">
164        <path stroke="black" fill="none" stroke-linejoin="miter" stroke-miterlimit="1" id="p2"
165          d="M1,19 l7,-3 l7,3 m2,0 l3.5,-3 l3.5 ,3 m2,0 l2 ,-3 l2 ,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5 ,-3 l0.5,3">
166          <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="25"
167            dur="3s" repeatCount="indefinite"></animateTransform>
168        </path>
169      </svg>
170      <polygon points="60,20 90,80 30,80" fill="black">
171        <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="300"
172          dur="3s" repeatCount="indefinite"></animateTransform>
173      </polygon>
174      <circle cx="60" cy="130" r="40" stroke-width="4" fill="white" stroke="blue">
175        <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="300"
176          dur="3s" repeatCount="indefinite"></animateTransform>
177      </circle>
178      <line x1="10" x2="300" y1="280" y2="280" stroke-width="10" stroke="black" stroke-linecap="square">
179        <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="300"
180          dur="3s" repeatCount="indefinite"></animateTransform>
181      </line>
182      <polyline points="10,380 50,335 50,385 100,310" fill="white" stroke="black">
183        <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="300"
184          dur="3s" repeatCount="indefinite"></animateTransform>
185      </polyline>
186      <ellipse cx="100" cy="450" rx="70" ry="50" fill="blue">
187        <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="300"
188          dur="3s" repeatCount="indefinite"></animateTransform>
189      </ellipse>
190      <rect width="100" height="100" x="50" y="540" stroke-width="10" stroke="red" rx="10" ry="10"
191        stroke-dasharray="5 3" stroke-dashoffset="3">
192        <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="300"
193          dur="3s" repeatCount="indefinite"></animateTransform>
194      </rect>
195      <text x="20" y="700" fill="#D2691E" font-size="40">
196        animate-transform
197        <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="300"
198          dur="3s" repeatCount="indefinite"></animateTransform>
199      </text>
200    </svg>
201  </div>
202</div>
203```
204
205
206```css
207/* xxx.css */
208.container {
209  flex-direction: column;
210  justify-content: flex-start;
211  align-items: flex-start;
212  background-color: #f8f8ff;
213}
214.back_container {
215  flex-direction: row;
216  justify-content: flex-start;
217  align-items: flex-start;
218  height: 1000px;
219  width: 1080px;
220}
221```
222
223
224![zh-cn_image_0000001173324765](figures/zh-cn_image_0000001173324765.gif)
225
226