mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2025-10-30 23:23:02 +00:00
Code Issues Releases Wiki Activity

Refactor scrolling animation to use requestAnimationFrame() instead of setInterval()

Browse Source
This commit is contained in:
Jeremy Ruston
2013-06-10 14:11:58 +01:00
parent 0ce1d48fbb
commit 3cda8758ae
1 changed files with 24 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
core/modules/utils/dom/scroller.js
View File

@@ -16,13 +16,27 @@ Module that creates a $tw.utils.Scroller object prototype that manages scrolling
Event handler for when the `tw-scroll` event hits the document body Event handler for when the `tw-scroll` event hits the document body
*/ */
var PageScroller = function() { var PageScroller = function() {
this.timerId = null; this.idRequestFrame = null;
this.requestAnimationFrame = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(callback) {
return window.setTimeout(callback, 1000/60);
};
this.cancelAnimationFrame = window.cancelAnimationFrame ||
window.webkitCancelAnimationFrame ||
window.webkitCancelRequestAnimationFrame ||
window.mozCancelAnimationFrame ||
window.mozCancelRequestAnimationFrame ||
function(id) {
window.clearTimeout(id);
};
}; };
PageScroller.prototype.cancelScroll = function() { PageScroller.prototype.cancelScroll = function() {
if(this.timerId) { if(this.idRequestFrame) {
window.clearInterval(this.timerId); this.cancelAnimationFrame.call(window,this.idRequestFrame);
this.timerId = null; this.idRequestFrame = null;
} }
}; };
@@ -78,8 +92,9 @@ PageScroller.prototype.scrollIntoView = function(event) {
endY = getEndPos(bounds.top,bounds.height,scrollPosition.y,window.innerHeight); endY = getEndPos(bounds.top,bounds.height,scrollPosition.y,window.innerHeight);
// Only scroll if necessary // Only scroll if necessary
if(endX !== scrollPosition.x || endY !== scrollPosition.y) { if(endX !== scrollPosition.x || endY !== scrollPosition.y) {
var self = this; var self = this,
this.timerId = window.setInterval(function() { drawFrame;
drawFrame = function () {
var t = ((new Date()) - self.startTime) / $tw.config.preferences.animationDuration; var t = ((new Date()) - self.startTime) / $tw.config.preferences.animationDuration;
if(t >= 1) { if(t >= 1) {
self.cancelScroll(); self.cancelScroll();
@@ -87,7 +102,9 @@ PageScroller.prototype.scrollIntoView = function(event) {
} }
t = $tw.utils.slowInSlowOut(t); t = $tw.utils.slowInSlowOut(t);
window.scrollTo(scrollPosition.x + (endX - scrollPosition.x) * t,scrollPosition.y + (endY - scrollPosition.y) * t); window.scrollTo(scrollPosition.x + (endX - scrollPosition.x) * t,scrollPosition.y + (endY - scrollPosition.y) * t);
}, 10); self.idRequestFrame = self.requestAnimationFrame.call(window,drawFrame);
};
drawFrame();
} }
}; };