1# Component Methods<a name="EN-US_TOPIC_0000001115814810"></a> 2 3- [this.$element\('id'\).animate\(Object, Object\)](#en-us_topic_0000001058670837_section844805134319) 4 5After a component is assigned the **id** attribute, you can use the ID to obtain the component objects and call functions. 6 7<a name="en-us_topic_0000001058670837_t16791c2761d34150a3a89954b52d1453"></a> 8<table><thead align="left"><tr id="en-us_topic_0000001058670837_r0148773c052c4f38bef9962bc22a16bf"><th class="cellrowborder" valign="top" width="13.888611138886112%" id="mcps1.1.7.1.1"><p id="en-us_topic_0000001058670837_ab430207c41eb4593a9fff4377fd60b27"><a name="en-us_topic_0000001058670837_ab430207c41eb4593a9fff4377fd60b27"></a><a name="en-us_topic_0000001058670837_ab430207c41eb4593a9fff4377fd60b27"></a>Name</p> 9</th> 10<th class="cellrowborder" valign="top" width="25.947405259474053%" id="mcps1.1.7.1.2"><p id="en-us_topic_0000001058670837_adadb9fe3ee9d45ab8e55fad0a56ec311"><a name="en-us_topic_0000001058670837_adadb9fe3ee9d45ab8e55fad0a56ec311"></a><a name="en-us_topic_0000001058670837_adadb9fe3ee9d45ab8e55fad0a56ec311"></a>Parameter</p> 11</th> 12<th class="cellrowborder" valign="top" width="7.429257074292571%" id="mcps1.1.7.1.3"><p id="en-us_topic_0000001058670837_p5451162571712"><a name="en-us_topic_0000001058670837_p5451162571712"></a><a name="en-us_topic_0000001058670837_p5451162571712"></a>Mandatory</p> 13</th> 14<th class="cellrowborder" valign="top" width="9.2990700929907%" id="mcps1.1.7.1.4"><p id="en-us_topic_0000001058670837_ac36b82e7a5e14fb68f8dfc4d3a3aeee6"><a name="en-us_topic_0000001058670837_ac36b82e7a5e14fb68f8dfc4d3a3aeee6"></a><a name="en-us_topic_0000001058670837_ac36b82e7a5e14fb68f8dfc4d3a3aeee6"></a>Default Value</p> 15</th> 16<th class="cellrowborder" valign="top" width="7.519248075192481%" id="mcps1.1.7.1.5"><p id="en-us_topic_0000001058670837_p17256161265111"><a name="en-us_topic_0000001058670837_p17256161265111"></a><a name="en-us_topic_0000001058670837_p17256161265111"></a>Return Value</p> 17</th> 18<th class="cellrowborder" valign="top" width="35.91640835916409%" id="mcps1.1.7.1.6"><p id="en-us_topic_0000001058670837_a7a0dfce144d445e19289835b2e4c8697"><a name="en-us_topic_0000001058670837_a7a0dfce144d445e19289835b2e4c8697"></a><a name="en-us_topic_0000001058670837_a7a0dfce144d445e19289835b2e4c8697"></a>Description</p> 19</th> 20</tr> 21</thead> 22<tbody><tr id="en-us_topic_0000001058670837_row48146221457"><td class="cellrowborder" valign="top" width="13.888611138886112%" headers="mcps1.1.7.1.1 "><p id="en-us_topic_0000001058670837_p168151422164511"><a name="en-us_topic_0000001058670837_p168151422164511"></a><a name="en-us_topic_0000001058670837_p168151422164511"></a>animate</p> 23<p id="en-us_topic_0000001058670837_p564915003620"><a name="en-us_topic_0000001058670837_p564915003620"></a><a name="en-us_topic_0000001058670837_p564915003620"></a></p> 24</td> 25<td class="cellrowborder" valign="top" width="25.947405259474053%" headers="mcps1.1.7.1.2 "><a name="en-us_topic_0000001058670837_ul97434919115"></a><a name="en-us_topic_0000001058670837_ul97434919115"></a><ul id="en-us_topic_0000001058670837_ul97434919115"><li>Object: <strong id="en-us_topic_0000001058670837_b84447498345"><a name="en-us_topic_0000001058670837_b84447498345"></a><a name="en-us_topic_0000001058670837_b84447498345"></a>keyframes</strong> is used to describe key frame parameters of the animation.</li><li>Object: <strong id="en-us_topic_0000001058670837_b15678137133510"><a name="en-us_topic_0000001058670837_b15678137133510"></a><a name="en-us_topic_0000001058670837_b15678137133510"></a>options</strong> is used to describe animation parameters.</li></ul> 26</td> 27<td class="cellrowborder" valign="top" width="7.429257074292571%" headers="mcps1.1.7.1.3 "><p id="en-us_topic_0000001058670837_p108159229458"><a name="en-us_topic_0000001058670837_p108159229458"></a><a name="en-us_topic_0000001058670837_p108159229458"></a>Yes</p> 28</td> 29<td class="cellrowborder" valign="top" width="9.2990700929907%" headers="mcps1.1.7.1.4 "><p id="en-us_topic_0000001058670837_p1181532216456"><a name="en-us_topic_0000001058670837_p1181532216456"></a><a name="en-us_topic_0000001058670837_p1181532216456"></a>-</p> 30</td> 31<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.7.1.5 "><p id="en-us_topic_0000001058670837_p6256112155112"><a name="en-us_topic_0000001058670837_p6256112155112"></a><a name="en-us_topic_0000001058670837_p6256112155112"></a>-</p> 32</td> 33<td class="cellrowborder" valign="top" width="35.91640835916409%" headers="mcps1.1.7.1.6 "><p id="en-us_topic_0000001058670837_p15815102244511"><a name="en-us_topic_0000001058670837_p15815102244511"></a><a name="en-us_topic_0000001058670837_p15815102244511"></a>Creates and runs an animation shortcut on the component. Specify the <strong id="en-us_topic_0000001058670837_b635643723719"><a name="en-us_topic_0000001058670837_b635643723719"></a><a name="en-us_topic_0000001058670837_b635643723719"></a>keyframes</strong> and <strong id="en-us_topic_0000001058670837_b1335713377375"><a name="en-us_topic_0000001058670837_b1335713377375"></a><a name="en-us_topic_0000001058670837_b1335713377375"></a>options</strong> required for the animation. This method returns the animation object.</p> 34</td> 35</tr> 36</tbody> 37</table> 38 39## this.$element\('_id_'\).animate\(Object, Object\)<a name="en-us_topic_0000001058670837_section844805134319"></a> 40 41You can use the **animate\(keyframes, options\)** method to obtain an animation object. This object supports properties, methods, and events of the animation component. If **animate** is called for multiple times and the replace policy is used, parameters passed to the last call will take effect. 42 43- keyframes 44 45 <a name="en-us_topic_0000001058670837_table1491078445"></a> 46 <table><thead align="left"><tr id="en-us_topic_0000001058670837_row159311381240"><th class="cellrowborder" valign="top" width="23.56%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058670837_p79311181544"><a name="en-us_topic_0000001058670837_p79311181544"></a><a name="en-us_topic_0000001058670837_p79311181544"></a>Parameter</p> 47 </th> 48 <th class="cellrowborder" valign="top" width="23.95%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058670837_p19311818417"><a name="en-us_topic_0000001058670837_p19311818417"></a><a name="en-us_topic_0000001058670837_p19311818417"></a>Type</p> 49 </th> 50 <th class="cellrowborder" valign="top" width="52.49%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058670837_p17931185415"><a name="en-us_topic_0000001058670837_p17931185415"></a><a name="en-us_topic_0000001058670837_p17931185415"></a>Description</p> 51 </th> 52 </tr> 53 </thead> 54 <tbody><tr id="en-us_topic_0000001058670837_row993198749"><td class="cellrowborder" valign="top" width="23.56%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058670837_p10931080410"><a name="en-us_topic_0000001058670837_p10931080410"></a><a name="en-us_topic_0000001058670837_p10931080410"></a>frames</p> 55 </td> 56 <td class="cellrowborder" valign="top" width="23.95%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058670837_p1493113816413"><a name="en-us_topic_0000001058670837_p1493113816413"></a><a name="en-us_topic_0000001058670837_p1493113816413"></a>Array<Style></p> 57 </td> 58 <td class="cellrowborder" valign="top" width="52.49%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058670837_p15171240102918"><a name="en-us_topic_0000001058670837_p15171240102918"></a><a name="en-us_topic_0000001058670837_p15171240102918"></a>Array of objects used to set animation style attributes. For details about style attributes, see <a href="#en-us_topic_0000001058670837_table29075541349">Style attributes</a>.</p> 59 </td> 60 </tr> 61 </tbody> 62 </table> 63 64 **Table 1** Style attributes 65 66 <a name="en-us_topic_0000001058670837_table29075541349"></a> 67 <table><thead align="left"><tr id="en-us_topic_0000001058670837_row1961954543"><th class="cellrowborder" valign="top" width="22.91%" id="mcps1.2.5.1.1"><p id="en-us_topic_0000001058670837_p119614542419"><a name="en-us_topic_0000001058670837_p119614542419"></a><a name="en-us_topic_0000001058670837_p119614542419"></a>Parameter</p> 68 </th> 69 <th class="cellrowborder" valign="top" width="10.61%" id="mcps1.2.5.1.2"><p id="en-us_topic_0000001058670837_p2961954840"><a name="en-us_topic_0000001058670837_p2961954840"></a><a name="en-us_topic_0000001058670837_p2961954840"></a>Type</p> 70 </th> 71 <th class="cellrowborder" valign="top" width="24.58%" id="mcps1.2.5.1.3"><p id="en-us_topic_0000001058670837_p15961145416415"><a name="en-us_topic_0000001058670837_p15961145416415"></a><a name="en-us_topic_0000001058670837_p15961145416415"></a>Default Value</p> 72 </th> 73 <th class="cellrowborder" valign="top" width="41.9%" id="mcps1.2.5.1.4"><p id="en-us_topic_0000001058670837_p1196118542410"><a name="en-us_topic_0000001058670837_p1196118542410"></a><a name="en-us_topic_0000001058670837_p1196118542410"></a>Description</p> 74 </th> 75 </tr> 76 </thead> 77 <tbody><tr id="en-us_topic_0000001058670837_row1796113541041"><td class="cellrowborder" valign="top" width="22.91%" headers="mcps1.2.5.1.1 "><p id="en-us_topic_0000001058670837_p129615545417"><a name="en-us_topic_0000001058670837_p129615545417"></a><a name="en-us_topic_0000001058670837_p129615545417"></a>width</p> 78 </td> 79 <td class="cellrowborder" valign="top" width="10.61%" headers="mcps1.2.5.1.2 "><p id="en-us_topic_0000001058670837_p1296111541345"><a name="en-us_topic_0000001058670837_p1296111541345"></a><a name="en-us_topic_0000001058670837_p1296111541345"></a>number</p> 80 </td> 81 <td class="cellrowborder" valign="top" width="24.58%" headers="mcps1.2.5.1.3 "><p id="en-us_topic_0000001058670837_p296117541140"><a name="en-us_topic_0000001058670837_p296117541140"></a><a name="en-us_topic_0000001058670837_p296117541140"></a>-</p> 82 </td> 83 <td class="cellrowborder" valign="top" width="41.9%" headers="mcps1.2.5.1.4 "><p id="en-us_topic_0000001058670837_p1296112541247"><a name="en-us_topic_0000001058670837_p1296112541247"></a><a name="en-us_topic_0000001058670837_p1296112541247"></a>Width set for the component during playback of the animation.</p> 84 </td> 85 </tr> 86 <tr id="en-us_topic_0000001058670837_row149616548418"><td class="cellrowborder" valign="top" width="22.91%" headers="mcps1.2.5.1.1 "><p id="en-us_topic_0000001058670837_p14961654846"><a name="en-us_topic_0000001058670837_p14961654846"></a><a name="en-us_topic_0000001058670837_p14961654846"></a>height</p> 87 </td> 88 <td class="cellrowborder" valign="top" width="10.61%" headers="mcps1.2.5.1.2 "><p id="en-us_topic_0000001058670837_p1296113545416"><a name="en-us_topic_0000001058670837_p1296113545416"></a><a name="en-us_topic_0000001058670837_p1296113545416"></a>number</p> 89 </td> 90 <td class="cellrowborder" valign="top" width="24.58%" headers="mcps1.2.5.1.3 "><p id="en-us_topic_0000001058670837_p11462818125515"><a name="en-us_topic_0000001058670837_p11462818125515"></a><a name="en-us_topic_0000001058670837_p11462818125515"></a>-</p> 91 </td> 92 <td class="cellrowborder" valign="top" width="41.9%" headers="mcps1.2.5.1.4 "><p id="en-us_topic_0000001058670837_p1696216541448"><a name="en-us_topic_0000001058670837_p1696216541448"></a><a name="en-us_topic_0000001058670837_p1696216541448"></a>Height set for the component during playback of the animation.</p> 93 </td> 94 </tr> 95 <tr id="en-us_topic_0000001058670837_row1962754242"><td class="cellrowborder" valign="top" width="22.91%" headers="mcps1.2.5.1.1 "><p id="en-us_topic_0000001058670837_p14962145418411"><a name="en-us_topic_0000001058670837_p14962145418411"></a><a name="en-us_topic_0000001058670837_p14962145418411"></a>backgroundColor</p> 96 </td> 97 <td class="cellrowborder" valign="top" width="10.61%" headers="mcps1.2.5.1.2 "><p id="en-us_topic_0000001058670837_p09628541446"><a name="en-us_topic_0000001058670837_p09628541446"></a><a name="en-us_topic_0000001058670837_p09628541446"></a><color></p> 98 </td> 99 <td class="cellrowborder" valign="top" width="24.58%" headers="mcps1.2.5.1.3 "><p id="en-us_topic_0000001058670837_p39621754042"><a name="en-us_topic_0000001058670837_p39621754042"></a><a name="en-us_topic_0000001058670837_p39621754042"></a>none</p> 100 </td> 101 <td class="cellrowborder" valign="top" width="41.9%" headers="mcps1.2.5.1.4 "><p id="en-us_topic_0000001058670837_p11962125420412"><a name="en-us_topic_0000001058670837_p11962125420412"></a><a name="en-us_topic_0000001058670837_p11962125420412"></a>Background color set for the component during playback of the animation.</p> 102 </td> 103 </tr> 104 <tr id="en-us_topic_0000001058670837_row99623548410"><td class="cellrowborder" valign="top" width="22.91%" headers="mcps1.2.5.1.1 "><p id="en-us_topic_0000001058670837_p1896216541345"><a name="en-us_topic_0000001058670837_p1896216541345"></a><a name="en-us_topic_0000001058670837_p1896216541345"></a>opacity</p> 105 </td> 106 <td class="cellrowborder" valign="top" width="10.61%" headers="mcps1.2.5.1.2 "><p id="en-us_topic_0000001058670837_p12409238152914"><a name="en-us_topic_0000001058670837_p12409238152914"></a><a name="en-us_topic_0000001058670837_p12409238152914"></a>number</p> 107 </td> 108 <td class="cellrowborder" valign="top" width="24.58%" headers="mcps1.2.5.1.3 "><p id="en-us_topic_0000001058670837_p6962354649"><a name="en-us_topic_0000001058670837_p6962354649"></a><a name="en-us_topic_0000001058670837_p6962354649"></a>1</p> 109 </td> 110 <td class="cellrowborder" valign="top" width="41.9%" headers="mcps1.2.5.1.4 "><p id="en-us_topic_0000001058670837_p1696275417410"><a name="en-us_topic_0000001058670837_p1696275417410"></a><a name="en-us_topic_0000001058670837_p1696275417410"></a>Opacity set for the component. The value ranges from <strong id="en-us_topic_0000001058670837_b76363459372"><a name="en-us_topic_0000001058670837_b76363459372"></a><a name="en-us_topic_0000001058670837_b76363459372"></a>0</strong> to <strong id="en-us_topic_0000001058670837_b1964116457373"><a name="en-us_topic_0000001058670837_b1964116457373"></a><a name="en-us_topic_0000001058670837_b1964116457373"></a>1</strong>.</p> 111 </td> 112 </tr> 113 <tr id="en-us_topic_0000001058670837_row6141915145917"><td class="cellrowborder" valign="top" width="22.91%" headers="mcps1.2.5.1.1 "><p id="en-us_topic_0000001058670837_p14778012599"><a name="en-us_topic_0000001058670837_p14778012599"></a><a name="en-us_topic_0000001058670837_p14778012599"></a>backgroundPosition</p> 114 </td> 115 <td class="cellrowborder" valign="top" width="10.61%" headers="mcps1.2.5.1.2 "><p id="en-us_topic_0000001058670837_p151419151591"><a name="en-us_topic_0000001058670837_p151419151591"></a><a name="en-us_topic_0000001058670837_p151419151591"></a>string</p> 116 </td> 117 <td class="cellrowborder" valign="top" width="24.58%" headers="mcps1.2.5.1.3 "><p id="en-us_topic_0000001058670837_p11551505916"><a name="en-us_topic_0000001058670837_p11551505916"></a><a name="en-us_topic_0000001058670837_p11551505916"></a>-</p> 118 </td> 119 <td class="cellrowborder" valign="top" width="41.9%" headers="mcps1.2.5.1.4 "><p id="en-us_topic_0000001058670837_p615181514596"><a name="en-us_topic_0000001058670837_p615181514596"></a><a name="en-us_topic_0000001058670837_p615181514596"></a>The value format is <strong id="en-us_topic_0000001058670837_b49364643719"><a name="en-us_topic_0000001058670837_b49364643719"></a><a name="en-us_topic_0000001058670837_b49364643719"></a>x y</strong>, in percentage or pixels.</p> 120 <p id="en-us_topic_0000001058670837_p74641623022"><a name="en-us_topic_0000001058670837_p74641623022"></a><a name="en-us_topic_0000001058670837_p74641623022"></a>The first value indicates the horizontal position, and the second value indicates the vertical position.</p> 121 <p id="en-us_topic_0000001058670837_p5609351927"><a name="en-us_topic_0000001058670837_p5609351927"></a><a name="en-us_topic_0000001058670837_p5609351927"></a>If only one value is specified, the other value is <strong id="en-us_topic_0000001058670837_b2860446193717"><a name="en-us_topic_0000001058670837_b2860446193717"></a><a name="en-us_topic_0000001058670837_b2860446193717"></a>50%</strong> by default.</p> 122 </td> 123 </tr> 124 <tr id="en-us_topic_0000001058670837_row8962754643"><td class="cellrowborder" valign="top" width="22.91%" headers="mcps1.2.5.1.1 "><p id="en-us_topic_0000001058670837_p7962145414417"><a name="en-us_topic_0000001058670837_p7962145414417"></a><a name="en-us_topic_0000001058670837_p7962145414417"></a>transformOrigin</p> 125 </td> 126 <td class="cellrowborder" valign="top" width="10.61%" headers="mcps1.2.5.1.2 "><p id="en-us_topic_0000001058670837_p896213541048"><a name="en-us_topic_0000001058670837_p896213541048"></a><a name="en-us_topic_0000001058670837_p896213541048"></a>string</p> 127 </td> 128 <td class="cellrowborder" valign="top" width="24.58%" headers="mcps1.2.5.1.3 "><p id="en-us_topic_0000001058670837_p169621454340"><a name="en-us_topic_0000001058670837_p169621454340"></a><a name="en-us_topic_0000001058670837_p169621454340"></a>'center center'</p> 129 </td> 130 <td class="cellrowborder" valign="top" width="41.9%" headers="mcps1.2.5.1.4 "><p id="en-us_topic_0000001058670837_p12962115415412"><a name="en-us_topic_0000001058670837_p12962115415412"></a><a name="en-us_topic_0000001058670837_p12962115415412"></a>Origin position of the transformed element.</p> 131 <p id="en-us_topic_0000001058670837_p193331521134020"><a name="en-us_topic_0000001058670837_p193331521134020"></a><a name="en-us_topic_0000001058670837_p193331521134020"></a>The first value indicates the x-axis position. The value can be <strong id="en-us_topic_0000001058670837_b20914191218395"><a name="en-us_topic_0000001058670837_b20914191218395"></a><a name="en-us_topic_0000001058670837_b20914191218395"></a>left</strong>, <strong id="en-us_topic_0000001058670837_b16915141233913"><a name="en-us_topic_0000001058670837_b16915141233913"></a><a name="en-us_topic_0000001058670837_b16915141233913"></a>center</strong>, <strong id="en-us_topic_0000001058670837_b1591571233911"><a name="en-us_topic_0000001058670837_b1591571233911"></a><a name="en-us_topic_0000001058670837_b1591571233911"></a>right</strong>, a length, or a percentage.</p> 132 <p id="en-us_topic_0000001058670837_p6457202144018"><a name="en-us_topic_0000001058670837_p6457202144018"></a><a name="en-us_topic_0000001058670837_p6457202144018"></a>The second value indicates the y-axis position. The value can be <strong id="en-us_topic_0000001058670837_b15935411173916"><a name="en-us_topic_0000001058670837_b15935411173916"></a><a name="en-us_topic_0000001058670837_b15935411173916"></a>top</strong>, <strong id="en-us_topic_0000001058670837_b994031111394"><a name="en-us_topic_0000001058670837_b994031111394"></a><a name="en-us_topic_0000001058670837_b994031111394"></a>center</strong>, <strong id="en-us_topic_0000001058670837_b19411111163910"><a name="en-us_topic_0000001058670837_b19411111163910"></a><a name="en-us_topic_0000001058670837_b19411111163910"></a>bottom</strong>, a length, or a percentage.</p> 133 </td> 134 </tr> 135 <tr id="en-us_topic_0000001058670837_row496214548419"><td class="cellrowborder" valign="top" width="22.91%" headers="mcps1.2.5.1.1 "><p id="en-us_topic_0000001058670837_p139621354144"><a name="en-us_topic_0000001058670837_p139621354144"></a><a name="en-us_topic_0000001058670837_p139621354144"></a>transform</p> 136 </td> 137 <td class="cellrowborder" valign="top" width="10.61%" headers="mcps1.2.5.1.2 "><p id="en-us_topic_0000001058670837_p189624543418"><a name="en-us_topic_0000001058670837_p189624543418"></a><a name="en-us_topic_0000001058670837_p189624543418"></a><a href="animation-styles.md#en-us_topic_0000001058830799_table28802443315">Transform</a></p> 138 </td> 139 <td class="cellrowborder" valign="top" width="24.58%" headers="mcps1.2.5.1.3 "><p id="en-us_topic_0000001058670837_p1896218541242"><a name="en-us_topic_0000001058670837_p1896218541242"></a><a name="en-us_topic_0000001058670837_p1896218541242"></a>-</p> 140 </td> 141 <td class="cellrowborder" valign="top" width="41.9%" headers="mcps1.2.5.1.4 "><p id="en-us_topic_0000001058670837_p19962454547"><a name="en-us_topic_0000001058670837_p19962454547"></a><a name="en-us_topic_0000001058670837_p19962454547"></a>Transformation type set for a transformed element.</p> 142 </td> 143 </tr> 144 <tr id="en-us_topic_0000001058670837_row18717853325"><td class="cellrowborder" valign="top" width="22.91%" headers="mcps1.2.5.1.1 "><p id="en-us_topic_0000001058670837_p197170513218"><a name="en-us_topic_0000001058670837_p197170513218"></a><a name="en-us_topic_0000001058670837_p197170513218"></a>offset</p> 145 </td> 146 <td class="cellrowborder" valign="top" width="10.61%" headers="mcps1.2.5.1.2 "><p id="en-us_topic_0000001058670837_p207175553213"><a name="en-us_topic_0000001058670837_p207175553213"></a><a name="en-us_topic_0000001058670837_p207175553213"></a>number</p> 147 </td> 148 <td class="cellrowborder" valign="top" width="24.58%" headers="mcps1.2.5.1.3 "><p id="en-us_topic_0000001058670837_p1171719518322"><a name="en-us_topic_0000001058670837_p1171719518322"></a><a name="en-us_topic_0000001058670837_p1171719518322"></a>-</p> 149 </td> 150 <td class="cellrowborder" valign="top" width="41.9%" headers="mcps1.2.5.1.4 "><a name="en-us_topic_0000001058670837_ul768313101318"></a><a name="en-us_topic_0000001058670837_ul768313101318"></a><ul id="en-us_topic_0000001058670837_ul768313101318"><li>The value of <strong id="en-us_topic_0000001058670837_b0754154863713"><a name="en-us_topic_0000001058670837_b0754154863713"></a><a name="en-us_topic_0000001058670837_b0754154863713"></a>offset</strong> must be within (0.0,1.0] and sorted in ascending order if it is provided.</li><li>If there are only two frames, <strong id="en-us_topic_0000001058670837_b10139164983712"><a name="en-us_topic_0000001058670837_b10139164983712"></a><a name="en-us_topic_0000001058670837_b10139164983712"></a>offset</strong> can be left empty.</li><li>If there are more than two frames, <strong id="en-us_topic_0000001058670837_b1271014953717"><a name="en-us_topic_0000001058670837_b1271014953717"></a><a name="en-us_topic_0000001058670837_b1271014953717"></a>offset</strong> is mandatory.</li></ul> 151 </td> 152 </tr> 153 </tbody> 154 </table> 155 156 157- options attributes 158 159 <a name="en-us_topic_0000001058670837_table1712913269619"></a> 160 <table><thead align="left"><tr id="en-us_topic_0000001058670837_row3169626264"><th class="cellrowborder" valign="top" width="25%" id="mcps1.1.5.1.1"><p id="en-us_topic_0000001058670837_p111694262068"><a name="en-us_topic_0000001058670837_p111694262068"></a><a name="en-us_topic_0000001058670837_p111694262068"></a>Parameter</p> 161 </th> 162 <th class="cellrowborder" valign="top" width="25%" id="mcps1.1.5.1.2"><p id="en-us_topic_0000001058670837_p101691267618"><a name="en-us_topic_0000001058670837_p101691267618"></a><a name="en-us_topic_0000001058670837_p101691267618"></a>Type</p> 163 </th> 164 <th class="cellrowborder" valign="top" width="25%" id="mcps1.1.5.1.3"><p id="en-us_topic_0000001058670837_p171699268617"><a name="en-us_topic_0000001058670837_p171699268617"></a><a name="en-us_topic_0000001058670837_p171699268617"></a>Default Value</p> 165 </th> 166 <th class="cellrowborder" valign="top" width="25%" id="mcps1.1.5.1.4"><p id="en-us_topic_0000001058670837_p816916264611"><a name="en-us_topic_0000001058670837_p816916264611"></a><a name="en-us_topic_0000001058670837_p816916264611"></a>Description</p> 167 </th> 168 </tr> 169 </thead> 170 <tbody><tr id="en-us_topic_0000001058670837_row1816912611616"><td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.1 "><p id="en-us_topic_0000001058670837_p1716918267611"><a name="en-us_topic_0000001058670837_p1716918267611"></a><a name="en-us_topic_0000001058670837_p1716918267611"></a>duration</p> 171 </td> 172 <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.2 "><p id="en-us_topic_0000001058670837_p1216917260615"><a name="en-us_topic_0000001058670837_p1216917260615"></a><a name="en-us_topic_0000001058670837_p1216917260615"></a>number</p> 173 </td> 174 <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.3 "><p id="en-us_topic_0000001058670837_p21694261366"><a name="en-us_topic_0000001058670837_p21694261366"></a><a name="en-us_topic_0000001058670837_p21694261366"></a>0</p> 175 </td> 176 <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.4 "><p id="en-us_topic_0000001058670837_p1816917261763"><a name="en-us_topic_0000001058670837_p1816917261763"></a><a name="en-us_topic_0000001058670837_p1816917261763"></a>Duration for playing the animation, in milliseconds.</p> 177 </td> 178 </tr> 179 <tr id="en-us_topic_0000001058670837_row5169172616611"><td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.1 "><p id="en-us_topic_0000001058670837_p16169182610613"><a name="en-us_topic_0000001058670837_p16169182610613"></a><a name="en-us_topic_0000001058670837_p16169182610613"></a>easing</p> 180 </td> 181 <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.2 "><p id="en-us_topic_0000001058670837_p171691526966"><a name="en-us_topic_0000001058670837_p171691526966"></a><a name="en-us_topic_0000001058670837_p171691526966"></a>string</p> 182 </td> 183 <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.3 "><p id="en-us_topic_0000001058670837_p316913261769"><a name="en-us_topic_0000001058670837_p316913261769"></a><a name="en-us_topic_0000001058670837_p316913261769"></a>linear</p> 184 </td> 185 <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.4 "><p id="en-us_topic_0000001058670837_p91704263615"><a name="en-us_topic_0000001058670837_p91704263615"></a><a name="en-us_topic_0000001058670837_p91704263615"></a>Time curve of the animation. For details about the supported types, see <a href="#en-us_topic_0000001058670837_table333619566611">Available values of the easing attribute</a>.</p> 186 </td> 187 </tr> 188 <tr id="en-us_topic_0000001058670837_row1417032616613"><td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.1 "><p id="en-us_topic_0000001058670837_p1917011266616"><a name="en-us_topic_0000001058670837_p1917011266616"></a><a name="en-us_topic_0000001058670837_p1917011266616"></a>delay</p> 189 </td> 190 <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.2 "><p id="en-us_topic_0000001058670837_p101701826863"><a name="en-us_topic_0000001058670837_p101701826863"></a><a name="en-us_topic_0000001058670837_p101701826863"></a>number</p> 191 </td> 192 <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.3 "><p id="en-us_topic_0000001058670837_p2170172616616"><a name="en-us_topic_0000001058670837_p2170172616616"></a><a name="en-us_topic_0000001058670837_p2170172616616"></a>0</p> 193 </td> 194 <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.4 "><p id="en-us_topic_0000001058670837_p1617013261364"><a name="en-us_topic_0000001058670837_p1617013261364"></a><a name="en-us_topic_0000001058670837_p1617013261364"></a>Delay for the animation start. The default value indicates no delay.</p> 195 </td> 196 </tr> 197 <tr id="en-us_topic_0000001058670837_row1217013262613"><td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.1 "><p id="en-us_topic_0000001058670837_p21701526462"><a name="en-us_topic_0000001058670837_p21701526462"></a><a name="en-us_topic_0000001058670837_p21701526462"></a>iterations</p> 198 </td> 199 <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.2 "><p id="en-us_topic_0000001058670837_p1376895573910"><a name="en-us_topic_0000001058670837_p1376895573910"></a><a name="en-us_topic_0000001058670837_p1376895573910"></a>number | string</p> 200 </td> 201 <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.3 "><p id="en-us_topic_0000001058670837_p151701526064"><a name="en-us_topic_0000001058670837_p151701526064"></a><a name="en-us_topic_0000001058670837_p151701526064"></a>1</p> 202 </td> 203 <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.4 "><p id="en-us_topic_0000001058670837_p917062619617"><a name="en-us_topic_0000001058670837_p917062619617"></a><a name="en-us_topic_0000001058670837_p917062619617"></a>Number of times the animation will be played. <strong id="en-us_topic_0000001058670837_b1119019523812"><a name="en-us_topic_0000001058670837_b1119019523812"></a><a name="en-us_topic_0000001058670837_b1119019523812"></a>number</strong> indicates a fixed number of playback operations, and <strong id="en-us_topic_0000001058670837_b319110563816"><a name="en-us_topic_0000001058670837_b319110563816"></a><a name="en-us_topic_0000001058670837_b319110563816"></a>Infinity</strong> indicates an unlimited number of playback operations.</p> 204 </td> 205 </tr> 206 <tr id="en-us_topic_0000001058670837_row3170192617615"><td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.1 "><p id="en-us_topic_0000001058670837_p121708261267"><a name="en-us_topic_0000001058670837_p121708261267"></a><a name="en-us_topic_0000001058670837_p121708261267"></a>fill</p> 207 </td> 208 <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.2 "><p id="en-us_topic_0000001058670837_p417011261765"><a name="en-us_topic_0000001058670837_p417011261765"></a><a name="en-us_topic_0000001058670837_p417011261765"></a>string</p> 209 </td> 210 <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.3 "><p id="en-us_topic_0000001058670837_p1617022612616"><a name="en-us_topic_0000001058670837_p1617022612616"></a><a name="en-us_topic_0000001058670837_p1617022612616"></a>none</p> 211 </td> 212 <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.4 "><p id="en-us_topic_0000001058670837_p1971424075711"><a name="en-us_topic_0000001058670837_p1971424075711"></a><a name="en-us_topic_0000001058670837_p1971424075711"></a>Start and end styles of the animation</p> 213 <p id="en-us_topic_0000001058670837_p471416406576"><a name="en-us_topic_0000001058670837_p471416406576"></a><a name="en-us_topic_0000001058670837_p471416406576"></a><strong id="en-us_topic_0000001058670837_b1223953919471"><a name="en-us_topic_0000001058670837_b1223953919471"></a><a name="en-us_topic_0000001058670837_b1223953919471"></a>none</strong>: No style is applied to the target before or after the animation is executed.</p> 214 <p id="en-us_topic_0000001058670837_p371416405575"><a name="en-us_topic_0000001058670837_p371416405575"></a><a name="en-us_topic_0000001058670837_p371416405575"></a><strong id="en-us_topic_0000001058670837_b16571436154715"><a name="en-us_topic_0000001058670837_b16571436154715"></a><a name="en-us_topic_0000001058670837_b16571436154715"></a>forwards</strong>: The target keeps the state at the end of the animation (defined in the last key frame) after the animation is executed.</p> 215 </td> 216 </tr> 217 </tbody> 218 </table> 219 220 **Table 2** Available values of the easing attribute 221 222 <a name="en-us_topic_0000001058670837_table333619566611"></a> 223 <table><thead align="left"><tr id="en-us_topic_0000001058670837_row19392195612614"><th class="cellrowborder" valign="top" width="50%" id="mcps1.2.3.1.1"><p id="en-us_topic_0000001058670837_p23927561168"><a name="en-us_topic_0000001058670837_p23927561168"></a><a name="en-us_topic_0000001058670837_p23927561168"></a>Type</p> 224 </th> 225 <th class="cellrowborder" valign="top" width="50%" id="mcps1.2.3.1.2"><p id="en-us_topic_0000001058670837_p83924562061"><a name="en-us_topic_0000001058670837_p83924562061"></a><a name="en-us_topic_0000001058670837_p83924562061"></a>Description</p> 226 </th> 227 </tr> 228 </thead> 229 <tbody><tr id="en-us_topic_0000001058670837_row039210561966"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="en-us_topic_0000001058670837_p18392145619610"><a name="en-us_topic_0000001058670837_p18392145619610"></a><a name="en-us_topic_0000001058670837_p18392145619610"></a>linear</p> 230 </td> 231 <td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="en-us_topic_0000001058670837_p18393256963"><a name="en-us_topic_0000001058670837_p18393256963"></a><a name="en-us_topic_0000001058670837_p18393256963"></a>The animation speed keeps unchanged.</p> 232 </td> 233 </tr> 234 <tr id="en-us_topic_0000001058670837_row203934561665"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="en-us_topic_0000001058670837_p539314563614"><a name="en-us_topic_0000001058670837_p539314563614"></a><a name="en-us_topic_0000001058670837_p539314563614"></a>ease-in</p> 235 </td> 236 <td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="en-us_topic_0000001058670837_p5393185617615"><a name="en-us_topic_0000001058670837_p5393185617615"></a><a name="en-us_topic_0000001058670837_p5393185617615"></a>The animation starts at a low speed. <strong id="en-us_topic_0000001058670837_b378417512383"><a name="en-us_topic_0000001058670837_b378417512383"></a><a name="en-us_topic_0000001058670837_b378417512383"></a>cubic-bezier(0.42, 0.0, 1.0, 1.0)</strong>.</p> 237 </td> 238 </tr> 239 <tr id="en-us_topic_0000001058670837_row9393185610620"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="en-us_topic_0000001058670837_p639311569615"><a name="en-us_topic_0000001058670837_p639311569615"></a><a name="en-us_topic_0000001058670837_p639311569615"></a>ease-out</p> 240 </td> 241 <td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="en-us_topic_0000001058670837_p639315620619"><a name="en-us_topic_0000001058670837_p639315620619"></a><a name="en-us_topic_0000001058670837_p639315620619"></a>The animation ends at a low speed. <strong id="en-us_topic_0000001058670837_b715465119387"><a name="en-us_topic_0000001058670837_b715465119387"></a><a name="en-us_topic_0000001058670837_b715465119387"></a>cubic-bezier(0.0, 0.0, 0.58, 1.0)</strong>.</p> 242 </td> 243 </tr> 244 <tr id="en-us_topic_0000001058670837_row4393956664"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="en-us_topic_0000001058670837_p7393856160"><a name="en-us_topic_0000001058670837_p7393856160"></a><a name="en-us_topic_0000001058670837_p7393856160"></a>ease-in-out</p> 245 </td> 246 <td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="en-us_topic_0000001058670837_p2039311561561"><a name="en-us_topic_0000001058670837_p2039311561561"></a><a name="en-us_topic_0000001058670837_p2039311561561"></a>The animation starts and ends at a low speed. <strong id="en-us_topic_0000001058670837_b1526650183812"><a name="en-us_topic_0000001058670837_b1526650183812"></a><a name="en-us_topic_0000001058670837_b1526650183812"></a>cubic-bezier(0.42, 0.0, 0.58, 1.0)</strong>.</p> 247 </td> 248 </tr> 249 <tr id="en-us_topic_0000001058670837_row43934562061"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="en-us_topic_0000001058670837_p13931656662"><a name="en-us_topic_0000001058670837_p13931656662"></a><a name="en-us_topic_0000001058670837_p13931656662"></a>friction</p> 250 </td> 251 <td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="en-us_topic_0000001058670837_p339315562064"><a name="en-us_topic_0000001058670837_p339315562064"></a><a name="en-us_topic_0000001058670837_p339315562064"></a>Damping curve, <strong id="en-us_topic_0000001058670837_b2065404720381"><a name="en-us_topic_0000001058670837_b2065404720381"></a><a name="en-us_topic_0000001058670837_b2065404720381"></a>cubic-bezier(0.2, 0.0, 0.2, 1.0)</strong>.</p> 252 </td> 253 </tr> 254 <tr id="en-us_topic_0000001058670837_row2039345616616"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="en-us_topic_0000001058670837_p43936565617"><a name="en-us_topic_0000001058670837_p43936565617"></a><a name="en-us_topic_0000001058670837_p43936565617"></a>extreme-deceleration</p> 255 </td> 256 <td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="en-us_topic_0000001058670837_p6393956065"><a name="en-us_topic_0000001058670837_p6393956065"></a><a name="en-us_topic_0000001058670837_p6393956065"></a>Extreme deceleration curve, <strong id="en-us_topic_0000001058670837_b84625466389"><a name="en-us_topic_0000001058670837_b84625466389"></a><a name="en-us_topic_0000001058670837_b84625466389"></a>cubic-bezier(0.0, 0.0, 0.0, 1.0)</strong>.</p> 257 </td> 258 </tr> 259 <tr id="en-us_topic_0000001058670837_row163933564615"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="en-us_topic_0000001058670837_p73947561967"><a name="en-us_topic_0000001058670837_p73947561967"></a><a name="en-us_topic_0000001058670837_p73947561967"></a>sharp</p> 260 </td> 261 <td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="en-us_topic_0000001058670837_p20394165617615"><a name="en-us_topic_0000001058670837_p20394165617615"></a><a name="en-us_topic_0000001058670837_p20394165617615"></a>Sharp curve, <strong id="en-us_topic_0000001058670837_b13866045193817"><a name="en-us_topic_0000001058670837_b13866045193817"></a><a name="en-us_topic_0000001058670837_b13866045193817"></a>cubic-bezier(0.33, 0.0, 0.67, 1.0)</strong>.</p> 262 </td> 263 </tr> 264 <tr id="en-us_topic_0000001058670837_row639413561566"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="en-us_topic_0000001058670837_p339417561663"><a name="en-us_topic_0000001058670837_p339417561663"></a><a name="en-us_topic_0000001058670837_p339417561663"></a>rhythm</p> 265 </td> 266 <td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="en-us_topic_0000001058670837_p839465611617"><a name="en-us_topic_0000001058670837_p839465611617"></a><a name="en-us_topic_0000001058670837_p839465611617"></a>Rhythm curve, <strong id="en-us_topic_0000001058670837_b1230104513388"><a name="en-us_topic_0000001058670837_b1230104513388"></a><a name="en-us_topic_0000001058670837_b1230104513388"></a>cubic-bezier(0.7, 0.0, 0.2, 1.0)</strong>.</p> 267 </td> 268 </tr> 269 <tr id="en-us_topic_0000001058670837_row13949567614"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="en-us_topic_0000001058670837_p1539465619615"><a name="en-us_topic_0000001058670837_p1539465619615"></a><a name="en-us_topic_0000001058670837_p1539465619615"></a>smooth</p> 270 </td> 271 <td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="en-us_topic_0000001058670837_p193943561869"><a name="en-us_topic_0000001058670837_p193943561869"></a><a name="en-us_topic_0000001058670837_p193943561869"></a>Smooth curve, <strong id="en-us_topic_0000001058670837_b8396144416387"><a name="en-us_topic_0000001058670837_b8396144416387"></a><a name="en-us_topic_0000001058670837_b8396144416387"></a>cubic-bezier(0.4, 0.0, 0.4, 1.0)</strong>.</p> 272 </td> 273 </tr> 274 <tr id="en-us_topic_0000001058670837_row1239419567619"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="en-us_topic_0000001058670837_p93949565611"><a name="en-us_topic_0000001058670837_p93949565611"></a><a name="en-us_topic_0000001058670837_p93949565611"></a>cubic-bezier(x1, y1, x2, y2)</p> 275 </td> 276 <td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="en-us_topic_0000001058670837_p53949561367"><a name="en-us_topic_0000001058670837_p53949561367"></a><a name="en-us_topic_0000001058670837_p53949561367"></a>You can customize an animation speed curve in the <strong id="en-us_topic_0000001058670837_b55061643143812"><a name="en-us_topic_0000001058670837_b55061643143812"></a><a name="en-us_topic_0000001058670837_b55061643143812"></a>cubic-bezier()</strong> function. The x and y values of each input parameter must be between 0 and 1.</p> 277 </td> 278 </tr> 279 <tr id="en-us_topic_0000001058670837_row6122121135610"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="en-us_topic_0000001058670837_p412312119563"><a name="en-us_topic_0000001058670837_p412312119563"></a><a name="en-us_topic_0000001058670837_p412312119563"></a>steps(number, step-position)</p> 280 </td> 281 <td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="en-us_topic_0000001058670837_p136207354569"><a name="en-us_topic_0000001058670837_p136207354569"></a><a name="en-us_topic_0000001058670837_p136207354569"></a>Step curve.</p> 282 <p id="en-us_topic_0000001058670837_p1620173511567"><a name="en-us_topic_0000001058670837_p1620173511567"></a><a name="en-us_topic_0000001058670837_p1620173511567"></a>The <strong id="en-us_topic_0000001058670837_b1284724173817"><a name="en-us_topic_0000001058670837_b1284724173817"></a><a name="en-us_topic_0000001058670837_b1284724173817"></a>number</strong> must be set and only an integer is supported.</p> 283 <p id="en-us_topic_0000001058670837_p1762063510562"><a name="en-us_topic_0000001058670837_p1762063510562"></a><a name="en-us_topic_0000001058670837_p1762063510562"></a><strong id="en-us_topic_0000001058670837_b641613384388"><a name="en-us_topic_0000001058670837_b641613384388"></a><a name="en-us_topic_0000001058670837_b641613384388"></a>step-position</strong> is optional. It can be set to <strong id="en-us_topic_0000001058670837_b1942217380382"><a name="en-us_topic_0000001058670837_b1942217380382"></a><a name="en-us_topic_0000001058670837_b1942217380382"></a>start</strong> or <strong id="en-us_topic_0000001058670837_b1742333823814"><a name="en-us_topic_0000001058670837_b1742333823814"></a><a name="en-us_topic_0000001058670837_b1742333823814"></a>end</strong>. The default value is <strong id="en-us_topic_0000001058670837_b1842373863819"><a name="en-us_topic_0000001058670837_b1842373863819"></a><a name="en-us_topic_0000001058670837_b1842373863819"></a>end</strong>.</p> 284 </td> 285 </tr> 286 </tbody> 287 </table> 288 289 290- Return value 291 292 Attributes supported by the animation object 293 294 <a name="en-us_topic_0000001058670837_table11261733574"></a> 295 <table><thead align="left"><tr id="en-us_topic_0000001058670837_row2029411331076"><th class="cellrowborder" valign="top" width="16.48%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058670837_p629463316716"><a name="en-us_topic_0000001058670837_p629463316716"></a><a name="en-us_topic_0000001058670837_p629463316716"></a>Attribute</p> 296 </th> 297 <th class="cellrowborder" valign="top" width="20.46%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058670837_p129411331718"><a name="en-us_topic_0000001058670837_p129411331718"></a><a name="en-us_topic_0000001058670837_p129411331718"></a>Type</p> 298 </th> 299 <th class="cellrowborder" valign="top" width="63.06%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058670837_p11294123317716"><a name="en-us_topic_0000001058670837_p11294123317716"></a><a name="en-us_topic_0000001058670837_p11294123317716"></a>Description</p> 300 </th> 301 </tr> 302 </thead> 303 <tbody><tr id="en-us_topic_0000001058670837_row1429417331711"><td class="cellrowborder" valign="top" width="16.48%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058670837_p1429416331375"><a name="en-us_topic_0000001058670837_p1429416331375"></a><a name="en-us_topic_0000001058670837_p1429416331375"></a>finished</p> 304 </td> 305 <td class="cellrowborder" valign="top" width="20.46%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058670837_p52943334720"><a name="en-us_topic_0000001058670837_p52943334720"></a><a name="en-us_topic_0000001058670837_p52943334720"></a>boolean</p> 306 </td> 307 <td class="cellrowborder" valign="top" width="63.06%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058670837_p7294233876"><a name="en-us_topic_0000001058670837_p7294233876"></a><a name="en-us_topic_0000001058670837_p7294233876"></a>Read-only attribute, which indicates whether the animation playback is complete.</p> 308 </td> 309 </tr> 310 <tr id="en-us_topic_0000001058670837_row493817253419"><td class="cellrowborder" valign="top" width="16.48%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058670837_p593913251444"><a name="en-us_topic_0000001058670837_p593913251444"></a><a name="en-us_topic_0000001058670837_p593913251444"></a>pending</p> 311 </td> 312 <td class="cellrowborder" valign="top" width="20.46%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058670837_p2939925349"><a name="en-us_topic_0000001058670837_p2939925349"></a><a name="en-us_topic_0000001058670837_p2939925349"></a>boolean</p> 313 </td> 314 <td class="cellrowborder" valign="top" width="63.06%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058670837_p293911251414"><a name="en-us_topic_0000001058670837_p293911251414"></a><a name="en-us_topic_0000001058670837_p293911251414"></a>Read-only attribute, which indicates whether the animation is waiting for the completion of other asynchronous operations (for example, start an animation with a delay).</p> 315 </td> 316 </tr> 317 <tr id="en-us_topic_0000001058670837_row11294123313714"><td class="cellrowborder" valign="top" width="16.48%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058670837_p22943339718"><a name="en-us_topic_0000001058670837_p22943339718"></a><a name="en-us_topic_0000001058670837_p22943339718"></a>playState</p> 318 </td> 319 <td class="cellrowborder" valign="top" width="20.46%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058670837_p1129403315713"><a name="en-us_topic_0000001058670837_p1129403315713"></a><a name="en-us_topic_0000001058670837_p1129403315713"></a>string</p> 320 </td> 321 <td class="cellrowborder" valign="top" width="63.06%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058670837_p1529417331719"><a name="en-us_topic_0000001058670837_p1529417331719"></a><a name="en-us_topic_0000001058670837_p1529417331719"></a>Read-write attribute, which indicates the playback status of the animation:</p> 322 <a name="en-us_topic_0000001058670837_ul854516488179"></a><a name="en-us_topic_0000001058670837_ul854516488179"></a><ul id="en-us_topic_0000001058670837_ul854516488179"><li><strong id="en-us_topic_0000001058670837_b111155323383"><a name="en-us_topic_0000001058670837_b111155323383"></a><a name="en-us_topic_0000001058670837_b111155323383"></a>idle</strong>: The animation is not running (playback ended or not started).</li><li><strong id="en-us_topic_0000001058670837_b16562194011527"><a name="en-us_topic_0000001058670837_b16562194011527"></a><a name="en-us_topic_0000001058670837_b16562194011527"></a>running</strong>: The animation is running.</li><li><strong id="en-us_topic_0000001058670837_b1262634712524"><a name="en-us_topic_0000001058670837_b1262634712524"></a><a name="en-us_topic_0000001058670837_b1262634712524"></a>paused</strong>: The animation is paused.</li><li><strong id="en-us_topic_0000001058670837_b9892827103810"><a name="en-us_topic_0000001058670837_b9892827103810"></a><a name="en-us_topic_0000001058670837_b9892827103810"></a>finished</strong>: Animation playback ends.</li></ul> 323 </td> 324 </tr> 325 <tr id="en-us_topic_0000001058670837_row1581113368516"><td class="cellrowborder" valign="top" width="16.48%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058670837_p128116361853"><a name="en-us_topic_0000001058670837_p128116361853"></a><a name="en-us_topic_0000001058670837_p128116361853"></a>startTime</p> 326 </td> 327 <td class="cellrowborder" valign="top" width="20.46%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058670837_p1281118361053"><a name="en-us_topic_0000001058670837_p1281118361053"></a><a name="en-us_topic_0000001058670837_p1281118361053"></a>number</p> 328 </td> 329 <td class="cellrowborder" valign="top" width="63.06%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058670837_p1581133616512"><a name="en-us_topic_0000001058670837_p1581133616512"></a><a name="en-us_topic_0000001058670837_p1581133616512"></a>Read-write attribute, which indicates the animation start time. This attribute is similar to <strong id="en-us_topic_0000001058670837_b1099302618382"><a name="en-us_topic_0000001058670837_b1099302618382"></a><a name="en-us_topic_0000001058670837_b1099302618382"></a>delay</strong> in the <strong id="en-us_topic_0000001058670837_b149981261389"><a name="en-us_topic_0000001058670837_b149981261389"></a><a name="en-us_topic_0000001058670837_b149981261389"></a>options</strong> attribute.</p> 330 </td> 331 </tr> 332 </tbody> 333 </table> 334 335 Methods supported by the animation object 336 337 <a name="en-us_topic_0000001058670837_table17991117817"></a> 338 <table><thead align="left"><tr id="en-us_topic_0000001058670837_row18321722815"><th class="cellrowborder" valign="top" width="30.86%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058670837_p9322211811"><a name="en-us_topic_0000001058670837_p9322211811"></a><a name="en-us_topic_0000001058670837_p9322211811"></a>Method</p> 339 </th> 340 <th class="cellrowborder" valign="top" width="10.58%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058670837_p53272783"><a name="en-us_topic_0000001058670837_p53272783"></a><a name="en-us_topic_0000001058670837_p53272783"></a>Parameter</p> 341 </th> 342 <th class="cellrowborder" valign="top" width="58.56%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058670837_p7321921788"><a name="en-us_topic_0000001058670837_p7321921788"></a><a name="en-us_topic_0000001058670837_p7321921788"></a>Description</p> 343 </th> 344 </tr> 345 </thead> 346 <tbody><tr id="en-us_topic_0000001058670837_row632623816"><td class="cellrowborder" valign="top" width="30.86%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058670837_p0321827812"><a name="en-us_topic_0000001058670837_p0321827812"></a><a name="en-us_topic_0000001058670837_p0321827812"></a>play</p> 347 </td> 348 <td class="cellrowborder" valign="top" width="10.58%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058670837_p20321121812"><a name="en-us_topic_0000001058670837_p20321121812"></a><a name="en-us_topic_0000001058670837_p20321121812"></a>-</p> 349 </td> 350 <td class="cellrowborder" valign="top" width="58.56%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058670837_p103222388"><a name="en-us_topic_0000001058670837_p103222388"></a><a name="en-us_topic_0000001058670837_p103222388"></a>Plays the animation.</p> 351 </td> 352 </tr> 353 <tr id="en-us_topic_0000001058670837_row12321721285"><td class="cellrowborder" valign="top" width="30.86%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058670837_p1632321988"><a name="en-us_topic_0000001058670837_p1632321988"></a><a name="en-us_topic_0000001058670837_p1632321988"></a>finish</p> 354 </td> 355 <td class="cellrowborder" valign="top" width="10.58%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058670837_p832162782"><a name="en-us_topic_0000001058670837_p832162782"></a><a name="en-us_topic_0000001058670837_p832162782"></a>-</p> 356 </td> 357 <td class="cellrowborder" valign="top" width="58.56%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058670837_p1329219819"><a name="en-us_topic_0000001058670837_p1329219819"></a><a name="en-us_topic_0000001058670837_p1329219819"></a>Ends the animation.</p> 358 </td> 359 </tr> 360 <tr id="en-us_topic_0000001058670837_row12321421087"><td class="cellrowborder" valign="top" width="30.86%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058670837_p18331421383"><a name="en-us_topic_0000001058670837_p18331421383"></a><a name="en-us_topic_0000001058670837_p18331421383"></a>pause</p> 361 </td> 362 <td class="cellrowborder" valign="top" width="10.58%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058670837_p7332218813"><a name="en-us_topic_0000001058670837_p7332218813"></a><a name="en-us_topic_0000001058670837_p7332218813"></a>-</p> 363 </td> 364 <td class="cellrowborder" valign="top" width="58.56%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058670837_p63317211815"><a name="en-us_topic_0000001058670837_p63317211815"></a><a name="en-us_topic_0000001058670837_p63317211815"></a>Pauses the animation.</p> 365 </td> 366 </tr> 367 <tr id="en-us_topic_0000001058670837_row153318215815"><td class="cellrowborder" valign="top" width="30.86%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058670837_p2331021080"><a name="en-us_topic_0000001058670837_p2331021080"></a><a name="en-us_topic_0000001058670837_p2331021080"></a>cancel</p> 368 </td> 369 <td class="cellrowborder" valign="top" width="10.58%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058670837_p1133422818"><a name="en-us_topic_0000001058670837_p1133422818"></a><a name="en-us_topic_0000001058670837_p1133422818"></a>-</p> 370 </td> 371 <td class="cellrowborder" valign="top" width="58.56%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058670837_p533162482"><a name="en-us_topic_0000001058670837_p533162482"></a><a name="en-us_topic_0000001058670837_p533162482"></a>Cancels the animation.</p> 372 </td> 373 </tr> 374 <tr id="en-us_topic_0000001058670837_row833142687"><td class="cellrowborder" valign="top" width="30.86%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058670837_p113313216816"><a name="en-us_topic_0000001058670837_p113313216816"></a><a name="en-us_topic_0000001058670837_p113313216816"></a>reverse</p> 375 </td> 376 <td class="cellrowborder" valign="top" width="10.58%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058670837_p17331321689"><a name="en-us_topic_0000001058670837_p17331321689"></a><a name="en-us_topic_0000001058670837_p17331321689"></a>-</p> 377 </td> 378 <td class="cellrowborder" valign="top" width="58.56%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058670837_p1733521285"><a name="en-us_topic_0000001058670837_p1733521285"></a><a name="en-us_topic_0000001058670837_p1733521285"></a>Plays the animation in reverse.</p> 379 </td> 380 </tr> 381 </tbody> 382 </table> 383 384 Events supported by the animation object 385 386 <a name="en-us_topic_0000001058670837_table42538381785"></a> 387 <table><thead align="left"><tr id="en-us_topic_0000001058670837_row16274163811819"><th class="cellrowborder" valign="top" width="20.810000000000002%" id="mcps1.1.3.1.1"><p id="en-us_topic_0000001058670837_p13274123816814"><a name="en-us_topic_0000001058670837_p13274123816814"></a><a name="en-us_topic_0000001058670837_p13274123816814"></a>Event</p> 388 </th> 389 <th class="cellrowborder" valign="top" width="79.19%" id="mcps1.1.3.1.2"><p id="en-us_topic_0000001058670837_p7274163812815"><a name="en-us_topic_0000001058670837_p7274163812815"></a><a name="en-us_topic_0000001058670837_p7274163812815"></a>Description</p> 390 </th> 391 </tr> 392 </thead> 393 <tbody><tr id="en-us_topic_0000001058670837_row12749389813"><td class="cellrowborder" valign="top" width="20.810000000000002%" headers="mcps1.1.3.1.1 "><p id="en-us_topic_0000001058670837_p1927412381487"><a name="en-us_topic_0000001058670837_p1927412381487"></a><a name="en-us_topic_0000001058670837_p1927412381487"></a>cancel</p> 394 </td> 395 <td class="cellrowborder" valign="top" width="79.19%" headers="mcps1.1.3.1.2 "><p id="en-us_topic_0000001058670837_p17274203812816"><a name="en-us_topic_0000001058670837_p17274203812816"></a><a name="en-us_topic_0000001058670837_p17274203812816"></a>The animation is forcibly canceled.</p> 396 </td> 397 </tr> 398 <tr id="en-us_topic_0000001058670837_row13274938488"><td class="cellrowborder" valign="top" width="20.810000000000002%" headers="mcps1.1.3.1.1 "><p id="en-us_topic_0000001058670837_p1727412383815"><a name="en-us_topic_0000001058670837_p1727412383815"></a><a name="en-us_topic_0000001058670837_p1727412383815"></a>finish</p> 399 </td> 400 <td class="cellrowborder" valign="top" width="79.19%" headers="mcps1.1.3.1.2 "><p id="en-us_topic_0000001058670837_p1327416383814"><a name="en-us_topic_0000001058670837_p1327416383814"></a><a name="en-us_topic_0000001058670837_p1327416383814"></a>The animation playback is complete.</p> 401 </td> 402 </tr> 403 <tr id="en-us_topic_0000001058670837_row7836145011411"><td class="cellrowborder" valign="top" width="20.810000000000002%" headers="mcps1.1.3.1.1 "><p id="en-us_topic_0000001058670837_p208371050154117"><a name="en-us_topic_0000001058670837_p208371050154117"></a><a name="en-us_topic_0000001058670837_p208371050154117"></a>repeat</p> 404 </td> 405 <td class="cellrowborder" valign="top" width="79.19%" headers="mcps1.1.3.1.2 "><p id="en-us_topic_0000001058670837_p583735020415"><a name="en-us_topic_0000001058670837_p583735020415"></a><a name="en-us_topic_0000001058670837_p583735020415"></a>The animation repeats.</p> 406 </td> 407 </tr> 408 </tbody> 409 </table> 410 411 412- Example code: 413 414 ``` 415 // xxx.js 416 import prompt from '@system.prompt'; 417 export default { 418 data : { 419 animation:'', 420 }, 421 onInit() { 422 }, 423 onShow() { 424 var options = { 425 duration: 1500, 426 easing: 'friction', 427 delay: 500, 428 fill: 'forwards', 429 iterations: 2, 430 }; 431 var frames = [ 432 {transform: {translate: '-120px -0px'}, opacity: 0.1, offset: 0.0}, 433 {transform: {translate: '120px 0px'}, opacity: 1.0, offset: 1.0} 434 ]; 435 this.animation = this.$element('idName').animate(frames, options); 436 // handle finish event 437 this.animation.onfinish = function() { 438 prompt.showToast({ 439 message: "The animation is finished." 440 }); 441 }; 442 // handle cancel event 443 this.animation.oncancel = function() { 444 prompt.showToast({ 445 message: "The animation is canceled." 446 }); 447 }; 448 // handle repeat event 449 this.animation.onrepeat = function() { 450 prompt.showToast({ 451 message: "The animation is repeated." 452 }); 453 }; 454 }, 455 start() { 456 this.animation.play(); 457 }, 458 cancel() { 459 this.animation.cancel(); 460 } 461 } 462 ``` 463 464  465 466 467