From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001
From: Peter Bengtsson <mail@peterbe.com>
Date: Tue, 8 Dec 2020 14:40:17 -0500
Subject: initial commit

---
 files/zh-cn/web/svg/attribute/keytimes/index.html | 97 +++++++++++++++++++++++
 1 file changed, 97 insertions(+)
 create mode 100644 files/zh-cn/web/svg/attribute/keytimes/index.html

(limited to 'files/zh-cn/web/svg/attribute/keytimes/index.html')

diff --git a/files/zh-cn/web/svg/attribute/keytimes/index.html b/files/zh-cn/web/svg/attribute/keytimes/index.html
new file mode 100644
index 0000000000..b3aaab6aef
--- /dev/null
+++ b/files/zh-cn/web/svg/attribute/keytimes/index.html
@@ -0,0 +1,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>
-- 
cgit v1.2.3-54-g00ecf