アニメーションは初めてですが、最近を使用してアニメーションを作成しましたsetTimeout。FPSが低すぎるため、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);
})();
これは最初のフレームで停止します。関数requestAnimFrame(animloop);にコールバック関数がありchopElementます。
また、このAPIを使用するためのより完全なガイドはありますか？
警告！この質問は、シムを行うための最良の方法についてではありません requestAnimFrame。それを探しているなら、このページの他の答えに進んでください。
自動セミコロン挿入でだまされました。これを試して：
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);
};
このコードはundefinedreturnステートメントの背後にあるコードを返し、決して実行しません。そうwindow.requestAnimFrameですundefined。で呼び出すとanimloop、JavaScriptはエラーを生成し、実行を停止します。式を括弧で囲むことで問題を解決できます。
JavaScriptの実行を検査するためにChrome開発者ツールまたはFirebugをお勧めします。これらのツールを使用すると、エラーが発生します。次のようにデバッグする必要があります（私はChromeを想定しています）。
Uncaught TypeError：オブジェクト[object DOMWindow]のプロパティ 'requestAnimFrame'は関数ではありません
window.requestAnimFrame入力し、Enterキーを押すと、それが表示されますundefined。これで、問題は実際には無関係requestAnimationFrameであり、コードの最初の部分に集中する必要があることがわかりました。また、javascriptを作成する際のいくつかの良い習慣については、このビデオをご覧ください。彼は、悪意のあるセミコロンの自動挿入についても言及しています。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加