1# animateTransform<a name="ZH-CN_TOPIC_0000001164735714"></a> 2 3transform动效，支持的组件范围： 4 5<circle\>, <ellipse\>, <line\>, <path\>, <polygon\>, <polyline\>, <rect\>, <text\> 6 7> **说明：** 8>从API Version 7 开始支持。 9 10## 权限列表<a name="zh-cn_topic_0000001173324667_section11257113618419"></a> 11 12无 13 14## 子组件<a name="zh-cn_topic_0000001173324667_section9288143101012"></a> 15 16不支持。 17 18## 属性<a name="zh-cn_topic_0000001173324667_section2907183951110"></a> 19 20支持animate属性和以下表格中的属性。 21 22<a name="zh-cn_topic_0000001173324667_table20633101642315"></a> 23<table><thead align="left"><tr id="zh-cn_topic_0000001173324667_row663331618238"><th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.1"><p id="zh-cn_topic_0000001173324667_aaf1247770b244944bbcc9f28d9a6f00b"><a name="zh-cn_topic_0000001173324667_aaf1247770b244944bbcc9f28d9a6f00b"></a><a name="zh-cn_topic_0000001173324667_aaf1247770b244944bbcc9f28d9a6f00b"></a>名称</p> 24</th> 25<th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.2"><p id="zh-cn_topic_0000001173324667_a6efc3502761f4faf9630e484280f75b6"><a name="zh-cn_topic_0000001173324667_a6efc3502761f4faf9630e484280f75b6"></a><a name="zh-cn_topic_0000001173324667_a6efc3502761f4faf9630e484280f75b6"></a>类型</p> 26</th> 27<th class="cellrowborder" valign="top" width="10.48%" id="mcps1.1.6.1.3"><p id="zh-cn_topic_0000001173324667_a27a37273d9ad47569ddbcb8db985d302"><a name="zh-cn_topic_0000001173324667_a27a37273d9ad47569ddbcb8db985d302"></a><a name="zh-cn_topic_0000001173324667_a27a37273d9ad47569ddbcb8db985d302"></a>默认值</p> 28</th> 29<th class="cellrowborder" valign="top" width="7.5200000000000005%" id="mcps1.1.6.1.4"><p id="zh-cn_topic_0000001173324667_p824610360217"><a name="zh-cn_topic_0000001173324667_p824610360217"></a><a name="zh-cn_topic_0000001173324667_p824610360217"></a>必填</p> 30</th> 31<th class="cellrowborder" valign="top" width="35.76%" id="mcps1.1.6.1.5"><p id="zh-cn_topic_0000001173324667_a2ff3361bfd3b420ba4967452d2ddd098"><a name="zh-cn_topic_0000001173324667_a2ff3361bfd3b420ba4967452d2ddd098"></a><a name="zh-cn_topic_0000001173324667_a2ff3361bfd3b420ba4967452d2ddd098"></a>描述</p> 32</th> 33</tr> 34</thead> 35<tbody><tr id="zh-cn_topic_0000001173324667_row36332165231"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173324667_p19122124719532"><a name="zh-cn_topic_0000001173324667_p19122124719532"></a><a name="zh-cn_topic_0000001173324667_p19122124719532"></a>type</p> 36</td> 37<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173324667_p3121547175310"><a name="zh-cn_topic_0000001173324667_p3121547175310"></a><a name="zh-cn_topic_0000001173324667_p3121547175310"></a>[translate | scale | rotate | skewX | skewY]</p> 38</td> 39<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173324667_p201211474539"><a name="zh-cn_topic_0000001173324667_p201211474539"></a><a name="zh-cn_topic_0000001173324667_p201211474539"></a>-</p> 40</td> 41<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173324667_p151201747195314"><a name="zh-cn_topic_0000001173324667_p151201747195314"></a><a name="zh-cn_topic_0000001173324667_p151201747195314"></a>是</p> 42</td> 43<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173324667_p1211954714533"><a name="zh-cn_topic_0000001173324667_p1211954714533"></a><a name="zh-cn_topic_0000001173324667_p1211954714533"></a>设置transform动画的类型</p> 44</td> 45</tr> 46</tbody> 47</table> 48 49## 示例<a name="zh-cn_topic_0000001173324667_section360556124815"></a> 50 51``` 52<!-- xxx.hml --> 53<div class="container"> 54 <div class="back_container"> 55 <svg> 56 <polygon points="60,30 90,90 30,90" fill="red"> 57 <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 120 140" 58 to="360 360 420" dur="3s" repeatCount="indefinite"></animateTransform> 59 </polygon> 60 <polygon points="60,30 90,90 30,90" fill="red"> 61 <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" 62 to="360" dur="3s" repeatCount="indefinite"></animateTransform> 63 </polygon> 64 <polygon points="60,30 90,90 30,90" fill="green"> 65 <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="2" 66 dur="3s" repeatCount="indefinite"></animateTransform> 67 </polygon> 68 <polygon points="60,30 90,90 30,90" fill="green"> 69 <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1 1" to="2 4" 70 dur="3s" repeatCount="indefinite"></animateTransform> 71 </polygon> 72 <polygon points="60,30 90,90 30,90" fill="#D2691E"> 73 <animateTransform attributeName="transform" attributeType="XML" type="skewX" from="10" to="100" 74 dur="3s" repeatCount="indefinite"></animateTransform> 75 </polygon> 76 <polygon points="60,30 90,90 30,90" fill="#D2691E"> 77 <animateTransform attributeName="transform" attributeType="XML" type="skewY" from="10" to="100" 78 dur="3s" repeatCount="indefinite"></animateTransform> 79 </polygon> 80 <polygon points="60,30 90,90 30,90" fill="#D2691E"> 81 <animateTransform attributeName="transform" attributeType="XML" type="skewX" from="10" to="100" 82 dur="3s" repeatCount="indefinite"></animateTransform> 83 <animateTransform attributeName="transform" attributeType="XML" type="skewY" from="10" to="100" 84 dur="3s" repeatCount="indefinite"></animateTransform> 85 </polygon> 86 <polygon points="60,30 90,90 30,90" fill="blue"> 87 <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="300" 88 dur="3s" repeatCount="indefinite"></animateTransform> 89 </polygon> 90 <polygon points="60,30 90,90 30,90" fill="blue"> 91 <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0 0" to="0 300" 92 dur="3s" repeatCount="indefinite"></animateTransform> 93 </polygon> 94 <polygon points="60,30 90,90 30,90" fill="blue"> 95 <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0 0" to="300 300" 96 dur="3s" repeatCount="indefinite"></animateTransform> 97 </polygon> 98 </svg> 99 </div> 100</div> 101``` 102 103``` 104/* xxx.css */ 105.container { 106 flex-direction: column; 107 justify-content: flex-start; 108 align-items: flex-start; 109 background-color: #f8f8ff; 110} 111 112.back_container { 113 flex-direction: row; 114 justify-content: flex-start; 115 align-items: flex-start; 116 height: 1000px; 117 width: 1080px; 118} 119``` 120 121 122 123动画叠加 124 125``` 126<!-- xxx.hml --> 127<div class="container"> 128 <div class="back_container"> 129 <svg> 130 <polygon points="60,30 90,90 30,90" fill="black"> 131 <animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0; 200 200; 400 0; 132 600 200" keyTimes="0; 0.4; 0.8;1.0" dur="3s" repeatCount="indefinite"></animateTransform> 133 </polygon> 134 <polygon points="60,30 90,90 30,90" fill="green"> 135 <animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0; 200 200; 400 0; 136 600 200" keyTimes="0; 0.4; 0.8;1.0" dur="3s" repeatCount="indefinite"></animateTransform> 137 <animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0; 5; 0; 10" keyTimes="0; 138 0.4; 0.8; 1.0" dur="3s" repeatCount="indefinite"></animateTransform> 139 </polygon> 140 <polygon points="60,30 90,90 30,90" fill="blue"> 141 <animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0; 200 200; 400 0; 142 600 200" keyTimes="0; 0.4; 0.8;1.0" dur="3s" repeatCount="indefinite"></animateTransform> 143 <animateTransform attributeName="transform" attributeType="XML" type="scale" values="1; 1.2; 1; 1.2" 144 keyTimes="0; 0.4; 0.8; 1.0" dur="3s" repeatCount="indefinite"></animateTransform> 145 </polygon> 146 <polygon points="60,30 90,90 30,90" fill="red"> 147 <animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0; 200 200; 400 0; 148 600 200" keyTimes="0; 0.4; 0.8;1.0" dur="3s" repeatCount="indefinite"></animateTransform> 149 <animateTransform attributeName="transform" attributeType="XML" type="scale" values="1; 1.2; 1; 1.2" 150 keyTimes="0; 0.4; 0.8; 1.0" dur="3s" repeatCount="indefinite"></animateTransform> 151 <animateTransform attributeName="transform" attributeType="XML" type="skewX" values="0; 10; 0; 10" 152 keyTimes="0; 0.4; 0.8; 1.0" dur="3s" repeatCount="indefinite"></animateTransform> 153 </polygon> 154 </svg> 155 </div> 156</div> 157``` 158 159``` 160/* xxx.css */ 161.container { 162 flex-direction: column; 163 justify-content: flex-start; 164 align-items: flex-start; 165 background-color: #f8f8ff; 166} 167 168.back_container { 169 flex-direction: row; 170 justify-content: flex-start; 171 align-items: flex-start; 172 height: 1000px; 173 width: 1080px; 174} 175``` 176 177 178 179涉及组件示例 180 181``` 182<!-- xxx.hml --> 183<div class="container"> 184 <div class="back_container"> 185 <svg> 186 <svg fill="white" width="600" height="600" viewBox="0 0 50 50"> 187 <path stroke="black" fill="none" stroke-linejoin="miter" stroke-miterlimit="1" id="p2" 188 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"> 189 <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="25" 190 dur="3s" repeatCount="indefinite"></animateTransform> 191 </path> 192 </svg> 193 <polygon points="60,20 90,80 30,80" fill="black"> 194 <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="300" 195 dur="3s" repeatCount="indefinite"></animateTransform> 196 </polygon> 197 <circle cx="60" cy="130" r="40" stroke-width="4" fill="white" stroke="blue"> 198 <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="300" 199 dur="3s" repeatCount="indefinite"></animateTransform> 200 </circle> 201 <line x1="10" x2="300" y1="280" y2="280" stroke-width="10" stroke="black" stroke-linecap="square"> 202 <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="300" 203 dur="3s" repeatCount="indefinite"></animateTransform> 204 </line> 205 <polyline points="10,380 50,335 50,385 100,310" fill="white" stroke="black"> 206 <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="300" 207 dur="3s" repeatCount="indefinite"></animateTransform> 208 </polyline> 209 <ellipse cx="100" cy="450" rx="70" ry="50" fill="blue"> 210 <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="300" 211 dur="3s" repeatCount="indefinite"></animateTransform> 212 </ellipse> 213 <rect width="100" height="100" x="50" y="540" stroke-width="10" stroke="red" rx="10" ry="10" 214 stroke-dasharray="5 3" stroke-dashoffset="3"> 215 <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="300" 216 dur="3s" repeatCount="indefinite"></animateTransform> 217 </rect> 218 <text x="20" y="700" fill="#D2691E" font-size="40"> 219 <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="300" 220 dur="3s" repeatCount="indefinite"></animateTransform> 221 </text> 222 </svg> 223 </div> 224</div> 225``` 226 227``` 228/* xxx.css */ 229.container { 230 flex-direction: column; 231 justify-content: flex-start; 232 align-items: flex-start; 233 background-color: #f8f8ff; 234} 235 236.back_container { 237 flex-direction: row; 238 justify-content: flex-start; 239 align-items: flex-start; 240 height: 1000px; 241 width: 1080px; 242} 243``` 244 245 246 247
