サーチ…
構文
- window.requestAnimationFrame（ コールバック ）;
- window.webkitRequestAnimationFrame（ コールバック ）;
- window.mozRequestAnimationFrame（ コールバック ）;
パラメーター
| パラメータ | 詳細 |
|---|---|
| 折り返し電話 | "次の再描画のためにアニメーションを更新するときに呼び出す関数を指定するパラメータ" （ https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame） |
備考
DOM要素を流動的にアニメーション化する場合、次のCSS遷移に制限されます。
- POSITION -
transform: translate (npx, npx); - スケール
transform: scale(n); -
transform: rotate(ndeg);-transform: rotate(ndeg); - OPACITY -
opacity: 0;
ただし、これらを使用しても、アニメーションが流動的になることは保証されません。これは、ブラウザで何が起こっているかにかかわらず、新しいpaintサイクルを開始するためです。基本的に、 paintは非効率的に行われ、アニメーションは1秒あたりのフレーム数（FPS）が苦しんでいるため「ジャンク」に見えます。
可能な限り滑らかなDOMアニメーションを保証するには、上記のCSSトランジションと一緒にrequestAnimationFrameを使用する必要があります。
この理由は、 requestAnimationFrame APIが、 非RAFアニメーションが呼び出されたときに新しいペイントサイクルを強制するために何が起こっているのかを中断するのではなく 、次のpaintサイクルでアニメーションを発生させることをブラウザに知らせるためです。
requestAnimationFrameを使用して要素をフェードイン
- jsFiddleを見る ： https : //jsfiddle.net/HimmatChahal/jb5trg67/
- 次のコードをコピーして貼り付け可能 ：
<html>
<body>
<h1>This will fade in at 60 frames per second (or as close to possible as your hardware allows)</h1>
<script>
// Fade in over 2000 ms = 2 seconds.
var FADE_DURATION = 2.0 * 1000;
// -1 is simply a flag to indicate if we are rendering the very 1st frame
var startTime=-1.0;
// Function to render current frame (whatever frame that may be)
function render(currTime) {
var head1 = document.getElementsByTagName('h1')[0];
// How opaque should head1 be? Its fade started at currTime=0.
// Over FADE_DURATION ms, opacity goes from 0 to 1
var opacity = (currTime/FADE_DURATION);
head1.style.opacity = opacity;
}
// Function to
function eachFrame() {
// Time that animation has been running (in ms)
// Uncomment the console.log function to view how quickly
// the timeRunning updates its value (may affect performance)
var timeRunning = (new Date()).getTime() - startTime;
//console.log('var timeRunning = '+timeRunning+'ms');
if (startTime < 0) {
// This branch: executes for the first frame only.
// it sets the startTime, then renders at currTime = 0.0
startTime = (new Date()).getTime();
render(0.0);
} else if (timeRunning < FADE_DURATION) {
// This branch: renders every frame, other than the 1st frame,
// with the new timeRunning value.
render(timeRunning);
} else {
return;
}
// Now we're done rendering one frame.
// So we make a request to the browser to execute the next
// animation frame, and the browser optimizes the rest.
// This happens very rapidly, as you can see in the console.log();
window.requestAnimationFrame(eachFrame);
};
// start the animation
window.requestAnimationFrame(eachFrame);
</script>
</body>
</html>
アニメーションをキャンセルする
requestAnimationFrame呼び出しをキャンセルするには、最後に呼び出されたときに返されたIDが必要です。これは、 cancelAnimationFrame使用するパラメータです。次の例では、仮想アニメーションを開始し、1秒後に一時停止します。
// stores the id returned from each call to requestAnimationFrame
var requestId;
// draw something
function draw(timestamp) {
// do some animation
// request next frame
start();
}
// pauses the animation
function pause() {
// pass in the id returned from the last call to requestAnimationFrame
cancelAnimationFrame(requestId);
}
// begin the animation
function start() {
// store the id returned from requestAnimationFrame
requestId = requestAnimationFrame(draw);
}
// begin now
start();
// after a second, pause the animation
setTimeout(pause,1000);
互換性を維持する
もちろん、ブラウザJavaScriptのほとんどのものと同様、すべてがどこでも同じであるという事実には気づくことができません。この場合、 requestAnimationFrameはいくつかのプラットフォームで接頭辞を持つ可能性があり、 webkitRequestAnimationFrameなどの名前が異なります。幸いにも、1つの関数に存在する可能性のある既知の違いをすべてグループ化する本当に簡単な方法があります。
window.requestAnimationFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(callback){
window.setTimeout(callback, 1000 / 60);
};
})();
最後のオプション（既存のサポートが見つからないときに塗りつぶす）は、 cancelAnimationFrameで使用されるidを返さないことにcancelAnimationFrameしてcancelAnimationFrame 。しかし、これを修正するために書かれた効率的なポリフィルがあります。