1# 动画<a name="ZH-CN_TOPIC_0000001209210725"></a> 2 3> **说明：** 4>从API Version 6 开始支持。 5 6## 导入模块<a name="zh-cn_topic_0000001127125026_s0e7b1e85a4274f58a8206e0b065bd80c"></a> 7 8requestAnimationFrame：无需导入 9 10cancelAnimationFrame：无需导入 11 12createAnimator： 13 14``` 15import animator from '@ohos.animator'; 16``` 17 18## 权限列表<a name="zh-cn_topic_0000001127125026_section11257113618419"></a> 19 20无 21 22## requestAnimationFrame<a name="zh-cn_topic_0000001127125026_s298a3cf59a3b470dbb0742706102ced7"></a> 23 24requestAnimationFrame\(handler\[, \[ ...args\]\]\): number 25 26请求动画帧，逐帧回调JS函数。 27 28- 参数 29 30 <a name="zh-cn_topic_0000001127125026_t87748b0ba4e648079d53f9deccf4bfb2"></a> 31 <table><thead align="left"><tr id="zh-cn_topic_0000001127125026_rc5033ad045c14c2e806d59041aab002c"><th class="cellrowborder" valign="top" width="12%" id="mcps1.1.5.1.1"><p id="zh-cn_topic_0000001127125026_acf783ab6043e4ee1a7bb73b73a091e0b"><a name="zh-cn_topic_0000001127125026_acf783ab6043e4ee1a7bb73b73a091e0b"></a><a name="zh-cn_topic_0000001127125026_acf783ab6043e4ee1a7bb73b73a091e0b"></a>参数名</p> 32 </th> 33 <th class="cellrowborder" valign="top" width="9%" id="mcps1.1.5.1.2"><p id="zh-cn_topic_0000001127125026_a6736505551534b819d5a6376065a25f6"><a name="zh-cn_topic_0000001127125026_a6736505551534b819d5a6376065a25f6"></a><a name="zh-cn_topic_0000001127125026_a6736505551534b819d5a6376065a25f6"></a>类型</p> 34 </th> 35 <th class="cellrowborder" valign="top" width="9%" id="mcps1.1.5.1.3"><p id="zh-cn_topic_0000001127125026_ac15c2a3de0e046af917cf09b48b3b46d"><a name="zh-cn_topic_0000001127125026_ac15c2a3de0e046af917cf09b48b3b46d"></a><a name="zh-cn_topic_0000001127125026_ac15c2a3de0e046af917cf09b48b3b46d"></a>必填</p> 36 </th> 37 <th class="cellrowborder" valign="top" width="70%" id="mcps1.1.5.1.4"><p id="zh-cn_topic_0000001127125026_aeb94b88e78974288bab1b4940b50c840"><a name="zh-cn_topic_0000001127125026_aeb94b88e78974288bab1b4940b50c840"></a><a name="zh-cn_topic_0000001127125026_aeb94b88e78974288bab1b4940b50c840"></a>说明</p> 38 </th> 39 </tr> 40 </thead> 41 <tbody><tr id="zh-cn_topic_0000001127125026_r95c56d5cd62d4b518c3e7a3f158ed7fe"><td class="cellrowborder" valign="top" width="12%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001127125026_a7af41aec9a404f418202d90c61774825"><a name="zh-cn_topic_0000001127125026_a7af41aec9a404f418202d90c61774825"></a><a name="zh-cn_topic_0000001127125026_a7af41aec9a404f418202d90c61774825"></a>handler</p> 42 </td> 43 <td class="cellrowborder" valign="top" width="9%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001127125026_aed6ae868d61349afa8f0e250108f8e47"><a name="zh-cn_topic_0000001127125026_aed6ae868d61349afa8f0e250108f8e47"></a><a name="zh-cn_topic_0000001127125026_aed6ae868d61349afa8f0e250108f8e47"></a>Function</p> 44 </td> 45 <td class="cellrowborder" valign="top" width="9%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001127125026_ab72ac8cc02e34da4b717ca144fc521c1"><a name="zh-cn_topic_0000001127125026_ab72ac8cc02e34da4b717ca144fc521c1"></a><a name="zh-cn_topic_0000001127125026_ab72ac8cc02e34da4b717ca144fc521c1"></a>是</p> 46 </td> 47 <td class="cellrowborder" valign="top" width="70%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001127125026_ac53e6549d32f413e9c51cd8a53f4650a"><a name="zh-cn_topic_0000001127125026_ac53e6549d32f413e9c51cd8a53f4650a"></a><a name="zh-cn_topic_0000001127125026_ac53e6549d32f413e9c51cd8a53f4650a"></a>表示要逐帧回调的函数。requestAnimationFrame函数回调handler函数时会在第一个参数位置传入timestamp时间戳。它表示requestAnimationFrame开始去执行回调函数的时刻。</p> 48 </td> 49 </tr> 50 <tr id="zh-cn_topic_0000001127125026_row8497154383016"><td class="cellrowborder" valign="top" width="12%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001127125026_p1497174316302"><a name="zh-cn_topic_0000001127125026_p1497174316302"></a><a name="zh-cn_topic_0000001127125026_p1497174316302"></a>...args</p> 51 </td> 52 <td class="cellrowborder" valign="top" width="9%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001127125026_p1649714393019"><a name="zh-cn_topic_0000001127125026_p1649714393019"></a><a name="zh-cn_topic_0000001127125026_p1649714393019"></a>Array<any></p> 53 </td> 54 <td class="cellrowborder" valign="top" width="9%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001127125026_p12498154363014"><a name="zh-cn_topic_0000001127125026_p12498154363014"></a><a name="zh-cn_topic_0000001127125026_p12498154363014"></a>否</p> 55 </td> 56 <td class="cellrowborder" valign="top" width="70%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001127125026_p049816437303"><a name="zh-cn_topic_0000001127125026_p049816437303"></a><a name="zh-cn_topic_0000001127125026_p049816437303"></a>附加参数，函数回调时，他们会作为参数传递给handler。</p> 57 </td> 58 </tr> 59 </tbody> 60 </table> 61 62- 返回值 63 64 <a name="zh-cn_topic_0000001127125026_table1430416594311"></a> 65 <table><thead align="left"><tr id="zh-cn_topic_0000001127125026_row230485973113"><th class="cellrowborder" valign="top" width="12.18%" id="mcps1.1.3.1.1"><p id="zh-cn_topic_0000001127125026_p430405913312"><a name="zh-cn_topic_0000001127125026_p430405913312"></a><a name="zh-cn_topic_0000001127125026_p430405913312"></a>类型</p> 66 </th> 67 <th class="cellrowborder" valign="top" width="87.82%" id="mcps1.1.3.1.2"><p id="zh-cn_topic_0000001127125026_p830413599312"><a name="zh-cn_topic_0000001127125026_p830413599312"></a><a name="zh-cn_topic_0000001127125026_p830413599312"></a>说明</p> 68 </th> 69 </tr> 70 </thead> 71 <tbody><tr id="zh-cn_topic_0000001127125026_row130435914317"><td class="cellrowborder" valign="top" width="12.18%" headers="mcps1.1.3.1.1 "><p id="zh-cn_topic_0000001127125026_p4305759143119"><a name="zh-cn_topic_0000001127125026_p4305759143119"></a><a name="zh-cn_topic_0000001127125026_p4305759143119"></a>number</p> 72 </td> 73 <td class="cellrowborder" valign="top" width="87.82%" headers="mcps1.1.3.1.2 "><p id="zh-cn_topic_0000001127125026_p130555923110"><a name="zh-cn_topic_0000001127125026_p130555923110"></a><a name="zh-cn_topic_0000001127125026_p130555923110"></a>requestID请求的ID。</p> 74 </td> 75 </tr> 76 </tbody> 77 </table> 78 79- 示例 80 81 ``` 82 data: { 83 requestId: 0, 84 startTime: 0, 85 }, 86 beginAnimation() { 87 cancelAnimationFrame(this.requestId); 88 this.requestId = requestAnimationFrame(this.runAnimation); 89 }, 90 runAnimation(timestamp) { 91 if (this.startTime == 0) { 92 this.startTime = timestamp; 93 } 94 var elapsed = timestamp - this.startTime; 95 if (elapsed < 500) { 96 console.log('callback handler timestamp: ' + timestamp); 97 this.requestId = requestAnimationFrame(this.runAnimation); 98 } 99 } 100 ``` 101 102 103## cancelAnimationFrame<a name="zh-cn_topic_0000001127125026_section114651915245"></a> 104 105cancelAnimationFrame\(requestId: number\): void 106 107取消动画帧，取消逐帧回调请求。 108 109- 参数 110 111 <a name="zh-cn_topic_0000001127125026_table25491571214"></a> 112 <table><thead align="left"><tr id="zh-cn_topic_0000001127125026_row1954910577117"><th class="cellrowborder" valign="top" width="12%" id="mcps1.1.5.1.1"><p id="zh-cn_topic_0000001127125026_p1854918574119"><a name="zh-cn_topic_0000001127125026_p1854918574119"></a><a name="zh-cn_topic_0000001127125026_p1854918574119"></a>参数名</p> 113 </th> 114 <th class="cellrowborder" valign="top" width="9%" id="mcps1.1.5.1.2"><p id="zh-cn_topic_0000001127125026_p17549195713119"><a name="zh-cn_topic_0000001127125026_p17549195713119"></a><a name="zh-cn_topic_0000001127125026_p17549195713119"></a>类型</p> 115 </th> 116 <th class="cellrowborder" valign="top" width="9%" id="mcps1.1.5.1.3"><p id="zh-cn_topic_0000001127125026_p1654910571912"><a name="zh-cn_topic_0000001127125026_p1654910571912"></a><a name="zh-cn_topic_0000001127125026_p1654910571912"></a>必填</p> 117 </th> 118 <th class="cellrowborder" valign="top" width="70%" id="mcps1.1.5.1.4"><p id="zh-cn_topic_0000001127125026_p185491057813"><a name="zh-cn_topic_0000001127125026_p185491057813"></a><a name="zh-cn_topic_0000001127125026_p185491057813"></a>说明</p> 119 </th> 120 </tr> 121 </thead> 122 <tbody><tr id="zh-cn_topic_0000001127125026_row05492571017"><td class="cellrowborder" valign="top" width="12%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001127125026_p11549057812"><a name="zh-cn_topic_0000001127125026_p11549057812"></a><a name="zh-cn_topic_0000001127125026_p11549057812"></a>requestId</p> 123 </td> 124 <td class="cellrowborder" valign="top" width="9%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001127125026_p1454910571915"><a name="zh-cn_topic_0000001127125026_p1454910571915"></a><a name="zh-cn_topic_0000001127125026_p1454910571915"></a>number</p> 125 </td> 126 <td class="cellrowborder" valign="top" width="9%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001127125026_p195491657811"><a name="zh-cn_topic_0000001127125026_p195491657811"></a><a name="zh-cn_topic_0000001127125026_p195491657811"></a>是</p> 127 </td> 128 <td class="cellrowborder" valign="top" width="70%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001127125026_p165492579116"><a name="zh-cn_topic_0000001127125026_p165492579116"></a><a name="zh-cn_topic_0000001127125026_p165492579116"></a>逐帧回调函数的标识id。</p> 129 </td> 130 </tr> 131 </tbody> 132 </table> 133 134- 示例 135 136 ``` 137 data: { 138 requestId: 0, 139 startTime: 0, 140 }, 141 beginAnimation() { 142 cancelAnimationFrame(this.requestId); 143 this.requestId = requestAnimationFrame(this.runAnimation); 144 }, 145 runAnimation(timestamp) { 146 if (this.startTime == 0) { 147 this.startTime = timestamp; 148 } 149 var elapsed = timestamp - this.startTime; 150 if (elapsed < 500) { 151 console.log('callback handler timestamp: ' + timestamp); 152 this.requestId = requestAnimationFrame(this.runAnimation); 153 } 154 }, 155 stopAnimation() { 156 cancelAnimationFrame(this.requestId); 157 } 158 ``` 159 160 161## createAnimator<a name="zh-cn_topic_0000001127125026_section333714110229"></a> 162 163createAnimator\(options\[...\]\): void 164 165创建动画对象。 166 167- 参数 168 169 <a name="zh-cn_topic_0000001127125026_table1210814218489"></a> 170 <table><thead align="left"><tr id="zh-cn_topic_0000001127125026_row16108162112483"><th class="cellrowborder" valign="top" width="12.030000000000001%" id="mcps1.1.5.1.1"><p id="zh-cn_topic_0000001127125026_p9108102124816"><a name="zh-cn_topic_0000001127125026_p9108102124816"></a><a name="zh-cn_topic_0000001127125026_p9108102124816"></a>参数名</p> 171 </th> 172 <th class="cellrowborder" valign="top" width="8.97%" id="mcps1.1.5.1.2"><p id="zh-cn_topic_0000001127125026_p15108921134810"><a name="zh-cn_topic_0000001127125026_p15108921134810"></a><a name="zh-cn_topic_0000001127125026_p15108921134810"></a>类型</p> 173 </th> 174 <th class="cellrowborder" valign="top" width="9%" id="mcps1.1.5.1.3"><p id="zh-cn_topic_0000001127125026_p610832174811"><a name="zh-cn_topic_0000001127125026_p610832174811"></a><a name="zh-cn_topic_0000001127125026_p610832174811"></a>必填</p> 175 </th> 176 <th class="cellrowborder" valign="top" width="70%" id="mcps1.1.5.1.4"><p id="zh-cn_topic_0000001127125026_p20109102115481"><a name="zh-cn_topic_0000001127125026_p20109102115481"></a><a name="zh-cn_topic_0000001127125026_p20109102115481"></a>说明</p> 177 </th> 178 </tr> 179 </thead> 180 <tbody><tr id="zh-cn_topic_0000001127125026_row111091721194810"><td class="cellrowborder" valign="top" width="12.030000000000001%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001127125026_p191091121114816"><a name="zh-cn_topic_0000001127125026_p191091121114816"></a><a name="zh-cn_topic_0000001127125026_p191091121114816"></a>options</p> 181 </td> 182 <td class="cellrowborder" valign="top" width="8.97%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001127125026_p51091212484"><a name="zh-cn_topic_0000001127125026_p51091212484"></a><a name="zh-cn_topic_0000001127125026_p51091212484"></a>Object</p> 183 </td> 184 <td class="cellrowborder" valign="top" width="9%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001127125026_p17109112111489"><a name="zh-cn_topic_0000001127125026_p17109112111489"></a><a name="zh-cn_topic_0000001127125026_p17109112111489"></a>是</p> 185 </td> 186 <td class="cellrowborder" valign="top" width="70%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001127125026_p9109221104814"><a name="zh-cn_topic_0000001127125026_p9109221104814"></a><a name="zh-cn_topic_0000001127125026_p9109221104814"></a>表示待创建Animator对象的属性，详情见下表options说明。</p> 187 </td> 188 </tr> 189 </tbody> 190 </table> 191 192- options说明 193 194 <a name="zh-cn_topic_0000001127125026_table185831411112210"></a> 195 <table><thead align="left"><tr id="zh-cn_topic_0000001127125026_row13579511112217"><th class="cellrowborder" valign="top" width="12%" id="mcps1.1.5.1.1"><p id="zh-cn_topic_0000001127125026_p6578111142211"><a name="zh-cn_topic_0000001127125026_p6578111142211"></a><a name="zh-cn_topic_0000001127125026_p6578111142211"></a>参数名</p> 196 </th> 197 <th class="cellrowborder" valign="top" width="10%" id="mcps1.1.5.1.2"><p id="zh-cn_topic_0000001127125026_p8578811182212"><a name="zh-cn_topic_0000001127125026_p8578811182212"></a><a name="zh-cn_topic_0000001127125026_p8578811182212"></a>类型</p> 198 </th> 199 <th class="cellrowborder" valign="top" width="8%" id="mcps1.1.5.1.3"><p id="zh-cn_topic_0000001127125026_p557961122219"><a name="zh-cn_topic_0000001127125026_p557961122219"></a><a name="zh-cn_topic_0000001127125026_p557961122219"></a>必填</p> 200 </th> 201 <th class="cellrowborder" valign="top" width="70%" id="mcps1.1.5.1.4"><p id="zh-cn_topic_0000001127125026_p14579101116224"><a name="zh-cn_topic_0000001127125026_p14579101116224"></a><a name="zh-cn_topic_0000001127125026_p14579101116224"></a>说明</p> 202 </th> 203 </tr> 204 </thead> 205 <tbody><tr id="zh-cn_topic_0000001127125026_row125801711102218"><td class="cellrowborder" valign="top" width="12%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001127125026_p1857912118220"><a name="zh-cn_topic_0000001127125026_p1857912118220"></a><a name="zh-cn_topic_0000001127125026_p1857912118220"></a>duration</p> 206 </td> 207 <td class="cellrowborder" valign="top" width="10%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001127125026_p45798110229"><a name="zh-cn_topic_0000001127125026_p45798110229"></a><a name="zh-cn_topic_0000001127125026_p45798110229"></a>number</p> 208 </td> 209 <td class="cellrowborder" valign="top" width="8%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001127125026_p35793112223"><a name="zh-cn_topic_0000001127125026_p35793112223"></a><a name="zh-cn_topic_0000001127125026_p35793112223"></a>否</p> 210 </td> 211 <td class="cellrowborder" valign="top" width="70%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001127125026_p17580011172219"><a name="zh-cn_topic_0000001127125026_p17580011172219"></a><a name="zh-cn_topic_0000001127125026_p17580011172219"></a>动画播放的时长，单位毫秒，默认为0。</p> 212 </td> 213 </tr> 214 <tr id="zh-cn_topic_0000001127125026_row55801511172212"><td class="cellrowborder" valign="top" width="12%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001127125026_p14580711152210"><a name="zh-cn_topic_0000001127125026_p14580711152210"></a><a name="zh-cn_topic_0000001127125026_p14580711152210"></a>easing</p> 215 </td> 216 <td class="cellrowborder" valign="top" width="10%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001127125026_p19580141112217"><a name="zh-cn_topic_0000001127125026_p19580141112217"></a><a name="zh-cn_topic_0000001127125026_p19580141112217"></a>string</p> 217 </td> 218 <td class="cellrowborder" valign="top" width="8%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001127125026_p658021122212"><a name="zh-cn_topic_0000001127125026_p658021122212"></a><a name="zh-cn_topic_0000001127125026_p658021122212"></a>否</p> 219 </td> 220 <td class="cellrowborder" valign="top" width="70%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001127125026_p18580121112212"><a name="zh-cn_topic_0000001127125026_p18580121112212"></a><a name="zh-cn_topic_0000001127125026_p18580121112212"></a>动画插值曲线，默认为' ease '。</p> 221 </td> 222 </tr> 223 <tr id="zh-cn_topic_0000001127125026_row558071118228"><td class="cellrowborder" valign="top" width="12%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001127125026_p1580111117227"><a name="zh-cn_topic_0000001127125026_p1580111117227"></a><a name="zh-cn_topic_0000001127125026_p1580111117227"></a>delay</p> 224 </td> 225 <td class="cellrowborder" valign="top" width="10%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001127125026_p6580111102215"><a name="zh-cn_topic_0000001127125026_p6580111102215"></a><a name="zh-cn_topic_0000001127125026_p6580111102215"></a>number</p> 226 </td> 227 <td class="cellrowborder" valign="top" width="8%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001127125026_p1258016113229"><a name="zh-cn_topic_0000001127125026_p1258016113229"></a><a name="zh-cn_topic_0000001127125026_p1258016113229"></a>否</p> 228 </td> 229 <td class="cellrowborder" valign="top" width="70%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001127125026_p858021152215"><a name="zh-cn_topic_0000001127125026_p858021152215"></a><a name="zh-cn_topic_0000001127125026_p858021152215"></a>动画延时播放时长，单位毫秒，默认为0，即不延时。</p> 230 </td> 231 </tr> 232 <tr id="zh-cn_topic_0000001127125026_row1358151113223"><td class="cellrowborder" valign="top" width="12%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001127125026_p1358119115228"><a name="zh-cn_topic_0000001127125026_p1358119115228"></a><a name="zh-cn_topic_0000001127125026_p1358119115228"></a>fill</p> 233 </td> 234 <td class="cellrowborder" valign="top" width="10%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001127125026_p15581211132210"><a name="zh-cn_topic_0000001127125026_p15581211132210"></a><a name="zh-cn_topic_0000001127125026_p15581211132210"></a>string</p> 235 </td> 236 <td class="cellrowborder" valign="top" width="8%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001127125026_p1458171119226"><a name="zh-cn_topic_0000001127125026_p1458171119226"></a><a name="zh-cn_topic_0000001127125026_p1458171119226"></a>否</p> 237 </td> 238 <td class="cellrowborder" valign="top" width="70%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001127125026_p185811411172213"><a name="zh-cn_topic_0000001127125026_p185811411172213"></a><a name="zh-cn_topic_0000001127125026_p185811411172213"></a>动画启停模式，默认值none，详情见：<a href="../../nottoctopics/zh-cn_topic_0000001173164765.md#p886655314713">animation-fill-mode</a></p> 239 </td> 240 </tr> 241 <tr id="zh-cn_topic_0000001127125026_row18581811142219"><td class="cellrowborder" valign="top" width="12%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001127125026_p75817112225"><a name="zh-cn_topic_0000001127125026_p75817112225"></a><a name="zh-cn_topic_0000001127125026_p75817112225"></a>direction</p> 242 </td> 243 <td class="cellrowborder" valign="top" width="10%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001127125026_p1258118115221"><a name="zh-cn_topic_0000001127125026_p1258118115221"></a><a name="zh-cn_topic_0000001127125026_p1258118115221"></a>string</p> 244 </td> 245 <td class="cellrowborder" valign="top" width="8%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001127125026_p17581211122213"><a name="zh-cn_topic_0000001127125026_p17581211122213"></a><a name="zh-cn_topic_0000001127125026_p17581211122213"></a>否</p> 246 </td> 247 <td class="cellrowborder" valign="top" width="70%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001127125026_p195811211152214"><a name="zh-cn_topic_0000001127125026_p195811211152214"></a><a name="zh-cn_topic_0000001127125026_p195811211152214"></a>动画播放模式，默认值normal，详情见：<a href="../../nottoctopics/zh-cn_topic_0000001173164765.md#p2611151295818">animation-direction</a></p> 248 </td> 249 </tr> 250 <tr id="zh-cn_topic_0000001127125026_row55821511122210"><td class="cellrowborder" valign="top" width="12%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001127125026_p16581171118226"><a name="zh-cn_topic_0000001127125026_p16581171118226"></a><a name="zh-cn_topic_0000001127125026_p16581171118226"></a>iterations</p> 251 </td> 252 <td class="cellrowborder" valign="top" width="10%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001127125026_p1582151113228"><a name="zh-cn_topic_0000001127125026_p1582151113228"></a><a name="zh-cn_topic_0000001127125026_p1582151113228"></a>number</p> 253 </td> 254 <td class="cellrowborder" valign="top" width="8%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001127125026_p205821311132214"><a name="zh-cn_topic_0000001127125026_p205821311132214"></a><a name="zh-cn_topic_0000001127125026_p205821311132214"></a>否</p> 255 </td> 256 <td class="cellrowborder" valign="top" width="70%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001127125026_p1458201118221"><a name="zh-cn_topic_0000001127125026_p1458201118221"></a><a name="zh-cn_topic_0000001127125026_p1458201118221"></a>动画播放次数，默认值1，设置为0时不播放，设置为-1时无限次播放。</p> 257 </td> 258 </tr> 259 <tr id="zh-cn_topic_0000001127125026_row1958211116223"><td class="cellrowborder" valign="top" width="12%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001127125026_p205821811152213"><a name="zh-cn_topic_0000001127125026_p205821811152213"></a><a name="zh-cn_topic_0000001127125026_p205821811152213"></a>begin</p> 260 </td> 261 <td class="cellrowborder" valign="top" width="10%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001127125026_p10582211122219"><a name="zh-cn_topic_0000001127125026_p10582211122219"></a><a name="zh-cn_topic_0000001127125026_p10582211122219"></a>number</p> 262 </td> 263 <td class="cellrowborder" valign="top" width="8%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001127125026_p758281111223"><a name="zh-cn_topic_0000001127125026_p758281111223"></a><a name="zh-cn_topic_0000001127125026_p758281111223"></a>否</p> 264 </td> 265 <td class="cellrowborder" valign="top" width="70%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001127125026_p105820113229"><a name="zh-cn_topic_0000001127125026_p105820113229"></a><a name="zh-cn_topic_0000001127125026_p105820113229"></a>动画插值起点，不设置时默认为0。</p> 266 </td> 267 </tr> 268 <tr id="zh-cn_topic_0000001127125026_row12583191192217"><td class="cellrowborder" valign="top" width="12%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001127125026_p55828118227"><a name="zh-cn_topic_0000001127125026_p55828118227"></a><a name="zh-cn_topic_0000001127125026_p55828118227"></a>end</p> 269 </td> 270 <td class="cellrowborder" valign="top" width="10%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001127125026_p1958231192220"><a name="zh-cn_topic_0000001127125026_p1958231192220"></a><a name="zh-cn_topic_0000001127125026_p1958231192220"></a>number</p> 271 </td> 272 <td class="cellrowborder" valign="top" width="8%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001127125026_p8582811132216"><a name="zh-cn_topic_0000001127125026_p8582811132216"></a><a name="zh-cn_topic_0000001127125026_p8582811132216"></a>否</p> 273 </td> 274 <td class="cellrowborder" valign="top" width="70%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001127125026_p195831211122216"><a name="zh-cn_topic_0000001127125026_p195831211122216"></a><a name="zh-cn_topic_0000001127125026_p195831211122216"></a>动画插值终点，不设置时默认为1。</p> 275 </td> 276 </tr> 277 </tbody> 278 </table> 279 280- animator支持的接口 281 282 <a name="zh-cn_topic_0000001127125026_table10586161118228"></a> 283 <table><thead align="left"><tr id="zh-cn_topic_0000001127125026_row16584611182210"><th class="cellrowborder" valign="top" width="15.57%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001127125026_p658331152213"><a name="zh-cn_topic_0000001127125026_p658331152213"></a><a name="zh-cn_topic_0000001127125026_p658331152213"></a>参数名</p> 284 </th> 285 <th class="cellrowborder" valign="top" width="11.899999999999999%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001127125026_p11583131119222"><a name="zh-cn_topic_0000001127125026_p11583131119222"></a><a name="zh-cn_topic_0000001127125026_p11583131119222"></a>类型</p> 286 </th> 287 <th class="cellrowborder" valign="top" width="72.53%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001127125026_p6583311102210"><a name="zh-cn_topic_0000001127125026_p6583311102210"></a><a name="zh-cn_topic_0000001127125026_p6583311102210"></a>说明</p> 288 </th> 289 </tr> 290 </thead> 291 <tbody><tr id="zh-cn_topic_0000001127125026_row2584511152213"><td class="cellrowborder" valign="top" width="15.57%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001127125026_p1658451192210"><a name="zh-cn_topic_0000001127125026_p1658451192210"></a><a name="zh-cn_topic_0000001127125026_p1658451192210"></a>update</p> 292 </td> 293 <td class="cellrowborder" valign="top" width="11.899999999999999%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001127125026_p458481114225"><a name="zh-cn_topic_0000001127125026_p458481114225"></a><a name="zh-cn_topic_0000001127125026_p458481114225"></a>options</p> 294 </td> 295 <td class="cellrowborder" valign="top" width="72.53%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001127125026_p15584161112214"><a name="zh-cn_topic_0000001127125026_p15584161112214"></a><a name="zh-cn_topic_0000001127125026_p15584161112214"></a>过程中可以使用这个接口更新动画参数，入参与createAnimator一致。</p> 296 </td> 297 </tr> 298 <tr id="zh-cn_topic_0000001127125026_row1758471118228"><td class="cellrowborder" valign="top" width="15.57%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001127125026_p9584181118221"><a name="zh-cn_topic_0000001127125026_p9584181118221"></a><a name="zh-cn_topic_0000001127125026_p9584181118221"></a>play</p> 299 </td> 300 <td class="cellrowborder" valign="top" width="11.899999999999999%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001127125026_p115841811122215"><a name="zh-cn_topic_0000001127125026_p115841811122215"></a><a name="zh-cn_topic_0000001127125026_p115841811122215"></a>-</p> 301 </td> 302 <td class="cellrowborder" valign="top" width="72.53%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001127125026_p758411111224"><a name="zh-cn_topic_0000001127125026_p758411111224"></a><a name="zh-cn_topic_0000001127125026_p758411111224"></a>开始动画。</p> 303 </td> 304 </tr> 305 <tr id="zh-cn_topic_0000001127125026_row155855111221"><td class="cellrowborder" valign="top" width="15.57%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001127125026_p205845117227"><a name="zh-cn_topic_0000001127125026_p205845117227"></a><a name="zh-cn_topic_0000001127125026_p205845117227"></a>finish</p> 306 </td> 307 <td class="cellrowborder" valign="top" width="11.899999999999999%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001127125026_p1584181122217"><a name="zh-cn_topic_0000001127125026_p1584181122217"></a><a name="zh-cn_topic_0000001127125026_p1584181122217"></a>-</p> 308 </td> 309 <td class="cellrowborder" valign="top" width="72.53%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001127125026_p12585101192212"><a name="zh-cn_topic_0000001127125026_p12585101192212"></a><a name="zh-cn_topic_0000001127125026_p12585101192212"></a>结束动画。</p> 310 </td> 311 </tr> 312 <tr id="zh-cn_topic_0000001127125026_row85851611122215"><td class="cellrowborder" valign="top" width="15.57%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001127125026_p858561115223"><a name="zh-cn_topic_0000001127125026_p858561115223"></a><a name="zh-cn_topic_0000001127125026_p858561115223"></a>pause</p> 313 </td> 314 <td class="cellrowborder" valign="top" width="11.899999999999999%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001127125026_p3585711102215"><a name="zh-cn_topic_0000001127125026_p3585711102215"></a><a name="zh-cn_topic_0000001127125026_p3585711102215"></a>-</p> 315 </td> 316 <td class="cellrowborder" valign="top" width="72.53%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001127125026_p1758510114227"><a name="zh-cn_topic_0000001127125026_p1758510114227"></a><a name="zh-cn_topic_0000001127125026_p1758510114227"></a>暂停动画。</p> 317 </td> 318 </tr> 319 <tr id="zh-cn_topic_0000001127125026_row8585611102219"><td class="cellrowborder" valign="top" width="15.57%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001127125026_p5585201172218"><a name="zh-cn_topic_0000001127125026_p5585201172218"></a><a name="zh-cn_topic_0000001127125026_p5585201172218"></a>cancel</p> 320 </td> 321 <td class="cellrowborder" valign="top" width="11.899999999999999%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001127125026_p458511117225"><a name="zh-cn_topic_0000001127125026_p458511117225"></a><a name="zh-cn_topic_0000001127125026_p458511117225"></a>-</p> 322 </td> 323 <td class="cellrowborder" valign="top" width="72.53%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001127125026_p17585911122213"><a name="zh-cn_topic_0000001127125026_p17585911122213"></a><a name="zh-cn_topic_0000001127125026_p17585911122213"></a>取消动画。</p> 324 </td> 325 </tr> 326 <tr id="zh-cn_topic_0000001127125026_row1358612115227"><td class="cellrowborder" valign="top" width="15.57%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001127125026_p1858571119222"><a name="zh-cn_topic_0000001127125026_p1858571119222"></a><a name="zh-cn_topic_0000001127125026_p1858571119222"></a>reverse</p> 327 </td> 328 <td class="cellrowborder" valign="top" width="11.899999999999999%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001127125026_p9585161152215"><a name="zh-cn_topic_0000001127125026_p9585161152215"></a><a name="zh-cn_topic_0000001127125026_p9585161152215"></a>-</p> 329 </td> 330 <td class="cellrowborder" valign="top" width="72.53%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001127125026_p458641172220"><a name="zh-cn_topic_0000001127125026_p458641172220"></a><a name="zh-cn_topic_0000001127125026_p458641172220"></a>倒播动画。</p> 331 </td> 332 </tr> 333 </tbody> 334 </table> 335 336 337- animator支持的事件： 338 339 <a name="zh-cn_topic_0000001127125026_table4588511132210"></a> 340 <table><thead align="left"><tr id="zh-cn_topic_0000001127125026_row19586141116227"><th class="cellrowborder" valign="top" width="15.57%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001127125026_p15586101111222"><a name="zh-cn_topic_0000001127125026_p15586101111222"></a><a name="zh-cn_topic_0000001127125026_p15586101111222"></a>参数名</p> 341 </th> 342 <th class="cellrowborder" valign="top" width="11.899999999999999%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001127125026_p1858671142217"><a name="zh-cn_topic_0000001127125026_p1858671142217"></a><a name="zh-cn_topic_0000001127125026_p1858671142217"></a>类型</p> 343 </th> 344 <th class="cellrowborder" valign="top" width="72.53%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001127125026_p1658681118229"><a name="zh-cn_topic_0000001127125026_p1658681118229"></a><a name="zh-cn_topic_0000001127125026_p1658681118229"></a>说明</p> 345 </th> 346 </tr> 347 </thead> 348 <tbody><tr id="zh-cn_topic_0000001127125026_row19587611102214"><td class="cellrowborder" valign="top" width="15.57%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001127125026_p15866114221"><a name="zh-cn_topic_0000001127125026_p15866114221"></a><a name="zh-cn_topic_0000001127125026_p15866114221"></a>frame</p> 349 </td> 350 <td class="cellrowborder" valign="top" width="11.899999999999999%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001127125026_p135862119221"><a name="zh-cn_topic_0000001127125026_p135862119221"></a><a name="zh-cn_topic_0000001127125026_p135862119221"></a>number</p> 351 </td> 352 <td class="cellrowborder" valign="top" width="72.53%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001127125026_p4586191119224"><a name="zh-cn_topic_0000001127125026_p4586191119224"></a><a name="zh-cn_topic_0000001127125026_p4586191119224"></a>逐帧插值回调事件，入参为当前帧的插值</p> 353 </td> 354 </tr> 355 <tr id="zh-cn_topic_0000001127125026_row15587161162211"><td class="cellrowborder" valign="top" width="15.57%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001127125026_p2058731119223"><a name="zh-cn_topic_0000001127125026_p2058731119223"></a><a name="zh-cn_topic_0000001127125026_p2058731119223"></a>cancel</p> 356 </td> 357 <td class="cellrowborder" valign="top" width="11.899999999999999%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001127125026_p058751172212"><a name="zh-cn_topic_0000001127125026_p058751172212"></a><a name="zh-cn_topic_0000001127125026_p058751172212"></a>-</p> 358 </td> 359 <td class="cellrowborder" valign="top" width="72.53%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001127125026_p1587121102211"><a name="zh-cn_topic_0000001127125026_p1587121102211"></a><a name="zh-cn_topic_0000001127125026_p1587121102211"></a>动画被强制取消</p> 360 </td> 361 </tr> 362 <tr id="zh-cn_topic_0000001127125026_row65871211192213"><td class="cellrowborder" valign="top" width="15.57%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001127125026_p8587141192219"><a name="zh-cn_topic_0000001127125026_p8587141192219"></a><a name="zh-cn_topic_0000001127125026_p8587141192219"></a>finish</p> 363 </td> 364 <td class="cellrowborder" valign="top" width="11.899999999999999%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001127125026_p8587211152212"><a name="zh-cn_topic_0000001127125026_p8587211152212"></a><a name="zh-cn_topic_0000001127125026_p8587211152212"></a>-</p> 365 </td> 366 <td class="cellrowborder" valign="top" width="72.53%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001127125026_p135870119227"><a name="zh-cn_topic_0000001127125026_p135870119227"></a><a name="zh-cn_topic_0000001127125026_p135870119227"></a>动画播放完成</p> 367 </td> 368 </tr> 369 <tr id="zh-cn_topic_0000001127125026_row175881011182210"><td class="cellrowborder" valign="top" width="15.57%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001127125026_p2587511182210"><a name="zh-cn_topic_0000001127125026_p2587511182210"></a><a name="zh-cn_topic_0000001127125026_p2587511182210"></a>repeat</p> 370 </td> 371 <td class="cellrowborder" valign="top" width="11.899999999999999%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001127125026_p17587511192218"><a name="zh-cn_topic_0000001127125026_p17587511192218"></a><a name="zh-cn_topic_0000001127125026_p17587511192218"></a>-</p> 372 </td> 373 <td class="cellrowborder" valign="top" width="72.53%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001127125026_p10587811202211"><a name="zh-cn_topic_0000001127125026_p10587811202211"></a><a name="zh-cn_topic_0000001127125026_p10587811202211"></a>动画重新播放</p> 374 </td> 375 </tr> 376 </tbody> 377 </table> 378 379- 示例 380 381 ``` 382 <!-- hml --> 383 <div class="container"> 384 <div class="Animation" style="height: {{divHeight}}px; width: {{divWidth}}px; background-color: red;" onclick="Show"> 385 </div> 386 </div> 387 ``` 388 389 ``` 390 // js 391 import Animator from "@ohos.animator"; 392 export default { 393 data : { 394 divWidth: 200, 395 divHeight: 200, 396 animator: null 397 }, 398 onInit() { 399 var options = { 400 duration: 1500, 401 easing: 'friction', 402 fill: 'forwards', 403 iterations: 2, 404 begin: 200.0, 405 end: 400.0 406 }; 407 this.animator = Animator.createAnimator(options); 408 }, 409 Show() { 410 var options1 = { 411 duration: 2000, 412 easing: 'friction', 413 fill: 'forwards', 414 iterations: 1, 415 begin: 200.0, 416 end: 400.0 417 }; 418 this.animator.update(options1); 419 var _this = this; 420 this.animator.onframe = function(value) { 421 _this.divWidth = value; 422 _this.divHeight = value; 423 }; 424 this.animator.play(); 425 } 426 } 427 ``` 428 429 430
