1# animateTransform 2 3The **<animateTransform\>** component is used to apply a transform animation and supports the following components: 4 5<circle\>, <ellipse\>, <line\>, <path\>, <polygon\>, <polyline\>, <rect\>, <text\> 6 7> **NOTE** 8> 9> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 10 11## Required Permissions 12 13None 14 15## Child Components 16 17Not supported 18 19## Attributes 20 21The **animate** attributes and the attributes in the following table are supported. 22 23| Name | Type | Default Value | Mandatory | Description | 24| ---- | ------------------------------------------------ | ------------- | --------- | ------------------------- | 25| type | [translate \| scale \| rotate \| skewX \| skewY] | - | Yes | Transform animation type. | 26 27 28## Example 29 30``` 31<!-- xxx.hml --> 32<div class="container"> 33 <div class="back_container"> 34 <svg> 35 <polygon points="60,30 90,90 30,90" fill="red"> 36 <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 120 140" to="360 360 420" dur="3s" repeatCount="indefinite"></animateTransform> 37 </polygon> 38 <polygon points="60,30 90,90 30,90" fill="red"> 39 <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="360" dur="3s" repeatCount="indefinite"></animateTransform> 40 </polygon> 41 <polygon points="60,30 90,90 30,90" fill="green"> 42 <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="2" 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 1" to="2 4" dur="3s" repeatCount="indefinite"></animateTransform> 46 </polygon> 47 <polygon points="60,30 90,90 30,90" fill="#D2691E"> 48 <animateTransform attributeName="transform" attributeType="XML" type="skewX" from="10" to="100" 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="skewY" 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="skewX" from="10" to="100" dur="3s" repeatCount="indefinite"></animateTransform> 55 <animateTransform attributeName="transform" attributeType="XML" type="skewY" from="10" to="100" dur="3s" repeatCount="indefinite"></animateTransform> 56 </polygon> 57 <polygon points="60,30 90,90 30,90" fill="blue"> 58 <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="300" 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 0" to="0 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="300 300" dur="3s" repeatCount="indefinite"></animateTransform> 65 </polygon> 66 </svg> 67 </div> 68</div> 69``` 70 71``` 72/* xxx.css */ 73.container { 74 flex-direction: column; 75 justify-content: flex-start; 76 align-items: flex-start; 77 background-color: #f8f8ff; 78} 79 80.back_container { 81 flex-direction: row; 82 justify-content: flex-start; 83 align-items: flex-start; 84 height: 1000px; 85 width: 1080px; 86} 87``` 88 89 90 91Animation overlay 92 93``` 94<!-- xxx.hml --> 95<div class="container"> 96 <div class="back_container"> 97 <svg> 98 <polygon points="60,30 90,90 30,90" fill="black"> 99 <animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0; 200 200; 400 0; 100 600 200" keyTimes="0; 0.4; 0.8;1.0" dur="3s" repeatCount="indefinite"></animateTransform> 101 </polygon> 102 <polygon points="60,30 90,90 30,90" fill="green"> 103 <animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0; 200 200; 400 0; 104 600 200" keyTimes="0; 0.4; 0.8;1.0" dur="3s" repeatCount="indefinite"></animateTransform> 105 <animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0; 5; 0; 10" keyTimes="0; 106 0.4; 0.8; 1.0" dur="3s" repeatCount="indefinite"></animateTransform> 107 </polygon> 108 <polygon points="60,30 90,90 30,90" fill="blue"> 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="scale" values="1; 1.2; 1; 1.2" 112 keyTimes="0; 0.4; 0.8; 1.0" dur="3s" repeatCount="indefinite"></animateTransform> 113 </polygon> 114 <polygon points="60,30 90,90 30,90" fill="red"> 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 <animateTransform attributeName="transform" attributeType="XML" type="skewX" values="0; 10; 0; 10" 120 keyTimes="0; 0.4; 0.8; 1.0" dur="3s" repeatCount="indefinite"></animateTransform> 121 </polygon> 122 </svg> 123 </div> 124</div> 125``` 126 127``` 128/* xxx.css */ 129.container { 130 flex-direction: column; 131 justify-content: flex-start; 132 align-items: flex-start; 133 background-color: #f8f8ff; 134} 135.back_container { 136 flex-direction: row; 137 justify-content: flex-start; 138 align-items: flex-start; 139 height: 1000px; 140 width: 1080px; 141} 142``` 143 144 145 146Involved component example 147 148``` 149<!-- xxx.hml --> 150<div class="container"> 151 <div class="back_container"> 152 <svg> 153 <svg fill="white" width="600" height="600" viewBox="0 0 50 50"> 154 <path stroke="black" fill="none" stroke-linejoin="miter" stroke-miterlimit="1" id="p2" 155 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"> 156 <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="25" 157 dur="3s" repeatCount="indefinite"></animateTransform> 158 </path> 159 </svg> 160 <polygon points="60,20 90,80 30,80" fill="black"> 161 <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="300" 162 dur="3s" repeatCount="indefinite"></animateTransform> 163 </polygon> 164 <circle cx="60" cy="130" r="40" stroke-width="4" fill="white" stroke="blue"> 165 <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="300" 166 dur="3s" repeatCount="indefinite"></animateTransform> 167 </circle> 168 <line x1="10" x2="300" y1="280" y2="280" stroke-width="10" stroke="black" stroke-linecap="square"> 169 <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="300" 170 dur="3s" repeatCount="indefinite"></animateTransform> 171 </line> 172 <polyline points="10,380 50,335 50,385 100,310" fill="white" stroke="black"> 173 <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="300" 174 dur="3s" repeatCount="indefinite"></animateTransform> 175 </polyline> 176 <ellipse cx="100" cy="450" rx="70" ry="50" fill="blue"> 177 <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="300" 178 dur="3s" repeatCount="indefinite"></animateTransform> 179 </ellipse> 180 <rect width="100" height="100" x="50" y="540" stroke-width="10" stroke="red" rx="10" ry="10" 181 stroke-dasharray="5 3" stroke-dashoffset="3"> 182 <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="300" 183 dur="3s" repeatCount="indefinite"></animateTransform> 184 </rect> 185 <text x="20" y="700" fill="#D2691E" font-size="40"> 186 animate-transform 187 <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="300" 188 dur="3s" repeatCount="indefinite"></animateTransform> 189 </text> 190 </svg> 191 </div> 192</div> 193``` 194 195``` 196/* xxx.css */ 197.container { 198 flex-direction: column; 199 justify-content: flex-start; 200 align-items: flex-start; 201 background-color: #f8f8ff; 202} 203.back_container { 204 flex-direction: row; 205 justify-content: flex-start; 206 align-items: flex-start; 207 height: 1000px; 208 width: 1080px; 209} 210``` 211 212 213 214
