From d6707e7bc591b7526269b1cf52bb9db8eeb940b4 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 9 Mar 2022 22:53:14 +0900 Subject: JavaScript タイマー関係のメソッドを移行 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../api/window/requestanimationframe/index.html | 110 --------------------- .../web/api/window/requestanimationframe/index.md | 110 +++++++++++++++++++++ 2 files changed, 110 insertions(+), 110 deletions(-) delete mode 100644 files/ja/web/api/window/requestanimationframe/index.html create mode 100644 files/ja/web/api/window/requestanimationframe/index.md (limited to 'files/ja/web/api/window/requestanimationframe') diff --git a/files/ja/web/api/window/requestanimationframe/index.html b/files/ja/web/api/window/requestanimationframe/index.html deleted file mode 100644 index 4c1b3bede1..0000000000 --- a/files/ja/web/api/window/requestanimationframe/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: Window.requestAnimationFrame() -slug: Web/API/Window/requestAnimationFrame -tags: - - API - - Animations - - DOM - - DOM Reference - - Drawing - - Games - - Graphics - - Intermediate - - JavaScript timers - - Method - - Performance - - Reference - - Scheduling - - Window - - requestAnimationFrame -translation_of: Web/API/window/requestAnimationFrame ---- -
{{APIRef}}
- -

window.requestAnimationFrame() メソッドは、ブラウザにアニメーションを行いたいことを知らせ、指定した関数を呼び出して次の再描画の前にアニメーションを更新することを要求します。このメソッドは、再描画の前に呼び出されるコールバック 1 個を引数として取ります。

- -
メモ: 次の再描画時に別のフレームをアニメーションさせたいときは、コールバックルーチン自身で requestAnimationFrame() を呼ばなければなりません。
- -

このメソッドは、いつでも画面上でアニメーションの更新準備が整った時に呼び出してください。これにより、ブラウザの次の再描画が実行される前にアニメーション関数が呼び出されることを要求します。このコールバックの回数は、たいてい毎秒 60 回ですが、一般的に多くのブラウザーでは W3C の勧告に従って、ディスプレイのリフレッシュレートに合わせて行われます。ただし、コールバックの確率は、バックグラウンドのタブや隠れた {{ HTMLElement("iframe") }} では、パフォーマンス向上やバッテリー消費を減らすために低くなるでしょう。

- -

コールバックメソッドには、1 個の引数 {{domxref("DOMHighResTimeStamp")}} が渡されます。これは、requestAnimationFrame の発火開始によりコールバックがキューに追加された時点の現在時刻を示します。単一フレーム内で複数のコールバックがあり、前のコールバックで計算負荷が生じていいても、各コールバックは同じタイムスタンプを受け取ります。このタイムスタンプは、ミリ秒単位の十進数ですが、その最小精度は 1ms (1000 µs) です。

- -

構文

- -
window.requestAnimationFrame(callback);
-
- -

引数

- -
-
callback
-
次の再描画でアニメーションを更新する時に呼び出す関数を指定します。コールバック関数は 1 個の引数 {{domxref("DOMHighResTimeStamp")}} を受け取ります。この引数は、requestAnimationFrame がコールバックの呼び出しを開始した現在時刻 ( {{domxref('performance.now()')}} から返された時刻 ) を示します。
-
- -

返値

- -

コールバックリスト内のエントリーを一意に識別するための、倍精度整数値の requestID を返します。この値は非ゼロ値ですが、値そのものを推定することはできないでしょう。この値を {{domxref("window.cancelAnimationFrame()")}} に渡すことで、コールバック関数の更新を中止できます。

- -

例

- -
var start = null;
-var element = document.getElementById('SomeElementYouWantToAnimate');
-
-function step(timestamp) {
-  if (!start) start = timestamp;
-  var progress = timestamp - start;
-  element.style.transform = 'translateX(' + Math.min(progress / 10, 200) + 'px)';
-  if (progress < 2000) {
-    window.requestAnimationFrame(step);
-  }
-}
-
-window.requestAnimationFrame(step);
-
- -

メモ

- -

Edge のバージョン17以前と Internet Explorer は、描画サイクルの前に requestAnimationFrame を確実に発行するとは限りません。

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('HTML WHATWG', '#animation-frames', 'requestAnimationFrame')}}{{Spec2('HTML WHATWG')}}変更なし、以前のものを置き換える
{{SpecName('RequestAnimationFrame', '#dom-windowanimationtiming-requestanimationframe', 'requestAnimationFrame')}}{{Spec2('RequestAnimationFrame')}}初回定義
- -

ブラウザーの対応

- -
-

{{Compat("api.Window.requestAnimationFrame")}}

-
- -

関連情報

- - diff --git a/files/ja/web/api/window/requestanimationframe/index.md b/files/ja/web/api/window/requestanimationframe/index.md new file mode 100644 index 0000000000..4c1b3bede1 --- /dev/null +++ b/files/ja/web/api/window/requestanimationframe/index.md @@ -0,0 +1,110 @@ +--- +title: Window.requestAnimationFrame() +slug: Web/API/Window/requestAnimationFrame +tags: + - API + - Animations + - DOM + - DOM Reference + - Drawing + - Games + - Graphics + - Intermediate + - JavaScript timers + - Method + - Performance + - Reference + - Scheduling + - Window + - requestAnimationFrame +translation_of: Web/API/window/requestAnimationFrame +--- +
{{APIRef}}
+ +

window.requestAnimationFrame() メソッドは、ブラウザにアニメーションを行いたいことを知らせ、指定した関数を呼び出して次の再描画の前にアニメーションを更新することを要求します。このメソッドは、再描画の前に呼び出されるコールバック 1 個を引数として取ります。

+ +
メモ: 次の再描画時に別のフレームをアニメーションさせたいときは、コールバックルーチン自身で requestAnimationFrame() を呼ばなければなりません。
+ +

このメソッドは、いつでも画面上でアニメーションの更新準備が整った時に呼び出してください。これにより、ブラウザの次の再描画が実行される前にアニメーション関数が呼び出されることを要求します。このコールバックの回数は、たいてい毎秒 60 回ですが、一般的に多くのブラウザーでは W3C の勧告に従って、ディスプレイのリフレッシュレートに合わせて行われます。ただし、コールバックの確率は、バックグラウンドのタブや隠れた {{ HTMLElement("iframe") }} では、パフォーマンス向上やバッテリー消費を減らすために低くなるでしょう。

+ +

コールバックメソッドには、1 個の引数 {{domxref("DOMHighResTimeStamp")}} が渡されます。これは、requestAnimationFrame の発火開始によりコールバックがキューに追加された時点の現在時刻を示します。単一フレーム内で複数のコールバックがあり、前のコールバックで計算負荷が生じていいても、各コールバックは同じタイムスタンプを受け取ります。このタイムスタンプは、ミリ秒単位の十進数ですが、その最小精度は 1ms (1000 µs) です。

+ +

構文

+ +
window.requestAnimationFrame(callback);
+
+ +

引数

+ +
+
callback
+
次の再描画でアニメーションを更新する時に呼び出す関数を指定します。コールバック関数は 1 個の引数 {{domxref("DOMHighResTimeStamp")}} を受け取ります。この引数は、requestAnimationFrame がコールバックの呼び出しを開始した現在時刻 ( {{domxref('performance.now()')}} から返された時刻 ) を示します。
+
+ +

返値

+ +

コールバックリスト内のエントリーを一意に識別するための、倍精度整数値の requestID を返します。この値は非ゼロ値ですが、値そのものを推定することはできないでしょう。この値を {{domxref("window.cancelAnimationFrame()")}} に渡すことで、コールバック関数の更新を中止できます。

+ +

例

+ +
var start = null;
+var element = document.getElementById('SomeElementYouWantToAnimate');
+
+function step(timestamp) {
+  if (!start) start = timestamp;
+  var progress = timestamp - start;
+  element.style.transform = 'translateX(' + Math.min(progress / 10, 200) + 'px)';
+  if (progress < 2000) {
+    window.requestAnimationFrame(step);
+  }
+}
+
+window.requestAnimationFrame(step);
+
+ +

メモ

+ +

Edge のバージョン17以前と Internet Explorer は、描画サイクルの前に requestAnimationFrame を確実に発行するとは限りません。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', '#animation-frames', 'requestAnimationFrame')}}{{Spec2('HTML WHATWG')}}変更なし、以前のものを置き換える
{{SpecName('RequestAnimationFrame', '#dom-windowanimationtiming-requestanimationframe', 'requestAnimationFrame')}}{{Spec2('RequestAnimationFrame')}}初回定義
+ +

ブラウザーの対応

+ +
+

{{Compat("api.Window.requestAnimationFrame")}}

+
+ +

関連情報

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