51 lines
1.2 KiB
HTML
51 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<title>AnimationTiming Test: cancelAnimationFrame used to cancel request callback</title>
|
|
<link rel="author" title="Intel" href="http://www.intel.com">
|
|
<link rel="help" href="https://html.spec.whatwg.org/multipage/#animation-frames">
|
|
|
|
<style>
|
|
#animated {
|
|
background: blue;
|
|
color: white;
|
|
height: 100px;
|
|
width: 100px;
|
|
position: absolute;
|
|
}
|
|
</style>
|
|
|
|
<p>
|
|
Test passes if there is a filled blue square with 'Filler Text',
|
|
which moves from left to right repeatly, when click the 'stop' button,
|
|
the square stops.
|
|
</p>
|
|
<button onclick="stop()">stop</button>
|
|
<div id="animated">Filler Text</div>
|
|
|
|
<script>
|
|
|
|
let requestId = 0;
|
|
let requestAnimation = window.requestAnimationFrame;
|
|
let cancelAnimation = window.cancelAnimationFrame;
|
|
|
|
function animate(time) {
|
|
let div = document.getElementById("animated");
|
|
div.style.left = (time - animationStartTime) % 2000 / 4 + "px";
|
|
requestId = requestAnimation(animate);
|
|
}
|
|
|
|
function start() {
|
|
animationStartTime = window.performance.now();
|
|
requestId = requestAnimation(animate);
|
|
}
|
|
|
|
function stop() {
|
|
if (requestId) {
|
|
cancelAnimation(requestId);
|
|
requestId = 0;
|
|
}
|
|
}
|
|
|
|
start();
|
|
|
|
</script>
|