git @ Cat's Eye Technologies yoob.js / 0e82627
Example page for yoob/animation-frame.js. Fix shortcomings in it. Cat's Eye Technologies 11 years ago
2 changed file(s) with 92 addition(s) and 2 deletion(s). Raw diff Collapse all Expand all
+78
-0
eg/animation-frame.html less more
0 <!DOCTYPE html>
1 <head>
2 <meta charset="utf-8">
3 <title>yoob.setUpQuantumAnimationFrame Demo</title>
4 <style>
5 #canvas { border: 1px solid blue; }
6 </style>
7 </head>
8 <body>
9
10 <h1>yoob.setUpQuantumAnimationFrame Demo</h1>
11
12 <div>
13 <canvas id="canvas" width="200" height="200">
14 Your browser doesn't support displaying an HTML5 canvas.
15 </canvas>
16 </div>
17
18 <div>
19 <button id="start" onclick="controller.start();">Start</button>
20 <button id="stop" onclick="controller.stop();">Stop</button>
21 </div>
22
23 </body>
24 <script src="../src/yoob/animation-frame.js"></script>
25 <script type="text/javascript">
26 var c = document.getElementById('canvas');
27
28 var Controller = function() {
29 var ctx;
30 var animCfg = {};
31
32 this.init = function(canvas) {
33 this.canvas = canvas;
34 ctx = canvas.getContext("2d");
35 this.w = 20;
36 this.h = 20;
37 this.x = 0;
38 this.y = canvas.height / 2 - this.h / 2;
39 this.dx = 1;
40 this.draw();
41 };
42
43 this.draw = function() {
44 ctx.clearRect(0, 0, canvas.width, canvas.height);
45 ctx.lineWidth = "1";
46 ctx.strokeStyle = "black";
47 ctx.shadowColor = "transparent";
48 ctx.strokeRect(this.x, this.y, this.w, this.h);
49 };
50
51 this.update = function() {
52 if (this.x + this.w > this.canvas.width || this.x < 0) {
53 this.dx *= -1;
54 }
55 this.x += this.dx;
56 };
57
58 this.start = function() {
59 if (animCfg.request)
60 return;
61 yoob.setUpQuantumAnimationFrame(this, animCfg);
62 };
63
64 this.stop = function() {
65 if (!animCfg.request)
66 return;
67 cancelRequestAnimationFrame(animCfg.request);
68 animCfg.request = undefined;
69 // if you don't do the following, you will get all those ticks
70 // that have "occurred" since the stop, when you start again
71 animCfg.lastTime = null;
72 };
73 };
74
75 var controller = new Controller();
76 controller.init(document.getElementById('canvas'));
77 </script>
+14
-2
src/yoob/animation-frame.js less more
00 /*
1 * This file is part of yoob.js version 0.5
1 * This file is part of yoob.js version 0.6-PRE
22 * Available from https://github.com/catseye/yoob.js/
33 * This file is in the public domain. See http://unlicense.org/ for details.
44 */
2121 }, 1000 / 60);
2222 };
2323
24 // it was called "cancelRequestAnimationFrame" in the editor's draft:
25 // http://webstuff.nfshost.com/anim-timing/Overview.html
26 // but "cancelAnimationFrame" in the Candidate Recommendation:
27 // http://www.w3.org/TR/animation-timing/
2428 window.cancelRequestAnimationFrame =
2529 window.cancelRequestAnimationFrame ||
2630 window.webkitCancelRequestAnimationFrame ||
2731 window.mozCancelRequestAnimationFrame ||
2832 window.oCancelRequestAnimationFrame ||
2933 window.msCancelRequestAnimationFrame ||
34 window.cancelAnimationFrame ||
35 window.webkitCancelAnimationFrame ||
36 window.mozCancelAnimationFrame ||
37 window.oCancelAnimationFrame ||
38 window.msCancelAnimationFrame ||
3039 clearTimeout;
40 window.cancelAnimationFrame = window.cancelRequestAnimationFrame;
3141
3242 /*
3343 * Convenience function for using requestAnimationFrame. Calls the
8090 var timeElapsed = cfg.lastTime == null ? 0 : time - cfg.lastTime;
8191 cfg.lastTime = time;
8292 object.draw(timeElapsed);
83 cfg.request = requestAnimationFrame(animFrame);
93 if (cfg.request) {
94 cfg.request = requestAnimationFrame(animFrame);
95 }
8496 };
8597 cfg.request = requestAnimationFrame(animFrame);
8698 };