1# image-animator<a name="ZH-CN_TOPIC_0000001164130762"></a> 2 3图片帧动画播放器。 4 5## 子组件<a name="zh-cn_topic_0000001173324625_section393521619565"></a> 6 7不支持。 8 9## 属性<a name="zh-cn_topic_0000001173324625_section1342212415618"></a> 10 11除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： 12 13<a name="zh-cn_topic_0000001173324625_table20633101642315"></a> 14<table><thead align="left"><tr id="zh-cn_topic_0000001173324625_row663331618238"><th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.1"><p id="zh-cn_topic_0000001173324625_aa872998ac2d84843a3c5161889afffef"><a name="zh-cn_topic_0000001173324625_aa872998ac2d84843a3c5161889afffef"></a><a name="zh-cn_topic_0000001173324625_aa872998ac2d84843a3c5161889afffef"></a>名称</p> 15</th> 16<th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.2"><p id="zh-cn_topic_0000001173324625_ab2111648ee0e4f6d881be8954e7acaab"><a name="zh-cn_topic_0000001173324625_ab2111648ee0e4f6d881be8954e7acaab"></a><a name="zh-cn_topic_0000001173324625_ab2111648ee0e4f6d881be8954e7acaab"></a>类型</p> 17</th> 18<th class="cellrowborder" valign="top" width="10.48%" id="mcps1.1.6.1.3"><p id="zh-cn_topic_0000001173324625_ab377d1c90900478ea4ecab51e9a058af"><a name="zh-cn_topic_0000001173324625_ab377d1c90900478ea4ecab51e9a058af"></a><a name="zh-cn_topic_0000001173324625_ab377d1c90900478ea4ecab51e9a058af"></a>默认值</p> 19</th> 20<th class="cellrowborder" valign="top" width="7.5200000000000005%" id="mcps1.1.6.1.4"><p id="zh-cn_topic_0000001173324625_p824610360217"><a name="zh-cn_topic_0000001173324625_p824610360217"></a><a name="zh-cn_topic_0000001173324625_p824610360217"></a>必填</p> 21</th> 22<th class="cellrowborder" valign="top" width="35.76%" id="mcps1.1.6.1.5"><p id="zh-cn_topic_0000001173324625_a1d574a0044ed42ec8a2603bc82734232"><a name="zh-cn_topic_0000001173324625_a1d574a0044ed42ec8a2603bc82734232"></a><a name="zh-cn_topic_0000001173324625_a1d574a0044ed42ec8a2603bc82734232"></a>描述</p> 23</th> 24</tr> 25</thead> 26<tbody><tr id="zh-cn_topic_0000001173324625_row6678114174919"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173324625_p425710265496"><a name="zh-cn_topic_0000001173324625_p425710265496"></a><a name="zh-cn_topic_0000001173324625_p425710265496"></a>images</p> 27</td> 28<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173324625_p1257142694916"><a name="zh-cn_topic_0000001173324625_p1257142694916"></a><a name="zh-cn_topic_0000001173324625_p1257142694916"></a>Array<ImageFrame></p> 29</td> 30<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173324625_p1725752654912"><a name="zh-cn_topic_0000001173324625_p1725752654912"></a><a name="zh-cn_topic_0000001173324625_p1725752654912"></a>-</p> 31</td> 32<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173324625_p1025752610497"><a name="zh-cn_topic_0000001173324625_p1025752610497"></a><a name="zh-cn_topic_0000001173324625_p1025752610497"></a>是</p> 33</td> 34<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173324625_p1225732612491"><a name="zh-cn_topic_0000001173324625_p1225732612491"></a><a name="zh-cn_topic_0000001173324625_p1225732612491"></a>设置图片帧信息集合。每一帧的帧信息包含图片路径、图片大小和图片位置信息。目前支持以下图片格式：png、jpg。ImageFrame的详细说明请见<a href="#zh-cn_topic_0000001173324625_table67453165913">表1</a>。</p> 35<div class="note" id="zh-cn_topic_0000001173324625_note1925732612497"><a name="zh-cn_topic_0000001173324625_note1925732612497"></a><a name="zh-cn_topic_0000001173324625_note1925732612497"></a><span class="notetitle"> 说明： </span><div class="notebody"><p id="zh-cn_topic_0000001173324625_p3257226184915"><a name="zh-cn_topic_0000001173324625_p3257226184915"></a><a name="zh-cn_topic_0000001173324625_p3257226184915"></a>使用时需要使用数据绑定的方式，如images = {{images}}，js中声明相应变量：images: [{src: "/common/heart-rate01.png"}, {src: "/common/heart-rate02.png"}]。</p> 36<p id="zh-cn_topic_0000001173324625_p205711340134919"><a name="zh-cn_topic_0000001173324625_p205711340134919"></a><a name="zh-cn_topic_0000001173324625_p205711340134919"></a>js中声明相应变量：images: [{src: "/common/heart-rate01.png", duration: "100"}, {src: "/common/heart-rate02.png", duration: "200"}]。支持配置每一帧图片的时长，单位毫秒。<sup id="zh-cn_topic_0000001173324625_sup1083881410267"><a name="zh-cn_topic_0000001173324625_sup1083881410267"></a><a name="zh-cn_topic_0000001173324625_sup1083881410267"></a><span>6+</span></sup></p> 37</div></div> 38</td> 39</tr> 40<tr id="zh-cn_topic_0000001173324625_row2926174817528"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173324625_p1292784811523"><a name="zh-cn_topic_0000001173324625_p1292784811523"></a><a name="zh-cn_topic_0000001173324625_p1292784811523"></a>predecode<sup id="zh-cn_topic_0000001173324625_sup31371043122616"><a name="zh-cn_topic_0000001173324625_sup31371043122616"></a><a name="zh-cn_topic_0000001173324625_sup31371043122616"></a>6+</sup></p> 41</td> 42<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173324625_p292713488521"><a name="zh-cn_topic_0000001173324625_p292713488521"></a><a name="zh-cn_topic_0000001173324625_p292713488521"></a>number</p> 43</td> 44<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173324625_p9927134812527"><a name="zh-cn_topic_0000001173324625_p9927134812527"></a><a name="zh-cn_topic_0000001173324625_p9927134812527"></a>0</p> 45</td> 46<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173324625_p14927134818521"><a name="zh-cn_topic_0000001173324625_p14927134818521"></a><a name="zh-cn_topic_0000001173324625_p14927134818521"></a>否</p> 47</td> 48<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173324625_p792704825216"><a name="zh-cn_topic_0000001173324625_p792704825216"></a><a name="zh-cn_topic_0000001173324625_p792704825216"></a>是否启用预解码，默认值为0，即不启用预解码，如该值设为2，则播放当前页时会提前加载后面两张图片至缓存以提升性能。</p> 49</td> 50</tr> 51<tr id="zh-cn_topic_0000001173324625_row739819164910"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173324625_p16257626134912"><a name="zh-cn_topic_0000001173324625_p16257626134912"></a><a name="zh-cn_topic_0000001173324625_p16257626134912"></a>iteration</p> 52</td> 53<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173324625_p18257112611492"><a name="zh-cn_topic_0000001173324625_p18257112611492"></a><a name="zh-cn_topic_0000001173324625_p18257112611492"></a>number | string</p> 54</td> 55<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173324625_p22571126184915"><a name="zh-cn_topic_0000001173324625_p22571126184915"></a><a name="zh-cn_topic_0000001173324625_p22571126184915"></a>infinite</p> 56</td> 57<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173324625_p14257202694917"><a name="zh-cn_topic_0000001173324625_p14257202694917"></a><a name="zh-cn_topic_0000001173324625_p14257202694917"></a>否</p> 58</td> 59<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173324625_p22571326114916"><a name="zh-cn_topic_0000001173324625_p22571326114916"></a><a name="zh-cn_topic_0000001173324625_p22571326114916"></a>设置帧动画播放次数。number表示固定次数，infinite枚举表示无限次数播放。</p> 60</td> 61</tr> 62<tr id="zh-cn_topic_0000001173324625_row163991791492"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173324625_p12576265493"><a name="zh-cn_topic_0000001173324625_p12576265493"></a><a name="zh-cn_topic_0000001173324625_p12576265493"></a>reverse</p> 63</td> 64<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173324625_p15257826194918"><a name="zh-cn_topic_0000001173324625_p15257826194918"></a><a name="zh-cn_topic_0000001173324625_p15257826194918"></a>boolean</p> 65</td> 66<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173324625_p122573263499"><a name="zh-cn_topic_0000001173324625_p122573263499"></a><a name="zh-cn_topic_0000001173324625_p122573263499"></a>false</p> 67</td> 68<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173324625_p12571626134910"><a name="zh-cn_topic_0000001173324625_p12571626134910"></a><a name="zh-cn_topic_0000001173324625_p12571626134910"></a>否</p> 69</td> 70<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173324625_p925816262499"><a name="zh-cn_topic_0000001173324625_p925816262499"></a><a name="zh-cn_topic_0000001173324625_p925816262499"></a>设置播放顺序。false表示从第1张图片播放到最后1张图片； true表示从最后1张图片播放到第1张图片。</p> 71</td> 72</tr> 73<tr id="zh-cn_topic_0000001173324625_row320318310493"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173324625_p425862611491"><a name="zh-cn_topic_0000001173324625_p425862611491"></a><a name="zh-cn_topic_0000001173324625_p425862611491"></a>fixedsize</p> 74</td> 75<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173324625_p3258182604914"><a name="zh-cn_topic_0000001173324625_p3258182604914"></a><a name="zh-cn_topic_0000001173324625_p3258182604914"></a>boolean</p> 76</td> 77<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173324625_p1425852684910"><a name="zh-cn_topic_0000001173324625_p1425852684910"></a><a name="zh-cn_topic_0000001173324625_p1425852684910"></a>true</p> 78</td> 79<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173324625_p625862612497"><a name="zh-cn_topic_0000001173324625_p625862612497"></a><a name="zh-cn_topic_0000001173324625_p625862612497"></a>否</p> 80</td> 81<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173324625_p7258626174910"><a name="zh-cn_topic_0000001173324625_p7258626174910"></a><a name="zh-cn_topic_0000001173324625_p7258626174910"></a>设置图片大小是否固定为组件大小。 true表示图片大小与组件大小一致，此时设置图片的width 、height 、top 和left属性是无效的。false表示每一张图片的 width 、height 、top和left属性都要单独设置。</p> 82</td> 83</tr> 84<tr id="zh-cn_topic_0000001173324625_row168157599487"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173324625_p15258152613494"><a name="zh-cn_topic_0000001173324625_p15258152613494"></a><a name="zh-cn_topic_0000001173324625_p15258152613494"></a>duration</p> 85</td> 86<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173324625_p8258102610496"><a name="zh-cn_topic_0000001173324625_p8258102610496"></a><a name="zh-cn_topic_0000001173324625_p8258102610496"></a>string</p> 87</td> 88<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173324625_p9258112654910"><a name="zh-cn_topic_0000001173324625_p9258112654910"></a><a name="zh-cn_topic_0000001173324625_p9258112654910"></a>-</p> 89</td> 90<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173324625_p1225814262495"><a name="zh-cn_topic_0000001173324625_p1225814262495"></a><a name="zh-cn_topic_0000001173324625_p1225814262495"></a>是</p> 91</td> 92<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173324625_p9258102684910"><a name="zh-cn_topic_0000001173324625_p9258102684910"></a><a name="zh-cn_topic_0000001173324625_p9258102684910"></a>设置单次播放时长。单位支持[s(秒)|ms(毫秒)]，默认单位为ms。 duration为0时，不播放图片。 值改变只会在下一次循环开始时生效，当images中设置了单独的duration后，该属性设置无效。</p> 93</td> 94</tr> 95<tr id="zh-cn_topic_0000001173324625_row15460155375910"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173324625_p204611353105915"><a name="zh-cn_topic_0000001173324625_p204611353105915"></a><a name="zh-cn_topic_0000001173324625_p204611353105915"></a>fillmode<sup id="zh-cn_topic_0000001173324625_sup4224194014312"><a name="zh-cn_topic_0000001173324625_sup4224194014312"></a><a name="zh-cn_topic_0000001173324625_sup4224194014312"></a><span>5+</span></sup></p> 96</td> 97<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173324625_p1461125318597"><a name="zh-cn_topic_0000001173324625_p1461125318597"></a><a name="zh-cn_topic_0000001173324625_p1461125318597"></a>string</p> 98</td> 99<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173324625_p11461155311592"><a name="zh-cn_topic_0000001173324625_p11461155311592"></a><a name="zh-cn_topic_0000001173324625_p11461155311592"></a>forwards</p> 100</td> 101<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173324625_p3461135316592"><a name="zh-cn_topic_0000001173324625_p3461135316592"></a><a name="zh-cn_topic_0000001173324625_p3461135316592"></a>否</p> 102</td> 103<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173324625_p48661353174"><a name="zh-cn_topic_0000001173324625_p48661353174"></a><a name="zh-cn_topic_0000001173324625_p48661353174"></a>指定帧动画执行结束后的状态。可选项有：</p> 104<a name="zh-cn_topic_0000001173324625_ul183656592213"></a><a name="zh-cn_topic_0000001173324625_ul183656592213"></a><ul id="zh-cn_topic_0000001173324625_ul183656592213"><li>none：恢复初始状态。</li><li>forwards：保持帧动画结束时的状态（在最后一个关键帧中定义）。</li></ul> 105</td> 106</tr> 107</tbody> 108</table> 109 110**表 1** ImageFrame说明 111 112<a name="zh-cn_topic_0000001173324625_table67453165913"></a> 113<table><thead align="left"><tr id="zh-cn_topic_0000001173324625_row127451816696"><th class="cellrowborder" valign="top" width="11.330000000000002%" id="mcps1.2.6.1.1"><p id="zh-cn_topic_0000001173324625_p20745516799"><a name="zh-cn_topic_0000001173324625_p20745516799"></a><a name="zh-cn_topic_0000001173324625_p20745516799"></a>名称</p> 114</th> 115<th class="cellrowborder" valign="top" width="9.860000000000001%" id="mcps1.2.6.1.2"><p id="zh-cn_topic_0000001173324625_p6745181616919"><a name="zh-cn_topic_0000001173324625_p6745181616919"></a><a name="zh-cn_topic_0000001173324625_p6745181616919"></a>类型</p> 116</th> 117<th class="cellrowborder" valign="top" width="10.810000000000002%" id="mcps1.2.6.1.3"><p id="zh-cn_topic_0000001173324625_p27452161915"><a name="zh-cn_topic_0000001173324625_p27452161915"></a><a name="zh-cn_topic_0000001173324625_p27452161915"></a>默认值</p> 118</th> 119<th class="cellrowborder" valign="top" width="10.000000000000002%" id="mcps1.2.6.1.4"><p id="zh-cn_topic_0000001173324625_p187461164918"><a name="zh-cn_topic_0000001173324625_p187461164918"></a><a name="zh-cn_topic_0000001173324625_p187461164918"></a>必填</p> 120</th> 121<th class="cellrowborder" valign="top" width="58.00000000000001%" id="mcps1.2.6.1.5"><p id="zh-cn_topic_0000001173324625_p174651611917"><a name="zh-cn_topic_0000001173324625_p174651611917"></a><a name="zh-cn_topic_0000001173324625_p174651611917"></a>描述</p> 122</th> 123</tr> 124</thead> 125<tbody><tr id="zh-cn_topic_0000001173324625_row974611615915"><td class="cellrowborder" valign="top" width="11.330000000000002%" headers="mcps1.2.6.1.1 "><p id="zh-cn_topic_0000001173324625_p27461616392"><a name="zh-cn_topic_0000001173324625_p27461616392"></a><a name="zh-cn_topic_0000001173324625_p27461616392"></a>src</p> 126</td> 127<td class="cellrowborder" valign="top" width="9.860000000000001%" headers="mcps1.2.6.1.2 "><p id="zh-cn_topic_0000001173324625_p1874612161194"><a name="zh-cn_topic_0000001173324625_p1874612161194"></a><a name="zh-cn_topic_0000001173324625_p1874612161194"></a><uri></p> 128</td> 129<td class="cellrowborder" valign="top" width="10.810000000000002%" headers="mcps1.2.6.1.3 "><p id="zh-cn_topic_0000001173324625_p167462161197"><a name="zh-cn_topic_0000001173324625_p167462161197"></a><a name="zh-cn_topic_0000001173324625_p167462161197"></a>-</p> 130</td> 131<td class="cellrowborder" valign="top" width="10.000000000000002%" headers="mcps1.2.6.1.4 "><p id="zh-cn_topic_0000001173324625_p674612161914"><a name="zh-cn_topic_0000001173324625_p674612161914"></a><a name="zh-cn_topic_0000001173324625_p674612161914"></a>是</p> 132</td> 133<td class="cellrowborder" valign="top" width="58.00000000000001%" headers="mcps1.2.6.1.5 "><p id="zh-cn_topic_0000001173324625_p87460161592"><a name="zh-cn_topic_0000001173324625_p87460161592"></a><a name="zh-cn_topic_0000001173324625_p87460161592"></a>图片路径<span id="zh-cn_topic_0000001173324625_ph5230045184011"><a name="zh-cn_topic_0000001173324625_ph5230045184011"></a><a name="zh-cn_topic_0000001173324625_ph5230045184011"></a>，图片格式为svg，png和jpg</span>。</p> 134</td> 135</tr> 136<tr id="zh-cn_topic_0000001173324625_row1574611161790"><td class="cellrowborder" valign="top" width="11.330000000000002%" headers="mcps1.2.6.1.1 "><p id="zh-cn_topic_0000001173324625_p1674621619911"><a name="zh-cn_topic_0000001173324625_p1674621619911"></a><a name="zh-cn_topic_0000001173324625_p1674621619911"></a>width</p> 137</td> 138<td class="cellrowborder" valign="top" width="9.860000000000001%" headers="mcps1.2.6.1.2 "><p id="zh-cn_topic_0000001173324625_p4746516691"><a name="zh-cn_topic_0000001173324625_p4746516691"></a><a name="zh-cn_topic_0000001173324625_p4746516691"></a><length></p> 139</td> 140<td class="cellrowborder" valign="top" width="10.810000000000002%" headers="mcps1.2.6.1.3 "><p id="zh-cn_topic_0000001173324625_p1874661618915"><a name="zh-cn_topic_0000001173324625_p1874661618915"></a><a name="zh-cn_topic_0000001173324625_p1874661618915"></a>0</p> 141</td> 142<td class="cellrowborder" valign="top" width="10.000000000000002%" headers="mcps1.2.6.1.4 "><p id="zh-cn_topic_0000001173324625_p13746161615914"><a name="zh-cn_topic_0000001173324625_p13746161615914"></a><a name="zh-cn_topic_0000001173324625_p13746161615914"></a>否</p> 143</td> 144<td class="cellrowborder" valign="top" width="58.00000000000001%" headers="mcps1.2.6.1.5 "><p id="zh-cn_topic_0000001173324625_p57461162915"><a name="zh-cn_topic_0000001173324625_p57461162915"></a><a name="zh-cn_topic_0000001173324625_p57461162915"></a>图片宽度。</p> 145</td> 146</tr> 147<tr id="zh-cn_topic_0000001173324625_row1746131615914"><td class="cellrowborder" valign="top" width="11.330000000000002%" headers="mcps1.2.6.1.1 "><p id="zh-cn_topic_0000001173324625_p137467160910"><a name="zh-cn_topic_0000001173324625_p137467160910"></a><a name="zh-cn_topic_0000001173324625_p137467160910"></a>height</p> 148</td> 149<td class="cellrowborder" valign="top" width="9.860000000000001%" headers="mcps1.2.6.1.2 "><p id="zh-cn_topic_0000001173324625_p12285145181014"><a name="zh-cn_topic_0000001173324625_p12285145181014"></a><a name="zh-cn_topic_0000001173324625_p12285145181014"></a><length></p> 150</td> 151<td class="cellrowborder" valign="top" width="10.810000000000002%" headers="mcps1.2.6.1.3 "><p id="zh-cn_topic_0000001173324625_p3285144571012"><a name="zh-cn_topic_0000001173324625_p3285144571012"></a><a name="zh-cn_topic_0000001173324625_p3285144571012"></a>0</p> 152</td> 153<td class="cellrowborder" valign="top" width="10.000000000000002%" headers="mcps1.2.6.1.4 "><p id="zh-cn_topic_0000001173324625_p728514520106"><a name="zh-cn_topic_0000001173324625_p728514520106"></a><a name="zh-cn_topic_0000001173324625_p728514520106"></a>否</p> 154</td> 155<td class="cellrowborder" valign="top" width="58.00000000000001%" headers="mcps1.2.6.1.5 "><p id="zh-cn_topic_0000001173324625_p1174619161998"><a name="zh-cn_topic_0000001173324625_p1174619161998"></a><a name="zh-cn_topic_0000001173324625_p1174619161998"></a>图片高度。</p> 156</td> 157</tr> 158<tr id="zh-cn_topic_0000001173324625_row157461216990"><td class="cellrowborder" valign="top" width="11.330000000000002%" headers="mcps1.2.6.1.1 "><p id="zh-cn_topic_0000001173324625_p157461916297"><a name="zh-cn_topic_0000001173324625_p157461916297"></a><a name="zh-cn_topic_0000001173324625_p157461916297"></a>top</p> 159</td> 160<td class="cellrowborder" valign="top" width="9.860000000000001%" headers="mcps1.2.6.1.2 "><p id="zh-cn_topic_0000001173324625_p172301247131019"><a name="zh-cn_topic_0000001173324625_p172301247131019"></a><a name="zh-cn_topic_0000001173324625_p172301247131019"></a><length></p> 161</td> 162<td class="cellrowborder" valign="top" width="10.810000000000002%" headers="mcps1.2.6.1.3 "><p id="zh-cn_topic_0000001173324625_p152301647141015"><a name="zh-cn_topic_0000001173324625_p152301647141015"></a><a name="zh-cn_topic_0000001173324625_p152301647141015"></a>0</p> 163</td> 164<td class="cellrowborder" valign="top" width="10.000000000000002%" headers="mcps1.2.6.1.4 "><p id="zh-cn_topic_0000001173324625_p15230164731016"><a name="zh-cn_topic_0000001173324625_p15230164731016"></a><a name="zh-cn_topic_0000001173324625_p15230164731016"></a>否</p> 165</td> 166<td class="cellrowborder" valign="top" width="58.00000000000001%" headers="mcps1.2.6.1.5 "><p id="zh-cn_topic_0000001173324625_p11863511151119"><a name="zh-cn_topic_0000001173324625_p11863511151119"></a><a name="zh-cn_topic_0000001173324625_p11863511151119"></a>图片相对于组件左上角的纵向坐标。</p> 167</td> 168</tr> 169<tr id="zh-cn_topic_0000001173324625_row107477161396"><td class="cellrowborder" valign="top" width="11.330000000000002%" headers="mcps1.2.6.1.1 "><p id="zh-cn_topic_0000001173324625_p57474161995"><a name="zh-cn_topic_0000001173324625_p57474161995"></a><a name="zh-cn_topic_0000001173324625_p57474161995"></a>left</p> 170</td> 171<td class="cellrowborder" valign="top" width="9.860000000000001%" headers="mcps1.2.6.1.2 "><p id="zh-cn_topic_0000001173324625_p317644961019"><a name="zh-cn_topic_0000001173324625_p317644961019"></a><a name="zh-cn_topic_0000001173324625_p317644961019"></a><length></p> 172</td> 173<td class="cellrowborder" valign="top" width="10.810000000000002%" headers="mcps1.2.6.1.3 "><p id="zh-cn_topic_0000001173324625_p19176154951014"><a name="zh-cn_topic_0000001173324625_p19176154951014"></a><a name="zh-cn_topic_0000001173324625_p19176154951014"></a>0</p> 174</td> 175<td class="cellrowborder" valign="top" width="10.000000000000002%" headers="mcps1.2.6.1.4 "><p id="zh-cn_topic_0000001173324625_p1176049201020"><a name="zh-cn_topic_0000001173324625_p1176049201020"></a><a name="zh-cn_topic_0000001173324625_p1176049201020"></a>否</p> 176</td> 177<td class="cellrowborder" valign="top" width="58.00000000000001%" headers="mcps1.2.6.1.5 "><p id="zh-cn_topic_0000001173324625_p191151321151111"><a name="zh-cn_topic_0000001173324625_p191151321151111"></a><a name="zh-cn_topic_0000001173324625_p191151321151111"></a>图片相对于组件左上角的横向坐标。</p> 178</td> 179</tr> 180<tr id="zh-cn_topic_0000001173324625_row243510340595"><td class="cellrowborder" valign="top" width="11.330000000000002%" headers="mcps1.2.6.1.1 "><p id="zh-cn_topic_0000001173324625_p1643633417593"><a name="zh-cn_topic_0000001173324625_p1643633417593"></a><a name="zh-cn_topic_0000001173324625_p1643633417593"></a>duration<sup id="zh-cn_topic_0000001173324625_sup10707409460"><a name="zh-cn_topic_0000001173324625_sup10707409460"></a><a name="zh-cn_topic_0000001173324625_sup10707409460"></a>6+</sup></p> 181</td> 182<td class="cellrowborder" valign="top" width="9.860000000000001%" headers="mcps1.2.6.1.2 "><p id="zh-cn_topic_0000001173324625_p1643620340595"><a name="zh-cn_topic_0000001173324625_p1643620340595"></a><a name="zh-cn_topic_0000001173324625_p1643620340595"></a>number</p> 183</td> 184<td class="cellrowborder" valign="top" width="10.810000000000002%" headers="mcps1.2.6.1.3 "><p id="zh-cn_topic_0000001173324625_p14436133455910"><a name="zh-cn_topic_0000001173324625_p14436133455910"></a><a name="zh-cn_topic_0000001173324625_p14436133455910"></a>-</p> 185</td> 186<td class="cellrowborder" valign="top" width="10.000000000000002%" headers="mcps1.2.6.1.4 "><p id="zh-cn_topic_0000001173324625_p5436134145916"><a name="zh-cn_topic_0000001173324625_p5436134145916"></a><a name="zh-cn_topic_0000001173324625_p5436134145916"></a>否</p> 187</td> 188<td class="cellrowborder" valign="top" width="58.00000000000001%" headers="mcps1.2.6.1.5 "><p id="zh-cn_topic_0000001173324625_p743613347596"><a name="zh-cn_topic_0000001173324625_p743613347596"></a><a name="zh-cn_topic_0000001173324625_p743613347596"></a>每一帧图片的播放时长，单位毫秒。</p> 189</td> 190</tr> 191</tbody> 192</table> 193 194## 样式<a name="zh-cn_topic_0000001173324625_section1774719169253"></a> 195 196支持[通用样式](js-components-common-styles.md)。 197 198## 事件<a name="zh-cn_topic_0000001173324625_section17969351566"></a> 199 200除支持[通用事件](js-components-common-events.md)外，还支持如下事件： 201 202<a name="zh-cn_topic_0000001173324625_table836435619510"></a> 203<table><thead align="left"><tr id="zh-cn_topic_0000001173324625_row153658563517"><th class="cellrowborder" valign="top" width="24.852485248524854%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173324625_a426b8903842d48fa8012a24ff3c997eb"><a name="zh-cn_topic_0000001173324625_a426b8903842d48fa8012a24ff3c997eb"></a><a name="zh-cn_topic_0000001173324625_a426b8903842d48fa8012a24ff3c997eb"></a>名称</p> 204</th> 205<th class="cellrowborder" valign="top" width="29.552955295529554%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173324625_a53448ba47e5e4ae9bf7774c90820e970"><a name="zh-cn_topic_0000001173324625_a53448ba47e5e4ae9bf7774c90820e970"></a><a name="zh-cn_topic_0000001173324625_a53448ba47e5e4ae9bf7774c90820e970"></a>参数</p> 206</th> 207<th class="cellrowborder" valign="top" width="45.5945594559456%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173324625_add489ff50c444f24b759162c7f4bad9a"><a name="zh-cn_topic_0000001173324625_add489ff50c444f24b759162c7f4bad9a"></a><a name="zh-cn_topic_0000001173324625_add489ff50c444f24b759162c7f4bad9a"></a>描述</p> 208</th> 209</tr> 210</thead> 211<tbody><tr id="zh-cn_topic_0000001173324625_row287217513517"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173324625_p2602207165111"><a name="zh-cn_topic_0000001173324625_p2602207165111"></a><a name="zh-cn_topic_0000001173324625_p2602207165111"></a>start</p> 212</td> 213<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173324625_p19602157185119"><a name="zh-cn_topic_0000001173324625_p19602157185119"></a><a name="zh-cn_topic_0000001173324625_p19602157185119"></a>-</p> 214</td> 215<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173324625_p146021079518"><a name="zh-cn_topic_0000001173324625_p146021079518"></a><a name="zh-cn_topic_0000001173324625_p146021079518"></a>帧动画启动时触发。</p> 216</td> 217</tr> 218<tr id="zh-cn_topic_0000001173324625_row0878102155118"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173324625_p1760237135118"><a name="zh-cn_topic_0000001173324625_p1760237135118"></a><a name="zh-cn_topic_0000001173324625_p1760237135118"></a>pause</p> 219</td> 220<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173324625_p160214745113"><a name="zh-cn_topic_0000001173324625_p160214745113"></a><a name="zh-cn_topic_0000001173324625_p160214745113"></a>-</p> 221</td> 222<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173324625_p26027715112"><a name="zh-cn_topic_0000001173324625_p26027715112"></a><a name="zh-cn_topic_0000001173324625_p26027715112"></a>帧动画暂停时触发。</p> 223</td> 224</tr> 225<tr id="zh-cn_topic_0000001173324625_row151519594509"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173324625_p86027735118"><a name="zh-cn_topic_0000001173324625_p86027735118"></a><a name="zh-cn_topic_0000001173324625_p86027735118"></a>stop</p> 226</td> 227<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173324625_p196024715513"><a name="zh-cn_topic_0000001173324625_p196024715513"></a><a name="zh-cn_topic_0000001173324625_p196024715513"></a>-</p> 228</td> 229<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173324625_p760216735110"><a name="zh-cn_topic_0000001173324625_p760216735110"></a><a name="zh-cn_topic_0000001173324625_p760216735110"></a>帧动画结束时触发。</p> 230</td> 231</tr> 232<tr id="zh-cn_topic_0000001173324625_row189025517507"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173324625_p4602147175120"><a name="zh-cn_topic_0000001173324625_p4602147175120"></a><a name="zh-cn_topic_0000001173324625_p4602147175120"></a>resume</p> 233</td> 234<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173324625_p12602137155110"><a name="zh-cn_topic_0000001173324625_p12602137155110"></a><a name="zh-cn_topic_0000001173324625_p12602137155110"></a>-</p> 235</td> 236<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173324625_p160267105114"><a name="zh-cn_topic_0000001173324625_p160267105114"></a><a name="zh-cn_topic_0000001173324625_p160267105114"></a>帧动画恢复时触发。</p> 237</td> 238</tr> 239</tbody> 240</table> 241 242## 方法<a name="zh-cn_topic_0000001173324625_section1428810433566"></a> 243 244支持[通用方法](js-components-common-methods.md)外，还支持如下方法： 245 246<a name="zh-cn_topic_0000001173324625_ta27ae6832ab647a880ab27801368ec17"></a> 247<table><thead align="left"><tr id="zh-cn_topic_0000001173324625_r00746cc3f4244fd7bf405d1640b42842"><th class="cellrowborder" valign="top" width="10.89%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173324625_a6853bf471a534d9185a46033e5301a3c"><a name="zh-cn_topic_0000001173324625_a6853bf471a534d9185a46033e5301a3c"></a><a name="zh-cn_topic_0000001173324625_a6853bf471a534d9185a46033e5301a3c"></a>名称</p> 248</th> 249<th class="cellrowborder" valign="top" width="10.9%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173324625_a2f6b46265ccd412b8be977c934e2e06e"><a name="zh-cn_topic_0000001173324625_a2f6b46265ccd412b8be977c934e2e06e"></a><a name="zh-cn_topic_0000001173324625_a2f6b46265ccd412b8be977c934e2e06e"></a>参数</p> 250</th> 251<th class="cellrowborder" valign="top" width="78.21000000000001%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173324625_ab97e815e4f734c4290f4f7cb608e45d4"><a name="zh-cn_topic_0000001173324625_ab97e815e4f734c4290f4f7cb608e45d4"></a><a name="zh-cn_topic_0000001173324625_ab97e815e4f734c4290f4f7cb608e45d4"></a>描述</p> 252</th> 253</tr> 254</thead> 255<tbody><tr id="zh-cn_topic_0000001173324625_rfd984b5dab4c419fb56fb95b53614076"><td class="cellrowborder" valign="top" width="10.89%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173324625_a650170fd03b64d42894295d360ad74dd"><a name="zh-cn_topic_0000001173324625_a650170fd03b64d42894295d360ad74dd"></a><a name="zh-cn_topic_0000001173324625_a650170fd03b64d42894295d360ad74dd"></a>start</p> 256</td> 257<td class="cellrowborder" valign="top" width="10.9%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173324625_a634a82d9b27a449891db2c1e04622259"><a name="zh-cn_topic_0000001173324625_a634a82d9b27a449891db2c1e04622259"></a><a name="zh-cn_topic_0000001173324625_a634a82d9b27a449891db2c1e04622259"></a>-</p> 258</td> 259<td class="cellrowborder" valign="top" width="78.21000000000001%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173324625_a8ab976e5b8344f9b9849843a5b30128a"><a name="zh-cn_topic_0000001173324625_a8ab976e5b8344f9b9849843a5b30128a"></a><a name="zh-cn_topic_0000001173324625_a8ab976e5b8344f9b9849843a5b30128a"></a>开始播放图片帧动画。再次调用，重新从第1帧开始播放。</p> 260</td> 261</tr> 262<tr id="zh-cn_topic_0000001173324625_r15b7a1086fd047ea984b9cb4955dd98c"><td class="cellrowborder" valign="top" width="10.89%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173324625_aab35a49bf5d440958734b6b30ae5c129"><a name="zh-cn_topic_0000001173324625_aab35a49bf5d440958734b6b30ae5c129"></a><a name="zh-cn_topic_0000001173324625_aab35a49bf5d440958734b6b30ae5c129"></a>pause</p> 263</td> 264<td class="cellrowborder" valign="top" width="10.9%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173324625_aaf270b3435ba4d1ba5c038066d3d08a8"><a name="zh-cn_topic_0000001173324625_aaf270b3435ba4d1ba5c038066d3d08a8"></a><a name="zh-cn_topic_0000001173324625_aaf270b3435ba4d1ba5c038066d3d08a8"></a>-</p> 265</td> 266<td class="cellrowborder" valign="top" width="78.21000000000001%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173324625_a4ea339c3428f474696fe3491579ac922"><a name="zh-cn_topic_0000001173324625_a4ea339c3428f474696fe3491579ac922"></a><a name="zh-cn_topic_0000001173324625_a4ea339c3428f474696fe3491579ac922"></a>暂停播放图片帧动画。</p> 267</td> 268</tr> 269<tr id="zh-cn_topic_0000001173324625_row2389173613484"><td class="cellrowborder" valign="top" width="10.89%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173324625_p183906365481"><a name="zh-cn_topic_0000001173324625_p183906365481"></a><a name="zh-cn_topic_0000001173324625_p183906365481"></a>stop</p> 270</td> 271<td class="cellrowborder" valign="top" width="10.9%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173324625_p18390193624812"><a name="zh-cn_topic_0000001173324625_p18390193624812"></a><a name="zh-cn_topic_0000001173324625_p18390193624812"></a>-</p> 272</td> 273<td class="cellrowborder" valign="top" width="78.21000000000001%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173324625_p18390136184810"><a name="zh-cn_topic_0000001173324625_p18390136184810"></a><a name="zh-cn_topic_0000001173324625_p18390136184810"></a>停止播放图片帧动画。</p> 274</td> 275</tr> 276<tr id="zh-cn_topic_0000001173324625_row2051494718486"><td class="cellrowborder" valign="top" width="10.89%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173324625_p16514124764810"><a name="zh-cn_topic_0000001173324625_p16514124764810"></a><a name="zh-cn_topic_0000001173324625_p16514124764810"></a>resume</p> 277</td> 278<td class="cellrowborder" valign="top" width="10.9%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173324625_p16515144764811"><a name="zh-cn_topic_0000001173324625_p16515144764811"></a><a name="zh-cn_topic_0000001173324625_p16515144764811"></a>-</p> 279</td> 280<td class="cellrowborder" valign="top" width="78.21000000000001%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173324625_p18515847164812"><a name="zh-cn_topic_0000001173324625_p18515847164812"></a><a name="zh-cn_topic_0000001173324625_p18515847164812"></a>继续播放图片帧。</p> 281</td> 282</tr> 283<tr id="zh-cn_topic_0000001173324625_row16356183618265"><td class="cellrowborder" valign="top" width="10.89%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173324625_p53572364269"><a name="zh-cn_topic_0000001173324625_p53572364269"></a><a name="zh-cn_topic_0000001173324625_p53572364269"></a>getState</p> 284</td> 285<td class="cellrowborder" valign="top" width="10.9%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173324625_p835743613261"><a name="zh-cn_topic_0000001173324625_p835743613261"></a><a name="zh-cn_topic_0000001173324625_p835743613261"></a>-</p> 286</td> 287<td class="cellrowborder" valign="top" width="78.21000000000001%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173324625_p5357183632618"><a name="zh-cn_topic_0000001173324625_p5357183632618"></a><a name="zh-cn_topic_0000001173324625_p5357183632618"></a>获取播放状态。可能值有：</p> 288<a name="zh-cn_topic_0000001173324625_ul1465819221205"></a><a name="zh-cn_topic_0000001173324625_ul1465819221205"></a><ul id="zh-cn_topic_0000001173324625_ul1465819221205"><li>playing：播放中</li><li>paused：已暂停</li><li>stopped：已停止。</li></ul> 289</td> 290</tr> 291</tbody> 292</table> 293 294## 示例<a name="zh-cn_topic_0000001173324625_section118221913375"></a> 295 296``` 297<!-- xxx.hml --> 298<div class="container"> 299 <image-animator class="animator" ref="animator" images="{{frames}}" duration="1s" /> 300 <div class="btn-box"> 301 <input class="btn" type="button" value="start" @click="handleStart" /> 302 <input class="btn" type="button" value="stop" @click="handleStop" /> 303 <input class="btn" type="button" value="pause" @click="handlePause" /> 304 <input class="btn" type="button" value="resume" @click="handleResume" /> 305 </div> 306</div> 307``` 308 309``` 310/* xxx.css */ 311.container { 312 flex-direction: column; 313 justify-content: center; 314 align-items: center; 315 left: 0px; 316 top: 0px; 317 width: 454px; 318 height: 454px; 319} 320.animator { 321 width: 70px; 322 height: 70px; 323} 324.btn-box { 325 width: 264px; 326 height: 120px; 327 flex-wrap: wrap; 328 justify-content: space-around; 329 align-items: center; 330} 331.btn { 332 border-radius: 8px; 333 width: 120px; 334 margin-top: 8px; 335} 336``` 337 338``` 339//xxx.js 340export default { 341 data: { 342 frames: [ 343 { 344 src: "/common/asserts/heart78.png", 345 }, 346 { 347 src: "/common/asserts/heart79.png", 348 }, 349 { 350 src: "/common/asserts/heart80.png", 351 }, 352 { 353 src: "/common/asserts/heart81.png", 354 }, 355 { 356 src: "/common/asserts/heart82.png", 357 }, 358 { 359 src: "/common/asserts/heart83.png", 360 }, 361 { 362 src: "/common/asserts/heart84.png", 363 }, 364 { 365 src: "/common/asserts/heart85.png", 366 }, 367 { 368 src: "/common/asserts/heart86.png", 369 }, 370 { 371 src: "/common/asserts/heart87.png", 372 }, 373 { 374 src: "/common/asserts/heart88.png", 375 }, 376 { 377 src: "/common/asserts/heart89.png", 378 }, 379 { 380 src: "/common/asserts/heart90.png", 381 }, 382 { 383 src: "/common/asserts/heart91.png", 384 }, 385 { 386 src: "/common/asserts/heart92.png", 387 }, 388 { 389 src: "/common/asserts/heart93.png", 390 }, 391 { 392 src: "/common/asserts/heart94.png", 393 }, 394 { 395 src: "/common/asserts/heart95.png", 396 }, 397 { 398 src: "/common/asserts/heart96.png", 399 }, 400 ], 401 }, 402 handleStart() { 403 this.$refs.animator.start(); 404 }, 405 handlePause() { 406 this.$refs.animator.pause(); 407 }, 408 handleResume() { 409 this.$refs.animator.resume(); 410 }, 411 handleStop() { 412 this.$refs.animator.stop(); 413 }, 414}; 415``` 416 417 418 419
