# HG changeset patch # User wycc # Date 1285598257 -28800 # Node ID 23dffb564ace1c8e9f57c07633b17243fae3e650 # Parent bcc63b20d5c654dc33477d641647df526b4d8854 Implemnet new animation framework as the WIKI. diff -r bcc63b20d5c6 -r 23dffb564ace nodejs/animate.js --- a/nodejs/animate.js Fri Sep 24 16:00:04 2010 +0800 +++ b/nodejs/animate.js Mon Sep 27 22:37:37 2010 +0800 @@ -9,35 +9,15 @@ var ffs = 12; var frame_interval = 1000 / ffs; -function linear_draw() { +function shift_draw(percent) { var percent; - - percent = (Date.now() - this._start_tm) / this.duration; - if(percent >= 1) { - percent = 1; - if (this.obj.timer) { - this.obj.timer.stop(); - delete this.obj.timer; - } - } this.obj.x = (this.targetx-this.startposx)*percent+this.startposx; this.obj.y = (this.targety-this.startposy)*percent+this.startposy; this.app.refresh(); } -function linear_draw_start() { - var obj = this.obj; - var self = this; - - if(obj.timer) - obj.timer.stop(); - - this._start_tm = Date.now(); - obj.timer = setInterval(function() { self.draw(); }, frame_interval); -} - -function linear(app,obj,shiftx,shifty,duration) { - obj.animated_linear = this; +function shift(app,obj,shiftx,shifty) { + obj.animated_shift = this; this.app = app; this.obj = obj; this.end = 0; @@ -45,48 +25,32 @@ this.targety = shifty + obj.y; this.startposx = obj.x; this.startposy = obj.y; - this.duration = duration*1000; } -exports.linear = linear; -linear.prototype.start = linear_draw_start; -linear.prototype.draw = linear_draw; +exports.shift = shift; +shift.prototype.draw = shift_draw; /* ------------------------------------------------------------ */ function rotate(app, obj, ang, duration) { this._app = app; this._obj = obj; this._ang = ang; - this._duration = duration * 1000; + this._start_mtx = [obj[0], obj[1], obj[2], obj[3], obj[4], obj[5]]; } -function rotate_start() { - var obj = this._obj; - var self = this; - - this._start_mtx = [obj[0], obj[1], obj[2], obj[3], obj[4], obj[5]]; - this._start_tm = Date.now(); - obj.timer = setInterval(function() { self.draw(); }, frame_interval); -} - -function rotate_draw() { +function rotate_draw(percent) { var percent; var ang; var sv, cv; var obj = this._obj; var mtx, shift; - percent = (Date.now() - this._start_tm) / this._duration; - if(percent >= 1) { - percent = 1; - obj.timer.stop(); - } ang = percent * this._ang; sv = Math.sin(ang); cv = Math.cos(ang); mtx = [cv, -sv, 0, sv, cv, 0]; - + sys.puts('x='+obj.center.x+',y='+obj.center.y); shift = [1, 0, -obj.center.x, 0, 1, -obj.center.y]; mtx = multiply(mtx, shift); shift = [1, 0, obj.center.x, 0, 1, obj.center.y]; @@ -103,7 +67,6 @@ this._app.refresh(); } -rotate.prototype.start = rotate_start; rotate.prototype.draw = rotate_draw; exports.rotate = rotate; @@ -119,10 +82,8 @@ } -function scale_draw() { +function scale_draw(percent) { if (this.end == 1) return; - var percent = (Date.now() - this.starttime)/this.duration; - if (percent > 1) percent = 1; var sx = (this.targetx-this.startsx)*percent+this.startsx; var sy = (this.targety-this.startsy)*percent+this.startsy; var t=[sx,0,0,0,sy,0]; @@ -130,13 +91,10 @@ this.obj[4] = sy; this.obj[2] = this.origin_offset_x - (sx-this.startsx)*this.obj.center.x; this.obj[5] = this.origin_offset_y - (sy-this.startsy)*this.obj.center.y; + sys.puts('x='+this.obj.center.x+',y='+this.obj.center.y); this.app.refresh(); var self = this; - if (percent < 1) { - this.obj.timer=setTimeout(function() { self.draw();}, frame_interval); - return; - } this.app.refresh(); this.obj.animated_scale = null; } @@ -171,7 +129,6 @@ exports.scale = scale; -scale.prototype.start = scale_draw; scale.prototype.draw = scale_draw; function holder(app, coord) { @@ -212,20 +169,11 @@ -function alpha_draw() { +function alpha_draw(percent) { if (this.end == 1) return; - var percent = (Date.now() - this.starttime)/this.duration; - if (percent > 1) percent = 1; var sx = (this.targetalpha-this.startalpha)*percent+this.startalpha; this.obj.opacity=sx; - - this.app.refresh(); - var self = this; - if (percent < 1) { - this.obj.timer=setTimeout(function() { self.draw();}, frame_interval); - return; - } this.app.refresh(); this.obj.animated_alpha = null; } @@ -248,6 +196,88 @@ this.duration = duration*1000; } -alpha.prototype.start = alpha_draw; alpha.prototype.draw = alpha_draw; exports.alpha = alpha; + +function linear_update() +{ + var now = Date.now(); + sys.puts("real time is "+now); + sys.puts("end is "+this.end); + if (now >= this.end) { + this.timer.stop(); + now = this.end; + } + if (now < this.startmove) return; + sys.puts("now is "+now+" offset is "+(now-this.startmove)); + var per = (now-this.startmove)/this.duration/1000; + if (per > 1) per = 1; + this.action.draw(per); +} + +function linear_start() +{ + var self = this; + if (this.timer) + this.timer.stop(); + this.timer = setInterval(function() { self.update();}, frame_interval); + this.startmove = Date.now()+this.starttime*1000; + this.end = this.startmove+this.duration*1000; +} +function linear_stop() +{ + if (this.timer) { + this.timer.stop(); + this.timer = null; + } +} + +function linear_finish() +{ + this.action.draw(1); +} +function linear(action,start, duration) +{ + this.action = action; + this.duration = duration; + this.starttime = start; + this.timer=null; +} +linear.prototype.update = linear_update; +linear.prototype.start = linear_start; +linear.prototype.stop = linear_stop; +linear.prototype.finish = linear_finish; +exports.linear = linear; + + +function program(words) +{ + this.words = wrods; +} + +program.prototype.start=function() { + for(w in this.words) { + w.start(); + } +} + +program.prototype.stop=function(s) { + for(w in this.words) { + w.stop(); + } +} +program.prototype.finish=function() { + for(w in this.words) { + w.finish(); + } +} + +exports.run = function(actions,start,duration) { + for(a in actions) { + var li = new linear(actions[a],start,duration); + sys.puts(li); + li.start(); + } +} +exports.runexp=function(actions,start,exp) { +} diff -r bcc63b20d5c6 -r 23dffb564ace nodejs/phone.js --- a/nodejs/phone.js Fri Sep 24 16:00:04 2010 +0800 +++ b/nodejs/phone.js Mon Sep 27 22:37:37 2010 +0800 @@ -41,19 +41,16 @@ }); icon.mouse_event.add_event_observer(4, function(evt) { pressholder.go_center(evt.cur_tgt); - var rotate = new animate.rotate(app, evt.cur_tgt, 2 * 3.1415, 0.7); - rotate.start(); + animate.run([new animate.rotate(app, evt.cur_tgt, 2 * 3.1415)],0, 0.7); }); } var sw = 0; -var dock_up = new animate.linear(app, dock, 0, -300, 0.5); -var dock_down = new animate.linear(app, dock, 0, 0, 0.2); dock.mouse_event.add_event_observer(4, function(evt) { if(sw == 0) { - dock_up.start(); + animate.run([new animate.shift(app, dock, 0, -300)],0, 0.5); } else { - dock_down.start(); + animate.run([new animate.shift(app, dock, 0, 0)],0, 0.2); } sw = sw ^ 1; }); diff -r bcc63b20d5c6 -r 23dffb564ace nodejs/testdesktop.js --- a/nodejs/testdesktop.js Fri Sep 24 16:00:04 2010 +0800 +++ b/nodejs/testdesktop.js Mon Sep 27 22:37:37 2010 +0800 @@ -17,16 +17,14 @@ lightbar = app.get("lightbar"); lines=[app.get("line1"),app.get("line2"),app.get("line3"), app.get("line4"),app.get("line5")]; -for(i=0;i