アニメーションは初めてですが、最近setTimeout
を使用してアニメーションを作成しました。 FPSが低すぎたため、この link で説明されているrequestAnimationFrame
を使用する解決策を見つけました。
これまでのところ、私のコードは次のとおりです。
_//shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
return
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function */ callback){
window.setTimeout(callback, 1000 / 60);
};
})();
(function animloop(){
//Get metrics
var leftCurveEndX = finalLeft - initialLeft;
var leftCurveEndY = finalTop + finalHeight - initialTop;
var rightCurveEndX = finalLeft + finalWidth - initialLeft - initialWidth;
var rightCurveEndY = leftCurveEndY;
chopElement(0, 0, 0, 0, leftCurveEndX, leftCurveEndY, rightCurveEndX, rightCurveEndY);//Creates a new frame
requestAnimFrame(animloop);
})();
_
これは最初のフレーム中に停止します。 chopElement
関数にコールバック関数requestAnimFrame(animloop);
があります。
また、このAPIを使用するための詳細なガイドはありますか?
警告!この質問は、shimrequestAnimFrame
の最良の方法に関するものではありません。それを探しているなら、このページの他の答えに進んでください。
自動セミコロン挿入によってだまされました。これを試して:
window.requestAnimFrame = function(){
return (
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function */ callback){
window.setTimeout(callback, 1000 / 60);
}
);
}();
javascriptはreturn
ステートメントの後ろにセミコロンを自動的に配置します。これは、改行が続き、次の行が有効な式であるためです。実際、次のように翻訳されます。
return;
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function */ callback){
window.setTimeout(callback, 1000 / 60);
};
このコードはundefined
を返し、returnステートメントの背後でコードを実行することはありません。そう window.requestAnimFrame
はundefined
です。 animloop
で呼び出すと、javascriptはエラーを生成し、実行を停止します。式を括弧で囲むことで問題を解決できます。
Chrome開発者ツールまたはjavascriptの実行を検査するfirebugをお勧めします。これらのツールを使用すると、エラーが発生するはずです。
不明なTypeError:オブジェクト[オブジェクトDOMWindow]のプロパティ 'requestAnimFrame'は関数ではありません
window.requestAnimFrame
を押してEnterキーを押すと、undefined
と表示されます。ここまでで、問題は実際にはrequestAnimationFrame
とは無関係であり、コードの最初の部分に集中する必要があることがわかりました。また、 このビデオ をご覧ください。javascriptを作成するためのいくつかの優れたプラクティスについて、彼は邪悪な自動セミコロン挿入についても言及しています。
/*
Provides requestAnimationFrame in a cross browser way.
http://paulirish.com/2011/requestanimationframe-for-smart-animating/
*/
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = (function() {
return window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame || // comment out if FF4 is slow (it caps framerate at ~30fps: https://bugzilla.mozilla.org/show_bug.cgi?id=630127)
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
window.setTimeout(callback, 1000 / 60);
};
})();
}
animate();
function animate() {
requestAnimationFrame(animate);
draw();
}
function draw() {
// Put your code here
}
以下のjsfiddleの例を見てください。それは私が意味することを明確に示しています。
http://jsfiddle.net/XQpzU/4358/light/
お役に立てれば!
「画面が変更を再描画できる回数を超えてイベントが発生しないようにするスマートスロットル:
var requestFrame = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
// polyfill - throttle fall-back for unsupported browsers
(function() {
var throttle = false,
FPS = 1000 / 60; // 60fps (in ms)
return function(CB) {
if( throttle ) return;
throttle = true;
setTimeout(function(){ throttle = false }, FPS);
CB(); // do your thing
}
})();
/////////////////////////////
// use case:
function doSomething() {
console.log('fired');
}
window.onscroll = function() {
requestFrame(doSomething);
};
html, body{ height:300%; }
body::before{ content:'scroll here'; position:fixed; font:2em Arial; }