From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/api/element/animate/index.html | 202 ++++++++++++++++++++++++++++ 1 file changed, 202 insertions(+) create mode 100644 files/ja/web/api/element/animate/index.html (limited to 'files/ja/web/api/element/animate/index.html') diff --git a/files/ja/web/api/element/animate/index.html b/files/ja/web/api/element/animate/index.html new file mode 100644 index 0000000000..dc6e4a39aa --- /dev/null +++ b/files/ja/web/api/element/animate/index.html @@ -0,0 +1,202 @@ +--- +title: Element.animate() +slug: Web/API/Element/animate +translation_of: Web/API/Element/animate +--- +
{{APIRef('Web Animations')}} {{SeeCompatTable}}
+ +

{{domxref("Element")}} インターフェースの animate() メソッドは、新たに {{domxref("Animation")}} の作成、対象要素への適用、そしてアニメーションの再生を行うショートカットメソッドです。戻り値として {{domxref("Animation")}} オブジェクトのインスタンスを返します。

+ +

構文

+ +
element.animate(keyframes, options);
+
+ +

引数

+ +
+
keyframes
+
+ +
    +
  1. 列挙可能な値の配列をプロパティに持つ keyframes オブジェクト
    2. +
  2. keyframes オブジェクトから成る配列
    3. +
+ +
+
のどちらかを指定します。keyframes 形式の詳細については Keyframe Formats で確認できます。
+
+
    +
  1. 変化させたい CSS プロパティをキーとし、そのプロパティ値を遷移の順番に並べた配列を値としたオブジェクト + 
    element.animate({
+  opacity: [ 0, 1 ], // [ フレーム 1, フレーム 2 ]
+  color: [ "#fff", "#000" ] // [ フレーム 1, フレーム 2 ]
+}, 2000);
+
    +
    2. +
  2. CSS プロパティとそのプロパティ値からなるオブジェクトを、遷移の順番に並べた配列 + 
    element.animate([
+  { // フレーム 1
+    opacity: 0,
+    color: "#fff"
+  },
+  { // フレーム 2
+    opacity: 1,
+ ​   color: "#000"
+  }
+], 2000);
    +
    3. +
+
+
options
+
アニメーションの再生時間を表す ms 単位の整数値、または  animation timing options を含むオブジェクトを渡す必要があります。後者の場合、animation timing options のプロパティに加え、以下のようなプロパティも追加して animate() に渡すことができます。
+
+ +

keyframeOptions に追加できるプロパティ

+ +
+
id
+
アニメーションを参照する文字列
+
+ +
+
composite
+
Determines how values are combined between this animation and other, separate animations that do not specify their own specific composite operation. デフォルト値は replace です。 +
    +
  • add dictates an additive effect, where each successive iteration builds on the last. 例として transform を挙げると、translateX(-200px) は自身よりも前に指定されていた rotate(20deg) の値を上書きすることはありませんが、合成結果は translateX(-200px) rotate(20deg) になります。
    • +
  • accumulate を指定した場合、add に似ていますがよりスマートな結果が得られ、blur(2) と blur(5) の合成結果は blur(7) になります（blur(2) blur(5) ではありません）。
    • +
  • replace を指定した場合、前回の値は新しい値で上書きされます。
    • +
+
+
iterationComposite
+
Defines the way animation values build from iteration to iteration. accumulate または replace を指定できます（上記参照）。デフォルト値は replace です。
+
spacing
+
アニメーションの再生時間内にわたって、時間軸上におけるキーフレームの配置方法を指定します。ただし、時間のオフセットは指定されていないものと仮定して計算が行われます。デフォルト値は distribute です。 +
    +
  • distribute を指定した場合、キーフレーム間の時間間隔が等しくなるように配置されます。
    • +
  • paced を指定した場合、キーフレーム間のアニメーションにおける時間変化の割合（下図におけるグラフの傾き）が等しくなるように配置されます。
    • +
+ +

以下の例では、CSS の left プロパティに関する 4 つのキーフレームを指定したアニメーションについて、spacing プロパティの働きを示しています（ここでは仕様書の例を参考にしています）。

+ + 
/* 左のグラフ */
+elem.animate([ { left:   '0px' },
+               { left: '-20px' },
+               { left: '100px' },
+               { left:  '50px' }
+             ], 1000);  /* spacing はデフォルト値 "distribute" */
+
+ + 
/* 右のグラフ */
+elem.animate([ { left:   '0px' },
+               { left: '-20px' },
+               { left: '100px' },
+               { left:  '50px' }
+             ], { duration: 1000, spacing: "paced(left)" });
+ +

 

+
+
+ +

戻り値

+ +

{{domxref("Animation")}} を返します。

+ +

使用例

+ +

Down the Rabbit Hole (with the Web Animation API) のデモでは、上に向かって永遠に流れ続けるアニメーションが #tunnel 要素に施されています。ここでは、アニメーションを素早く作成して再生できる animate() メソッドが用いられています。keyframes として渡されているオブジェクト配列と、timing options として渡されているオブジェクトに注目してください。

+ +
document.getElementById("tunnel").animate([
+  // keyframes
+  { transform: 'translate3D(0, 0, 0)' },
+  { transform: 'translate3D(0, -300px, 0)' }
+], {
+  // timing options
+  duration: 1000,
+  iterations: Infinity
+});
+
+ +

仕様

+ + + + + + + + + + + + + + +
仕様書策定状況備考
{{SpecName('Web Animations', '#the-animatable-interface', 'animate()' )}}{{Spec2('Web Animations')}}Editor's draft.
+ +

ブラウザ実装状況

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
機能ChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
基本サポート{{CompatChrome("39")}}{{CompatUnknown}}{{ CompatGeckoDesktop("47.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
機能AndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
+

基本サポート

+ 		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{ CompatGeckoMobile("47.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

参考情報

+ + -- cgit v1.2.3-54-g00ecf