cancel-handle-manual.html (1202B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>AnimationTiming Test: cancelAnimationFrame used to cancel request callback</title> 4 <link rel="author" title="Intel" href="http://www.intel.com"> 5 <link rel="help" href="https://html.spec.whatwg.org/multipage/#animation-frames"> 6 7 <style> 8 #animated { 9 background: blue; 10 color: white; 11 height: 100px; 12 width: 100px; 13 position: absolute; 14 } 15 </style> 16 17 <p> 18 Test passes if there is a filled blue square with 'Filler Text', 19 which moves from left to right repeatly, when click the 'stop' button, 20 the square stops. 21 </p> 22 <button onclick="stop()">stop</button> 23 <div id="animated">Filler Text</div> 24 25 <script> 26 27 let requestId = 0; 28 let requestAnimation = window.requestAnimationFrame; 29 let cancelAnimation = window.cancelAnimationFrame; 30 31 function animate(time) { 32 let div = document.getElementById("animated"); 33 div.style.left = (time - animationStartTime) % 2000 / 4 + "px"; 34 requestId = requestAnimation(animate); 35 } 36 37 function start() { 38 animationStartTime = window.performance.now(); 39 requestId = requestAnimation(animate); 40 } 41 42 function stop() { 43 if (requestId) { 44 cancelAnimation(requestId); 45 requestId = 0; 46 } 47 } 48 49 start(); 50 51 </script>