אנימציה חלקה ב - html5 JavaScript Canvas - requestAnimationFrame

רבים וטובים (וגם אני) משתמשים ב - setTimeout או setInterval בשביל ליצר אנימציה ב - HTML5 JavaScript עם Canvas Tag.

מתכנתים ותיקים בוודאי זוכרים את Vertical Sync שהיינו משתמשים ב - Assembler בכדי להשיג תנועה חלקה.

לאחרונה גיליתי יכולת חדשה של ה - browser בכדי לספק לנו דבר דומה בתכנות JavaScript ב- HTML5 עבור Canvas.

במקום להשתמש ב - setIntrerval / setTimeout ניתן להשתמש ב - requestAnimationFrame אשר קורא לפונקציית הציור של התמונה בקצב המהיר ביותר האפשרי מבחינת ה - browser.

הנה השימוש, בכדי להשיד תמיכה בכל הדפדפנים:

var animationFrame = window.requestAnimationFrame ||
 window.webkitRequestAnimationFrame ||
 window.mozRequestAnimationFrame ||
 window.oRequestAnimationFrame ||
 window.msRequestAnimationFrame ||
 null ;

לפוסט המקורי