http://snippets.dzone.com/posts Fri, 25 Jul 2008 05:39:22 GMT DZone Snippets: timeline code http://snippets.dzone.com/posts/show/5293 <br /> <br /><a href="http://jsfromhell.com/classes/timeline"> <br />Simulates the Adobe Flash timeline. You define the amount of frames, the speed in fps (frames per second) and, at each frame passage an event is called, useful for animations. <br /> <br />[UPDATED CODE AND HELP CAN BE FOUND HERE] <br /></a> <br /> <br /> <br /><code> <br />//+ Jonas Raoni Soares Silva <br />//@ http://jsfromhell.com/classes/timeline [v1.0] <br /> <br />TimeLine = function(fps, f){ <br /> this.fps = fps, this.frames = f; <br />}; <br />with({o: TimeLine, $: TimeLine.prototype}){ <br /> o.timers = []; <br /> $.running = !!($.current = +(o.timer = $.time = null)); <br /> o.run = function(){ <br /> var o = this; <br /> o.timer || (o.timer = setInterval(function(){ <br /> for(var h, d = +(new Date), t = o.timers, i = t.length; i--;){ <br /> (!t[i].running || ((d - t[i].time) / (1e3 / t[i].fps) > t[i].current + 1 && <br /> t[i].onframe(++t[i].current), t[i].current >= t[i].frames)) && <br /> (h = t.splice(i, 1)[0], h.stop(1)); <br /> } <br /> }, 1)); <br /> }; <br /> $.start = function(c){ <br /> var o = this, t = TimeLine; <br /> if(o.running) return; <br /> o.running = true, o.current = c || 0; <br /> o.time = new Date, o.onstart && o.onstart(); <br /> if(!o.onframe || o.frames <= 0 || o.fps <= 0) <br /> return o.stop(1); <br /> t.timers.push(this), t.run(); <br /> }; <br /> $.stop = function(){ <br /> var o = this; <br /> o.running = false; <br /> if(!TimeLine.timers.length) <br /> TimeLine.timer = clearInterval(TimeLine.timer), null; <br /> arguments.length && o.onstop && o.onstop(); <br /> }; <br />} <br /></code> <br /> <br />Example <br /> <br /><code> <br /> <br /><div id="box" style="position: absolute; top: 100px; background: #efe; width: 100px; height: 100px">25 fps</div> <br /><div id="box2" style="position: absolute; top: 300px; background: #ff9; width: 100px; height: 100px">12 fps</div> <br /> <br /><strong>TimeLine working together with the ease in quad function.</strong><br /> <br /> <br /><script type="text/javascript"> <br />Math.ease = function (t, b, c, d) { <br /> if ((t /= d / 2) < 1) <br /> return c / 2 * t * t + b; <br /> return -c / 2 * (--t * (t - 2) - 1) + b; <br />}; <br /> <br />var o = new TimeLine(25, 50), d = document, b = d.getElementById("box"); <br />o.onframe = function(){ <br /> b.style.left = Math.ease(this.current, 0, 400, 30) + "px"; <br />}; <br />o.onstart = function(){ <br /> d.body.appendChild(d.createTextNode("Started")); <br />}; <br />o.onstop = function(){ <br /> d.body.appendChild(d.createTextNode(" - Finished (" + (((new Date) - this.time)) + " msec)")) <br /> d.body.appendChild(d.createElement("br")); <br /> this.start(); <br />}; <br />o.start(); <br /> <br /> <br />var o2 = new TimeLine(12, 50), b2 = d.getElementById("box2"); <br />o2.onframe = function(){ <br /> b2.style.left = Math.ease(this.current, 0, 400, 30) + "px"; <br />}; <br />o2.onstop = function(){ <br /> this.start(); <br />}; <br />o2.start(); <br /></script> <br /></code> Sun, 30 Mar 2008 16:49:21 GMT http://snippets.dzone.com/posts/show/5293 jonasraoni (Jonas Raoni Soares Silva)