1# animate<a name="ZH-CN_TOPIC_0000001209977057"></a> 2 3设置svg组件的属性动画。 4 5> **说明：** 6>从API Version 7 开始支持。 7 8## 权限列表<a name="zh-cn_topic_0000001127125042_section11257113618419"></a> 9 10无 11 12## 子组件<a name="zh-cn_topic_0000001127125042_section9288143101012"></a> 13 14不支持。 15 16## 属性<a name="zh-cn_topic_0000001127125042_section2907183951110"></a> 17 18<a name="zh-cn_topic_0000001127125042_table20633101642315"></a> 19<table><thead align="left"><tr id="zh-cn_topic_0000001127125042_row663331618238"><th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.1"><p id="zh-cn_topic_0000001127125042_aaf1247770b244944bbcc9f28d9a6f00b"><a name="zh-cn_topic_0000001127125042_aaf1247770b244944bbcc9f28d9a6f00b"></a><a name="zh-cn_topic_0000001127125042_aaf1247770b244944bbcc9f28d9a6f00b"></a>名称</p> 20</th> 21<th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.2"><p id="zh-cn_topic_0000001127125042_a6efc3502761f4faf9630e484280f75b6"><a name="zh-cn_topic_0000001127125042_a6efc3502761f4faf9630e484280f75b6"></a><a name="zh-cn_topic_0000001127125042_a6efc3502761f4faf9630e484280f75b6"></a>类型</p> 22</th> 23<th class="cellrowborder" valign="top" width="10.48%" id="mcps1.1.6.1.3"><p id="zh-cn_topic_0000001127125042_a27a37273d9ad47569ddbcb8db985d302"><a name="zh-cn_topic_0000001127125042_a27a37273d9ad47569ddbcb8db985d302"></a><a name="zh-cn_topic_0000001127125042_a27a37273d9ad47569ddbcb8db985d302"></a>默认值</p> 24</th> 25<th class="cellrowborder" valign="top" width="7.5200000000000005%" id="mcps1.1.6.1.4"><p id="zh-cn_topic_0000001127125042_p824610360217"><a name="zh-cn_topic_0000001127125042_p824610360217"></a><a name="zh-cn_topic_0000001127125042_p824610360217"></a>必填</p> 26</th> 27<th class="cellrowborder" valign="top" width="35.76%" id="mcps1.1.6.1.5"><p id="zh-cn_topic_0000001127125042_a2ff3361bfd3b420ba4967452d2ddd098"><a name="zh-cn_topic_0000001127125042_a2ff3361bfd3b420ba4967452d2ddd098"></a><a name="zh-cn_topic_0000001127125042_a2ff3361bfd3b420ba4967452d2ddd098"></a>描述</p> 28</th> 29</tr> 30</thead> 31<tbody><tr id="zh-cn_topic_0000001127125042_row36332165231"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125042_a83b6dd280109466fb015e64de1ef4df3"><a name="zh-cn_topic_0000001127125042_a83b6dd280109466fb015e64de1ef4df3"></a><a name="zh-cn_topic_0000001127125042_a83b6dd280109466fb015e64de1ef4df3"></a>id</p> 32</td> 33<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125042_abc38fa2b85854bc687af75eb17a00a4d"><a name="zh-cn_topic_0000001127125042_abc38fa2b85854bc687af75eb17a00a4d"></a><a name="zh-cn_topic_0000001127125042_abc38fa2b85854bc687af75eb17a00a4d"></a>string</p> 34</td> 35<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125042_a8d12e4af905d4743a5ec9cd6018d2972"><a name="zh-cn_topic_0000001127125042_a8d12e4af905d4743a5ec9cd6018d2972"></a><a name="zh-cn_topic_0000001127125042_a8d12e4af905d4743a5ec9cd6018d2972"></a>-</p> 36</td> 37<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125042_p42461736102118"><a name="zh-cn_topic_0000001127125042_p42461736102118"></a><a name="zh-cn_topic_0000001127125042_p42461736102118"></a>否</p> 38</td> 39<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125042_a1a1731af05554f119fa365748f276bb2"><a name="zh-cn_topic_0000001127125042_a1a1731af05554f119fa365748f276bb2"></a><a name="zh-cn_topic_0000001127125042_a1a1731af05554f119fa365748f276bb2"></a>组件的唯一标识。</p> 40</td> 41</tr> 42<tr id="zh-cn_topic_0000001127125042_row13633131616239"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125042_p135984362214"><a name="zh-cn_topic_0000001127125042_p135984362214"></a><a name="zh-cn_topic_0000001127125042_p135984362214"></a>attributeName</p> 43</td> 44<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125042_p1759753619211"><a name="zh-cn_topic_0000001127125042_p1759753619211"></a><a name="zh-cn_topic_0000001127125042_p1759753619211"></a>string</p> 45</td> 46<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125042_p7596736122112"><a name="zh-cn_topic_0000001127125042_p7596736122112"></a><a name="zh-cn_topic_0000001127125042_p7596736122112"></a>-</p> 47</td> 48<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125042_p17246836142119"><a name="zh-cn_topic_0000001127125042_p17246836142119"></a><a name="zh-cn_topic_0000001127125042_p17246836142119"></a>否</p> 49</td> 50<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125042_adbe7ecbee96b4f938b04a4b8d62791bf"><a name="zh-cn_topic_0000001127125042_adbe7ecbee96b4f938b04a4b8d62791bf"></a><a name="zh-cn_topic_0000001127125042_adbe7ecbee96b4f938b04a4b8d62791bf"></a>设置需要进行动效的属性名。</p> 51</td> 52</tr> 53<tr id="zh-cn_topic_0000001127125042_row10634131610230"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125042_p1159543642120"><a name="zh-cn_topic_0000001127125042_p1159543642120"></a><a name="zh-cn_topic_0000001127125042_p1159543642120"></a>begin</p> 54</td> 55<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125042_p6593336132115"><a name="zh-cn_topic_0000001127125042_p6593336132115"></a><a name="zh-cn_topic_0000001127125042_p6593336132115"></a><time></p> 56</td> 57<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125042_p11592936142117"><a name="zh-cn_topic_0000001127125042_p11592936142117"></a><a name="zh-cn_topic_0000001127125042_p11592936142117"></a>0</p> 58</td> 59<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125042_p1646316754213"><a name="zh-cn_topic_0000001127125042_p1646316754213"></a><a name="zh-cn_topic_0000001127125042_p1646316754213"></a>否</p> 60</td> 61<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125042_p10941922464"><a name="zh-cn_topic_0000001127125042_p10941922464"></a><a name="zh-cn_topic_0000001127125042_p10941922464"></a>设置动效的延迟时间。</p> 62<p id="zh-cn_topic_0000001127125042_p1094114216469"><a name="zh-cn_topic_0000001127125042_p1094114216469"></a><a name="zh-cn_topic_0000001127125042_p1094114216469"></a>支持输入ms(毫秒)、s（秒）、m（分），默认为s(秒)，其他格式不支持</p> 63</td> 64</tr> 65<tr id="zh-cn_topic_0000001127125042_row1634171618236"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125042_p19590123611210"><a name="zh-cn_topic_0000001127125042_p19590123611210"></a><a name="zh-cn_topic_0000001127125042_p19590123611210"></a>dur</p> 66</td> 67<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125042_p17686152762312"><a name="zh-cn_topic_0000001127125042_p17686152762312"></a><a name="zh-cn_topic_0000001127125042_p17686152762312"></a><time></p> 68</td> 69<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125042_p6589163611217"><a name="zh-cn_topic_0000001127125042_p6589163611217"></a><a name="zh-cn_topic_0000001127125042_p6589163611217"></a>0</p> 70</td> 71<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125042_p1624612362219"><a name="zh-cn_topic_0000001127125042_p1624612362219"></a><a name="zh-cn_topic_0000001127125042_p1624612362219"></a>否</p> 72</td> 73<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125042_p1676818505465"><a name="zh-cn_topic_0000001127125042_p1676818505465"></a><a name="zh-cn_topic_0000001127125042_p1676818505465"></a>设置动效持续时间，如果dur没设置，按照end-begin的结果作为持续时间，小于等于0时，动效不触发。</p> 74<p id="zh-cn_topic_0000001127125042_p18768125018462"><a name="zh-cn_topic_0000001127125042_p18768125018462"></a><a name="zh-cn_topic_0000001127125042_p18768125018462"></a>支持输入ms(毫秒)、s（秒）、m（分），默认为s(秒)，其他格式不支持</p> 75</td> 76</tr> 77<tr id="zh-cn_topic_0000001127125042_row1259531661611"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125042_p1758863619218"><a name="zh-cn_topic_0000001127125042_p1758863619218"></a><a name="zh-cn_topic_0000001127125042_p1758863619218"></a>end</p> 78</td> 79<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125042_p3587173632114"><a name="zh-cn_topic_0000001127125042_p3587173632114"></a><a name="zh-cn_topic_0000001127125042_p3587173632114"></a><time></p> 80</td> 81<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125042_p115867360215"><a name="zh-cn_topic_0000001127125042_p115867360215"></a><a name="zh-cn_topic_0000001127125042_p115867360215"></a>0</p> 82</td> 83<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125042_p1059610169169"><a name="zh-cn_topic_0000001127125042_p1059610169169"></a><a name="zh-cn_topic_0000001127125042_p1059610169169"></a>否</p> 84</td> 85<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125042_p759484922319"><a name="zh-cn_topic_0000001127125042_p759484922319"></a><a name="zh-cn_topic_0000001127125042_p759484922319"></a>设置动效多久时间后结束。支持输入ms(毫秒)、s（秒）、m（分），默认为s(秒)，其他格式不支持</p> 86</td> 87</tr> 88<tr id="zh-cn_topic_0000001127125042_row11404114510176"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125042_p145859363216"><a name="zh-cn_topic_0000001127125042_p145859363216"></a><a name="zh-cn_topic_0000001127125042_p145859363216"></a>repeatCount</p> 89</td> 90<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125042_p1758493620212"><a name="zh-cn_topic_0000001127125042_p1758493620212"></a><a name="zh-cn_topic_0000001127125042_p1758493620212"></a><number | indefinite></p> 91</td> 92<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125042_p1758315366214"><a name="zh-cn_topic_0000001127125042_p1758315366214"></a><a name="zh-cn_topic_0000001127125042_p1758315366214"></a>1</p> 93</td> 94<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125042_p7893010540"><a name="zh-cn_topic_0000001127125042_p7893010540"></a><a name="zh-cn_topic_0000001127125042_p7893010540"></a>否</p> 95</td> 96<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125042_p759344911237"><a name="zh-cn_topic_0000001127125042_p759344911237"></a><a name="zh-cn_topic_0000001127125042_p759344911237"></a>设置动画播放的次数，默认无限次播放(indefinite)，可通过设置为数值1仅播放一次。</p> 97</td> 98</tr> 99<tr id="zh-cn_topic_0000001127125042_row75241175410"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125042_p6582123618212"><a name="zh-cn_topic_0000001127125042_p6582123618212"></a><a name="zh-cn_topic_0000001127125042_p6582123618212"></a>fill</p> 100</td> 101<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125042_p65811136102115"><a name="zh-cn_topic_0000001127125042_p65811136102115"></a><a name="zh-cn_topic_0000001127125042_p65811136102115"></a><freeze | remove></p> 102</td> 103<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125042_p1155610362211"><a name="zh-cn_topic_0000001127125042_p1155610362211"></a><a name="zh-cn_topic_0000001127125042_p1155610362211"></a>remove</p> 104</td> 105<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125042_p4724145065420"><a name="zh-cn_topic_0000001127125042_p4724145065420"></a><a name="zh-cn_topic_0000001127125042_p4724145065420"></a>否</p> 106</td> 107<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125042_p557624915236"><a name="zh-cn_topic_0000001127125042_p557624915236"></a><a name="zh-cn_topic_0000001127125042_p557624915236"></a>设置动画结束时的状态。</p> 108</td> 109</tr> 110<tr id="zh-cn_topic_0000001127125042_row158325589294"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125042_p1083214589293"><a name="zh-cn_topic_0000001127125042_p1083214589293"></a><a name="zh-cn_topic_0000001127125042_p1083214589293"></a>calcMode</p> 111</td> 112<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125042_p7832258142920"><a name="zh-cn_topic_0000001127125042_p7832258142920"></a><a name="zh-cn_topic_0000001127125042_p7832258142920"></a><discrete | linear | paced | spline></p> 113</td> 114<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125042_p12833175812295"><a name="zh-cn_topic_0000001127125042_p12833175812295"></a><a name="zh-cn_topic_0000001127125042_p12833175812295"></a>linear</p> 115</td> 116<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125042_p138331058192911"><a name="zh-cn_topic_0000001127125042_p138331058192911"></a><a name="zh-cn_topic_0000001127125042_p138331058192911"></a>否</p> 117</td> 118<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125042_p2083395862919"><a name="zh-cn_topic_0000001127125042_p2083395862919"></a><a name="zh-cn_topic_0000001127125042_p2083395862919"></a>设置动画的插值模式。</p> 119<p id="zh-cn_topic_0000001127125042_p191847533337"><a name="zh-cn_topic_0000001127125042_p191847533337"></a><a name="zh-cn_topic_0000001127125042_p191847533337"></a>discrete：阶跃，from值直接跳转到to的值；</p> 120<p id="zh-cn_topic_0000001127125042_p196601957163315"><a name="zh-cn_topic_0000001127125042_p196601957163315"></a><a name="zh-cn_topic_0000001127125042_p196601957163315"></a>linear：线性；</p> 121<p id="zh-cn_topic_0000001127125042_p599115247353"><a name="zh-cn_topic_0000001127125042_p599115247353"></a><a name="zh-cn_topic_0000001127125042_p599115247353"></a>paced：线性，设置此项后keyTimes和keyPoints值无效</p> 122<p id="zh-cn_topic_0000001127125042_p1734674418335"><a name="zh-cn_topic_0000001127125042_p1734674418335"></a><a name="zh-cn_topic_0000001127125042_p1734674418335"></a>spline：自定义贝塞尔曲线，spline点定义在keyTimes属性中，每个时间间隔控制点由keySplines定义</p> 123</td> 124</tr> 125<tr id="zh-cn_topic_0000001127125042_row1021415563011"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125042_p1921455183019"><a name="zh-cn_topic_0000001127125042_p1921455183019"></a><a name="zh-cn_topic_0000001127125042_p1921455183019"></a>keyTimes</p> 126</td> 127<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125042_p102145515309"><a name="zh-cn_topic_0000001127125042_p102145515309"></a><a name="zh-cn_topic_0000001127125042_p102145515309"></a>string</p> 128</td> 129<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125042_p162141751306"><a name="zh-cn_topic_0000001127125042_p162141751306"></a><a name="zh-cn_topic_0000001127125042_p162141751306"></a>-</p> 130</td> 131<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125042_p1621485203020"><a name="zh-cn_topic_0000001127125042_p1621485203020"></a><a name="zh-cn_topic_0000001127125042_p1621485203020"></a>否</p> 132</td> 133<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125042_p621412519306"><a name="zh-cn_topic_0000001127125042_p621412519306"></a><a name="zh-cn_topic_0000001127125042_p621412519306"></a>设置关键帧动画的开始时间，值为0~1之间的数值用分号隔开，比如0;0.3;0.8;1。keyTimes、keySplines、values组合设置关键帧动画。keyTimes和values的个数保持一致。keySplines个数为keyTimes个数减一</p> 134</td> 135</tr> 136<tr id="zh-cn_topic_0000001127125042_row18385173510392"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125042_p738623513914"><a name="zh-cn_topic_0000001127125042_p738623513914"></a><a name="zh-cn_topic_0000001127125042_p738623513914"></a>keySplines</p> 137</td> 138<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125042_p143861535123917"><a name="zh-cn_topic_0000001127125042_p143861535123917"></a><a name="zh-cn_topic_0000001127125042_p143861535123917"></a>string</p> 139</td> 140<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125042_p20386103533910"><a name="zh-cn_topic_0000001127125042_p20386103533910"></a><a name="zh-cn_topic_0000001127125042_p20386103533910"></a>-</p> 141</td> 142<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125042_p193861235183917"><a name="zh-cn_topic_0000001127125042_p193861235183917"></a><a name="zh-cn_topic_0000001127125042_p193861235183917"></a>否</p> 143</td> 144<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125042_p5386113518391"><a name="zh-cn_topic_0000001127125042_p5386113518391"></a><a name="zh-cn_topic_0000001127125042_p5386113518391"></a>与keyTimes相关联的一组贝塞尔控制点。定义每个关键帧的贝塞尔曲线，曲线之间用分号隔开。曲线内的两个控制掉格式为x1 y1 x2 y2。比如0.5 0 0.5 1; 0.5 0 0.5 1;0.5 0 0.5 1</p> 145</td> 146</tr> 147<tr id="zh-cn_topic_0000001127125042_row136799388349"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125042_p1472514210595"><a name="zh-cn_topic_0000001127125042_p1472514210595"></a><a name="zh-cn_topic_0000001127125042_p1472514210595"></a>by</p> 148</td> 149<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125042_p272614211599"><a name="zh-cn_topic_0000001127125042_p272614211599"></a><a name="zh-cn_topic_0000001127125042_p272614211599"></a>number</p> 150</td> 151<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125042_p9726202114595"><a name="zh-cn_topic_0000001127125042_p9726202114595"></a><a name="zh-cn_topic_0000001127125042_p9726202114595"></a>-</p> 152</td> 153<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125042_p2072682110592"><a name="zh-cn_topic_0000001127125042_p2072682110592"></a><a name="zh-cn_topic_0000001127125042_p2072682110592"></a>否</p> 154</td> 155<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125042_p772662145916"><a name="zh-cn_topic_0000001127125042_p772662145916"></a><a name="zh-cn_topic_0000001127125042_p772662145916"></a>在动画中对某一指定属性，添加相对偏移值，from默认为原属性值。</p> 156</td> 157</tr> 158<tr id="zh-cn_topic_0000001127125042_row17371104994019"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125042_p93721649164018"><a name="zh-cn_topic_0000001127125042_p93721649164018"></a><a name="zh-cn_topic_0000001127125042_p93721649164018"></a>from</p> 159</td> 160<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125042_p1437294914015"><a name="zh-cn_topic_0000001127125042_p1437294914015"></a><a name="zh-cn_topic_0000001127125042_p1437294914015"></a>string</p> 161</td> 162<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125042_p05167580429"><a name="zh-cn_topic_0000001127125042_p05167580429"></a><a name="zh-cn_topic_0000001127125042_p05167580429"></a>-</p> 163</td> 164<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125042_p205161158184210"><a name="zh-cn_topic_0000001127125042_p205161158184210"></a><a name="zh-cn_topic_0000001127125042_p205161158184210"></a>否</p> 165</td> 166<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125042_p17372184944016"><a name="zh-cn_topic_0000001127125042_p17372184944016"></a><a name="zh-cn_topic_0000001127125042_p17372184944016"></a>设置需要进行动画的属性的开始值。</p> 167<p id="zh-cn_topic_0000001127125042_p18674115684120"><a name="zh-cn_topic_0000001127125042_p18674115684120"></a><a name="zh-cn_topic_0000001127125042_p18674115684120"></a>如果已经设置了values属性，则from失效。</p> 168</td> 169</tr> 170<tr id="zh-cn_topic_0000001127125042_row31035566404"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125042_p1910315684017"><a name="zh-cn_topic_0000001127125042_p1910315684017"></a><a name="zh-cn_topic_0000001127125042_p1910315684017"></a>to</p> 171</td> 172<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125042_p71035562408"><a name="zh-cn_topic_0000001127125042_p71035562408"></a><a name="zh-cn_topic_0000001127125042_p71035562408"></a>string</p> 173</td> 174<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125042_p1215689435"><a name="zh-cn_topic_0000001127125042_p1215689435"></a><a name="zh-cn_topic_0000001127125042_p1215689435"></a>-</p> 175</td> 176<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125042_p2156814315"><a name="zh-cn_topic_0000001127125042_p2156814315"></a><a name="zh-cn_topic_0000001127125042_p2156814315"></a>否</p> 177</td> 178<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125042_p131031856134010"><a name="zh-cn_topic_0000001127125042_p131031856134010"></a><a name="zh-cn_topic_0000001127125042_p131031856134010"></a>设置需要进行动画的属性的结束值。</p> 179<p id="zh-cn_topic_0000001127125042_p3660170134220"><a name="zh-cn_topic_0000001127125042_p3660170134220"></a><a name="zh-cn_topic_0000001127125042_p3660170134220"></a>如果已经设置了values属性，则to都失效。</p> 180</td> 181</tr> 182<tr id="zh-cn_topic_0000001127125042_row8777175111408"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125042_p1777735117405"><a name="zh-cn_topic_0000001127125042_p1777735117405"></a><a name="zh-cn_topic_0000001127125042_p1777735117405"></a>values</p> 183</td> 184<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125042_p1377785119406"><a name="zh-cn_topic_0000001127125042_p1377785119406"></a><a name="zh-cn_topic_0000001127125042_p1377785119406"></a>string</p> 185</td> 186<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125042_p135001510174320"><a name="zh-cn_topic_0000001127125042_p135001510174320"></a><a name="zh-cn_topic_0000001127125042_p135001510174320"></a>-</p> 187</td> 188<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125042_p8500151044311"><a name="zh-cn_topic_0000001127125042_p8500151044311"></a><a name="zh-cn_topic_0000001127125042_p8500151044311"></a>否</p> 189</td> 190<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125042_p1277755115407"><a name="zh-cn_topic_0000001127125042_p1277755115407"></a><a name="zh-cn_topic_0000001127125042_p1277755115407"></a>设置一组动画的变化值。格式为value1;value2;value3。</p> 191</td> 192</tr> 193</tbody> 194</table> 195 196## 示例<a name="zh-cn_topic_0000001127125042_section360556124815"></a> 197 198``` 199<!-- xxx.hml --> 200<div class="container"> 201 <svg width="400" height="400"> 202 <rect x="20" y="20" width="100" height="100" fill="red" rx="0" ry="20"> 203 <animate attributeName="rx" values="0;10;30;0" keyTimes="0;0.25;0.75;1" 204 keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1" dur="1000" repeatCount="indefinite"> 205 </animate> 206 </rect> 207 </svg> 208</div> 209``` 210 211 212 213``` 214<!-- xxx.hml --> 215<div class="container"> 216 <svg width="400" height="400"> 217 <rect x="20" y="20" width="100" height="100" fill="red" rx="0" ry="20"> 218 <animate attributeName="fill" from="red" to="blue" dur="1000" repeatCount="indefinite"></animate> 219 <animate attributeName="height" from="50" to="150" dur="500" repeatCount="indefinite"></animate> 220 </rect> 221 </svg> 222</div> 223``` 224 225 226 227``` 228<!-- xxx.hml --> 229<div class="container"> 230 <svg width="400" height="400"> 231 <rect x="20" y="20" width="100" height="100" fill="red" rx="0" ry="20"> 232 <animate attributeName="rx" values="0;30" dur="1000" repeatCount="10" fill="freeze" calcMode="linear"></animate> 233 </rect> 234 </svg> 235</div> 236``` 237 238 239 240``` 241<!-- xxx.hml --> 242<div class="container"> 243 <svg fill="white" width="600" height="600"> 244 <circle cx="60" cy="70" r="50" stroke-width="4" fill="white" stroke="blue"> 245 <animate attributeName="r" from="0" to="50" dur="2000" repeatCount="indefinite"></animate> 246 <animate attributeName="cx" from="60" to="200" dur="2000" repeatCount="indefinite"></animate> 247 </circle> 248 <circle cx="60" cy="200" r="50" stroke-width="4" fill="white" stroke="blue"> 249 <animate attributeName="stroke-width" from="4" to="10" calcMode="discrete" dur="2000" repeatCount="indefinite"></animate> 250 <animate attributeName="stroke" values="red;blue" dur="2000" repeatCount="indefinite"></animate> 251 </circle> 252 <circle cx="180" cy="200" r="50" stroke-width="10" stroke="red" stroke-dasharray="60 10" stroke-dashoffset="3"> 253 <animate attributeName="stroke-opacity" from="1.0" to="0.5" dur="2000" repeatCount="indefinite"></animate> 254 <animate attributeName="stroke-dashoffset" values="30;0;30" dur="500" repeatCount="indefinite"></animate> 255 <animate attributeName="cx" from="180" to="400" dur="2000" repeatCount="indefinite"></animate> 256 </circle> 257 <circle cx="180" cy="200" r="5" fill="blue" > 258 <animate attributeName="cx" from="180" to="400" dur="2000" repeatCount="indefinite"></animate> 259 </circle> 260 <circle cx="60" cy="380" r="50" fill="blue"> 261 <animate attributeName="fill" values="red;blue" dur="2000" repeatCount="indefinite"></animate> 262 </circle> 263 <circle cx="180" cy="380" r="50" fill="blue"> 264 <animate attributeName="fill-opacity" from="1.0" to="0.5" dur="2000" repeatCount="indefinite"></animate> 265 </circle> 266 </svg> 267</div> 268``` 269 270 271 272
