<!doctype html>
<!--
Copyright 2019 The Chromium Authors
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
#mainanim {
width: 200px;
height: 200px;
background-color: red;
will-change: transform;
}
</style>
</head>
<body>
<div id='mainanim'></div>
<hr>
<hr>
Press any key to toggle animation.
</body>
<script>
const targetMainFps =
window.location.hash.length > 1 ? + window.location.hash.substr(1) : 0;
const skipEvery = targetMainFps > 0 ? parseInt(60 / targetMainFps) : 0;
const query = window.location.search.substr(1).split('&');
const shouldJank = query.indexOf('jank') >= 0;
const shouldExtremeJank = query.indexOf('extremejank') >= 0;
const offscreen = query.indexOf('offscreen') >= 0;
if (offscreen) {
document.body.style.marginTop = '5000px';
}
const jankAmount = shouldExtremeJank ? 5000 : 16;
var currentValue = 0;
const maxValue = 150;
const valueChange = 5 * skipEvery;
const minValue = 0;
const attributeName = 'transform';
const setProp = (v) => 'translateX(' + v + 'px)';
var animating = false;
var incrementing = false;
var frameCount = 0;
function animateStep() {
if (skipEvery && ++frameCount % skipEvery == 0) {
if (incrementing) {
currentValue += valueChange;
if (currentValue >= maxValue)
incrementing = false;
} else {
currentValue -= valueChange;
if (currentValue <= minValue)
incrementing = true;
}
if (shouldJank || shouldExtremeJank) {
const now = new Date();
while ((new Date() - now) < jankAmount) {}
}
mainanim.style[attributeName] = setProp(currentValue);
}
if (animating)
requestAnimationFrame(animateStep);
}
function startAnimation() {
animating = true;
requestAnimationFrame(animateStep);
}
function stopAnimation() {
animating = false;
}
function toggle() {
if (animating) {
stopAnimation();
} else {
startAnimation();
}
}
window.onkeypress = toggle;
</script>
</html>