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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
|
---
title: Element.animate()
slug: Web/API/Element/animate
translation_of: Web/API/Element/animate
---
<div>{{APIRef('Web Animations')}} {{SeeCompatTable}}</div>
<p>{{domxref("Element")}} インターフェースの <strong><code>animate()</code></strong> メソッドは、新たに {{domxref("Animation")}} の作成、対象要素への適用、そしてアニメーションの再生を行うショートカットメソッドです。戻り値として {{domxref("Animation")}} オブジェクトのインスタンスを返します。</p>
<h2 id="構文">構文</h2>
<pre class="syntaxbox"><var>element</var>.animate(<var>keyframes</var>, <var>options</var>);
</pre>
<h3 id="引数">引数</h3>
<dl>
<dt><code>keyframes</code></dt>
</dl>
<ol>
<li>列挙可能な値の配列をプロパティに持つ keyframes オブジェクト</li>
<li>keyframes オブジェクトから成る配列</li>
</ol>
<dl>
<dd>のどちらかを指定します。keyframes 形式の詳細については <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats">Keyframe Formats</a> で確認できます。</dd>
<dd>
<ol>
<li>変化させたい CSS プロパティをキーとし、そのプロパティ値を遷移の順番に並べた配列を値としたオブジェクト
<pre class="brush: js"><em>element.</em>animate({
opacity: [ 0, 1 ], // [ フレーム 1, フレーム 2 ]
color: [ "#fff", "#000" ] // [ フレーム 1, フレーム 2 ]
}, 2000);
</pre>
</li>
<li>CSS プロパティとそのプロパティ値からなるオブジェクトを、遷移の順番に並べた配列
<pre class="brush: js"><em>element</em>.animate([
{ // フレーム 1
opacity: 0,
color: "#fff"
},
{ // フレーム 2
opacity: 1,
color: "#000"
}
], 2000);</pre>
</li>
</ol>
</dd>
<dt><code>options</code></dt>
<dd>アニメーションの再生時間を表す ms 単位の整数値、または <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Animation_timing_options">animation timing options</a> を含むオブジェクトを渡す必要があります。後者の場合、<a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Animation_timing_options">animation timing options</a> のプロパティに加え、以下のようなプロパティも追加して <code>animate()</code> に渡すことができます。</dd>
</dl>
<h4 id="keyframeOptions_に追加できるプロパティ">keyframeOptions に追加できるプロパティ</h4>
<dl>
<dt><code>id</code></dt>
<dd>アニメーションを参照する文字列</dd>
</dl>
<dl>
<dt><code>composite</code></dt>
<dd>Determines how values are combined between this animation and other, separate animations that do not specify their own specific composite operation. デフォルト値は <code>replace</code> です。
<ul>
<li><code>add</code> dictates an additive effect, where each successive iteration builds on the last. 例として <code>transform</code> <code>を挙げると</code>、<code>translateX(-200px)</code> は自身よりも前に指定されていた <code>rotate(20deg)</code> の値を上書きすることはありませんが、合成結果は <code>translateX(-200px) rotate(20deg)</code> になります。</li>
<li><code>accumulate</code> を指定した場合、<code>add</code> に似ていますがよりスマートな結果が得られ、<code>blur(2)</code> と <code>blur(5)</code> の合成結果は <code>blur(7)</code> になります（<code>blur(2) blur(5)</code> ではありません）。</li>
<li><code>replace</code> を指定した場合、前回の値は新しい値で上書きされます。</li>
</ul>
</dd>
<dt><code>iterationComposite</code></dt>
<dd>Defines the way animation values build from iteration to iteration. <code>accumulate</code> または <code>replace</code> を指定できます（上記参照）。デフォルト値は <code>replace</code> です。</dd>
<dt><code>spacing</code></dt>
<dd>アニメーションの再生時間内にわたって、時間軸上におけるキーフレームの配置方法を指定します。ただし、時間のオフセットは指定されていないものと仮定して計算が行われます。デフォルト値は <code>distribute</code> です。
<ul>
<li><code>distribute</code> を指定した場合、キーフレーム間の時間間隔が等しくなるように配置されます。</li>
<li><code>paced</code> を指定した場合、キーフレーム間のアニメーションにおける時間変化の割合（下図におけるグラフの傾き）が等しくなるように配置されます。</li>
</ul>
<p>以下の例では、CSS の left プロパティに関する 4 つのキーフレームを指定したアニメーションについて、spacing プロパティの働きを示しています（ここでは<a href="https://w3c.github.io/web-animations/#spacing-keyframes">仕様書の例</a>を参考にしています）。</p>
<pre class="brush: js">/* 左のグラフ */
elem.animate([ { left: '0px' },
{ left: '-20px' },
{ left: '100px' },
{ left: '50px' }
], 1000); /* spacing はデフォルト値 "distribute" */
</pre>
<pre class="brush: js">/* 右のグラフ */
elem.animate([ { left: '0px' },
{ left: '-20px' },
{ left: '100px' },
{ left: '50px' }
], { duration: 1000, spacing: "paced(left)" });</pre>
<p><img alt="" src="https://w3c.github.io/web-animations/img/spacing-distribute.svg" style="height: 210px; width: 200px;"> <img alt=" " src="https://w3c.github.io/web-animations/img/spacing-paced.svg" style="height: 210px; width: 200px;"></p>
</dd>
</dl>
<h3 id="戻り値">戻り値</h3>
<p>{{domxref("Animation")}} を返します。</p>
<h2 id="使用例">使用例</h2>
<p><a href="https://codepen.io/rachelnabors/pen/rxpmJL/?editors=0010">Down the Rabbit Hole (with the Web Animation API)</a> のデモでは、上に向かって永遠に流れ続けるアニメーションが <code>#tunnel</code> 要素に施されています。ここでは、アニメーションを素早く作成して再生できる <code>animate()</code> メソッドが用いられています。keyframes として渡されているオブジェクト配列と、timing options として渡されているオブジェクトに注目してください。</p>
<pre class="brush: js">document.getElementById("tunnel").animate([
// keyframes
{ transform: 'translate3D(0, 0, 0)' },
{ transform: 'translate3D(0, -300px, 0)' }
], {
// timing options
duration: 1000,
iterations: Infinity
});
</pre>
<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', '#the-animatable-interface', 'animate()' )}}</td>
<td>{{Spec2('Web Animations')}}</td>
<td>Editor's draft.</td>
</tr>
</tbody>
</table>
<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>機能</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>基本サポート</td>
<td>{{CompatChrome("39")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{ CompatGeckoDesktop("47.0")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>機能</th>
<th>Android</th>
<th>Android Webview</th>
<th>Chrome for Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>Firefox OS</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>
<p>基本サポート</p>
</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{ CompatGeckoMobile("47.0")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="参考情報">参考情報</h2>
<ul>
<li><a href="/ja/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
<li>{{domxref("Animation")}}</li>
</ul>
|
