PhoneGap Tips

Demos: Animation Benchmark

Try this example in your iOS or Android web browser, or read more about performance testing. Note that this is a somewhat contrived example to give you a rough feel for performance on different mobile devices. If you really want to perform this kind of animation there are more efficient ways to accomplish it.

 

HTML

<div id="animation-benchmark-container">
  <div class="animated-html5-logo"></div>
  <div class="animated-html5-logo"></div>
  <div class="animated-html5-logo"></div>
  <div class="animated-html5-logo"></div>
  <div class="animated-html5-logo"></div>
</div>

CSS

#animation-benchmark-container {
  margin: 1em auto;
  width: 300px;
  height: 300px;
  background-color: #F5F5F5;
  border: 1px solid #CCC;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  position: relative;
}

#animation-benchmark-container > .animated-html5-logo {
  display: block;
  width: 64px;
  height: 64px;
  background: url(/img/html5-badge-64.png) no-repeat;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -32px;
  margin-left: -32px;
}

JavaScript

var container = $('#animation-benchmark-container'),
  html5 = $('.animated-html5-logo', container),
  startTime = new Date().getTime(),
  cycle = 3000,
  toRadians = (2 * Math.PI)/cycle;
  radius = 80,
  centerX = container.width()/2,
  centerY = container.height()/2,
  spread = (2*Math.PI)/html5.length;

setInterval(function() {
  var now = new Date().getTime();

  html5.each(function(i) {
    var radians = ((now - startTime) % cycle) * toRadians - spread*i,
      x = Math.floor(radius * Math.cos(radians)),
      y = Math.floor(radius * Math.sin(radians));

    $(this).css({
      top: centerY + y,
      left: centerX + x
    });
  });
}, 1);

var container = $('#animation-benchmark-container'),
  html5 = $('.animated-html5-logo', container),
  startTime = new Date().getTime(),
  cycle = 3000,
  toRadians = (2 * Math.PI)/cycle;
  radius = 80,
  spread = (2*Math.PI)/html5.length;

setInterval(function() {
  var now = new Date().getTime();

  html5.each(function(i) {
    var radians = ((now - startTime) % cycle) * toRadians - spread*i,
      x = Math.floor(radius * Math.cos(radians)),
      y = Math.floor(radius * Math.sin(radians));

    $(this).css({
      '-webkit-transform': 'translate3d(' + x + 'px,' + y + 'px,0)'
    });
  });
}, 1);