web_animations_many_keyframes.html | Explore in Territory

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="stylesheet" type="text/css" href="resources/tablet.css">
<script src="resources/perf_test_helper.js"></script>
<script src="resources/web_animations_api_check.js"></script>
<style>
target {
  position: absolute;
  width: 0px;
  height: 0px;
  border: 5px solid green;
  border-radius: 100%;
}
</style>

<container id="container"></container>

<script>
var N = PerfTestHelper.getN(1000);
var numKeyframes = 500;
var duration = 4000;

function makeKeyframes(numKeyframes, width, height) {
  var keyframes = [];
  for (var i = 0; i < numKeyframes + 1; i++) {
    var fraction = i / numKeyframes;
    var t = fraction * 2 * Math.PI;
    var x = Math.cos(t) - Math.pow(Math.cos(4 * t), 3);
    x = ((x / 4 + 1 / 2) * width).toFixed(5);
    var y = Math.pow(Math.sin(4 * t), 3) - Math.sin(2 * t);
    y = ((y / 4 + 1 / 2) * height).toFixed(5);
    keyframes.push({transform: 'translate(' + x + 'px, ' + y + 'px)'});
  }
  return keyframes;
}

requestAnimationFrame(function() {
  var keyframes = makeKeyframes(numKeyframes, 550, 800);
  for (var i = 0; i < N; i++) {
    var target = document.createElement('target');
    container.appendChild(target);
    target.animate(keyframes, {duration: duration, iterations: Infinity, delay: -duration / 10 * i / N});
  }
});

PerfTestHelper.signalReady();
</script>
chromium/tools/perf/page_sets/tough_animation_cases/web_animations_many_keyframes.html
