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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
|
---
title: 关键帧(Keyframe)格式
slug: Web/API/Web_Animations_API/Keyframe_Formats
tags:
- Animation
- annimate
- 关键帧
- 关键帧格式
translation_of: Web/API/Web_Animations_API/Keyframe_Formats
---
<p>{{ SeeCompatTable() }}{{ APIRef("Web Animations API") }}</p>
<p>{{domxref("Element.animate()")}}, {{domxref("KeyframeEffect.KeyframeEffect()")}}, 和 {{domxref("KeyframeEffect.setKeyframes()")}} 都接受格式为一组关键帧的对象， 这种格式有以下几种选项。</p>
<h2 id="语法">语法</h2>
<div id="keyframe-syntax">
<p>关键帧格式有两种不同的方式：</p>
<ol>
<li>
<p>一个由多个关键帧的属性和值组成的对象所构成的<code>数组</code>。这是{{domxref("KeyframeEffect.getKeyframes()", "getKeyframes()")}}方法返回的规范格式。</p>
<pre class="brush: js"><em>element</em>.animate(<strong>[
{ // from
opacity: 0,
color: "#fff"
},
{ // to
opacity: 1,
color: "#000"
}
]</strong>, 2000);</pre>
<p>对每个关键帧的偏移可以通过提供一个<code>offset</code>来指定。</p>
<pre class="brush: js"><em>element</em>.animate(<strong>[ { opacity: 1 },
{ opacity: 0.1, offset: 0.7 },
{ opacity: 0 } ]</strong>,
2000);
</pre>
<div class="note">
<p><strong>提示</strong>: <code>offset</code> 的值必须是在<strong>[0.0, 1.0]</strong>这个区间内，且须升序排列。</p>
</div>
<p>并非所有的关键帧都需要设置<code>offset</code>。 没有指定<code>offset</code>的关键帧将与相邻的关键帧均匀间隔。</p>
<p>可以通过提供<code>easing</code>过渡来给指定关键帧之间应用过渡效果，如下所示： </p>
<pre class="brush: js"><em>element</em>.animate(<strong>[ { opacity: 1, easing: 'ease-out' },
{ opacity: 0.1, easing: 'ease-in' },
{ opacity: 0 } ]</strong>,
2000);
</pre>
<p>在这个例子中，指定的easing仅适用于指定它的关键帧到下一帧之间。 但是在<code>options</code>中指定的 <code>easing</code> 值都将应用在一个动画的整个持续时间里。</p>
</li>
<li>一个包含key-value键值的<code>对象</code>需要包含动画的属性和要循环变化的值<code>数组</code>。
<pre class="brush: js"><em>element.</em>animate(<strong>{
opacity: [ 0, 1 ], // [ from, to ]
color: [ "#fff", "#000" ] // [ from, to ]
}</strong>, 2000);
</pre>
<p>使用这种格式，每个数组的元素数量不必相等。所提供的值将独立分开。</p>
<pre class="brush: js"><em>element.</em>animate(<strong>{
opacity: [ 0, 1 ], // offset: 0, 1
backgroundColor: [ "red", "yellow", "green" ], // offset: 0, 0.5, 1
}</strong>, 2000);
</pre>
<p>特殊键<code>offset</code>，<code>easing</code>和<code>composite</code>（如下）可以与属性值一起指定。</p>
<pre class="brush: js"><em>element.</em>animate(<strong>{
opacity: [ 0, 0.9, 1 ],
offset: [ 0, 0.8 ], // [ 0, 0.8, 1 ] 的简写
easing: [ 'ease-in', 'ease-out' ],
}</strong>, 2000);
</pre>
<p>从属性值列表生成一组合适的关键帧后，每个提供的偏移量将应用于相应的关键帧。如果值不足或者列表包含空值<code>null</code>，则以没有指定处理（即和上面第1种数组格式的一样均匀间隔）.</p>
<p>如果<code>easing</code> 或<code>composite</code> 值太少，将根据需要，重复相应的列表。</p>
</li>
</ol>
<h2 id="属性">属性</h2>
<p>关键帧可以为任何的css动画属性指定 property-value 。 使用 camel-case 的属性名将变为 camelCase 格式，例如 {{cssxref("background-color")}} 变成 <code>backgroundColor</code> ，再如 {{cssxref("background-position-x")}} 变成 <code>backgroundPositionX</code>.。速记词，例如 {{cssxref("margin")}} 也是可以用的。.</p>
<p>两个特色的css属性：</p>
<ul>
<li>{{cssxref("float")}}, 必须写成 <code>cssFloat</code> ，因为"float" 是 JavaScript的保留关键字</li>
<li>{{cssxref("offset")}}, 必须写成 <code>cssOffset</code> ，因为"offset" 表示如下的关键帧 offset</li>
</ul>
<p>还可以指定以下特色属性：</p>
<dl>
<dt>offset</dt>
<dd>
<p>关键帧的 offset 偏移量指定为介于<code>0.0</code>和<code>1.0</code>之间的数字或为<code>null</code>。 这相当于使用<code>@keyframes</code>在CSS样式表中以百分比指定开始和结束状态。 如果此值为<code>null</code>或缺失，则关键帧将在相邻关键帧之间均匀分布。</p>
</dd>
<dt>easing</dt>
<dd>
<p>从这个关键帧直到这一级中的下一个关键帧所使用的 <a href="/en-US/docs/Web/CSS/timing-function">timing function</a></p>
</dd>
<dt>composite</dt>
<dd>
<p>{{domxref("KeyframeEffect.composite")}} 操作用于将此关键帧中指定的值与基础值组合在一起。 如果正在使用在效果上指定的复合操作，则不会出现这种情况。</p>
</dd>
</dl>
</div>
<h2 id="规范">规范</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">备注</th>
</tr>
<tr>
<td>{{SpecName("Web Animations", "#processing-a-keyframes-argument", "Keyframe object formats")}}</td>
<td>{{Spec2('Web Animations')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
{{Compat("api.Element.animate")}}
<h2 id="相关推荐">相关推荐</h2>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
<li>{{domxref("Element.animate()")}}</li>
<li>{{domxref("KeyframeEffect.KeyframeEffect()")}}</li>
<li>{{domxref("KeyframeEffect.setKeyframes()")}}</li>
</ul>
|
