Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Use requestAnimationFrame instead of setInterval, save cpu cycles for animation #9

Open
wants to merge 1 commit into from

5 participants

@Tin
Tin commented

Use requestAnimationFrame instead of setInterval, save cpu cycles for animation when this api is available. This helps slowly android browsers a bit.

@rsaccon

another option, which combines both (requstAnimationFrame and setInteral) is described by Joe Lambert:
http://blog.joelambert.co.uk/2011/06/01/a-better-settimeoutsetinterval/

@joelambert

@rsaccon the code in question can also be found/forked here: https://gist.github.com/1002116

It offers the performance improvements of requestAnimationFrame (when available) but doesn't require a code refactor to explicitly support it.

@getphuture

A few feedbacks: adding this really slows down the scrollability at least on Android devices.

After a bit of investigations, I :
1) Used simple variables and passed the check as argument:
var requestAnimFrame = function( jsRequestAnimFrame ) {
if ( !jsRequestAnimFrame ) { return ... } else { return ... }
}( window.webkitRequestAnimationFrame || window.... );
and of course included it in the scrollability scope ( like Tin patch )

2) Plus inside requestAnimFrame and requestInterval, replace respectively window.setTimeout by setTimeout, and window.setInterval by setInterval.

It looks to works as it used to be, a little bit better on Android ( maybe because of 1000 / 16 instead of 0 as period ? )
Actually nobody mentions it's not supported on iOS, neither on Android at the moment. *

  • Looks promising on the press release from March... or some chrome / other webkit upcoming releases...
  • At the time of writing, tested with iOS 4.3.X and Android 2.1 - and since the time of scrollability was released, it hasn't changed so much: no support on mobile webkit-based browser for requestAnimationStuff

Snif snif

@Tin
Tin commented

We are facing serious performance issue in android too, especially the honeycomb on tablet. We need a big breakthrough, but seems we are blocked by lacking of hardware acceleration for css3 transformation.

@chrisdrackett

my solution is to not support android ;)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Jun 1, 2011
  1. @Tin

    Use requestAnimationFrame instead of setInterval, save cpu cycles for…

    Tin authored
    … animation when this api is available.
This page is out of date. Refresh to see the latest.
Showing with 15 additions and 5 deletions.
  1. +15 −5 scrollability.js
View
20 scrollability.js
@@ -31,10 +31,16 @@ var kPageEscapeVelocity = 50;
// Vertical margin of scrollbar
var kScrollbarMargin = 2;
+_requestAnimationFrame = (function() {
+ var poormansRAF = function(animate) {
+ window.setTimeout(animate, 1000 / 60);
+ }
+ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || poormansRAF;
+})();
// ===============================================================================================
var startX, startY, touchX, touchY, touchDown, touchMoved;
-var animationInterval = 0;
+var inAnimation = false;
var touchTargets = [];
var scrollers = {
@@ -72,7 +78,8 @@ function onTouchStart(event) {
}
}
- animationInterval = setInterval(touchAnimation, 0);
+ _requestAnimationFrame(touchAnimation);
+ inAnimation = true;
}
var d = document;
@@ -326,6 +333,9 @@ function createTarget(target, startX, startY, startTime) {
}
function touchAnimation() {
+ if (!inAnimation) {
+ return
+ }
var time = new Date().getTime();
// Animate each of the targets
@@ -343,6 +353,7 @@ function touchAnimation() {
if (!touchTargets.length) {
stopAnimation();
}
+ _requestAnimationFrame(touchAnimation);
}
// *************************************************************************************************
@@ -396,9 +407,8 @@ function releaseTouched(touched) {
}
function stopAnimation() {
- if (animationInterval) {
- clearInterval(animationInterval);
- animationInterval = 0;
+ if (inAnimation) {
+ inAnimation = false;
for (var i = 0; i < touchTargets.length; ++i) {
var target = touchTargets[i];
Something went wrong with that request. Please try again.