files/zh-cn/web/svg/attribute/keytimes/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

---
title: keyTimes
slug: Web/SVG/Attribute/keyTimes
tags:
  - SVG
  - SVG属性
  - keyTimes
translation_of: Web/SVG/Attribute/keyTimes
---
<p>« <a href="/en-US/docs/Web/SVG/Attribute" title="en-US/docs/Web/SVG/Attribute">SVG </a>属性参考主页</p>

<p>keyTimes属性是一个以分号分隔的时间值列表，用于控制动画的执行步骤。列表中的每个值与{{ SVGAttr("values") }}中的值一一对应，定义了{{ SVGAttr("values") }}中的值在动画中何时执行，keyTimes列表中的每一个值都是指定在[0-1]之间的浮点数，表示动画的完成时间。</p>

<p>如果指定了keyTimes列表，那么一定有与之完全对应的{{ SVGAttr("values") }}列表。</p>

<p>每一个连续的时间值必须大于等于前一个时间值。</p>

<p>keyTimes列表的语义取决于插值模式：</p>

<ul>
 <li>对于linear(线性)和spline(样条)动画，列表中的第一个时间值必须为0，列表的最后一个时间值必须为1。与每个value关联的时间值定义了何时设置该value，该value在keyTimes的时间 值的中间插值。</li>
 <li>对于discrete(离线)动画，列表中的第一个值必须为0。与每个value关联的时间值定义了何时设置该value，动画函数使用该value，直到keyTimes中定义的下一个时间值。</li>
</ul>

<p> </p>

<p> </p>

<ul>
</ul>

<p> </p>

<p>如果插值模式是paced（踏步），keyTimes属性被忽略。</p>

<p>如果duration（持续时间）不确定，则将忽略任何keyTimes规范。</p>

<h2 id="用法">用法</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">类别</th>
   <td>动画值属性</td>
  </tr>
  <tr>
   <th scope="row">值</th>
   <td>&lt;list&gt;</td>
  </tr>
  <tr>
   <th scope="row">可变性</th>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">规范文档</th>
   <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#KeyTimesAttribute" title="http://www.w3.org/TR/SVG/animate.html#KeyTimesAttribute">SVG 1.1 (2nd Edition)</a></td>
  </tr>
 </tbody>
</table>

<h2 id="示例">示例</h2>

<pre class="brush: html">&lt;?xml version="1.0"?&gt;
&lt;svg width="120" height="120"
     viewPort="0 0 120 120" version="1.1"
     xmlns="http://www.w3.org/2000/svg"&gt;

    &lt;circle cx="60" cy="10" r="10"&gt;

        &lt;animate attributeName="cx"
                 attributeType="XML"
                 dur="4s"
                 values="60 ; 110 ; 60 ; 10 ; 60"
                 keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"
                 repeatCount="indefinite"/&gt;

        &lt;animate attributeName="cy"
                 attributeType="XML"
                 dur="4s"
                 values="10 ; 60 ; 110 ; 60 ; 10 "
                 keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"
                 repeatCount="indefinite"/&gt;

    &lt;/circle&gt;
&lt;/svg&gt;
</pre>

<h2 id="元素">元素</h2>

<p>以下元素可以使用 <code>keyTimes属性</code></p>

<ul>
 <li>{{ SVGElement("animate") }}</li>
 <li>{{ SVGElement("animateColor") }}</li>
 <li>{{ SVGElement("animateMotion") }}</li>
 <li>{{ SVGElement("animateTransform") }}</li>
</ul>