Я новичок в анимации, но недавно я создал анимацию, используя 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?