Mercurial > MadButterfly

changeset 892:23dffb564ace

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Implemnet new animation framework as the WIKI.
author wycc
date Mon, 27 Sep 2010 22:37:37 +0800
parents bcc63b20d5c6
children cad38ddb1253
files nodejs/animate.js nodejs/phone.js nodejs/testdesktop.js
diffstat 3 files changed, 109 insertions(+), 93 deletions(-) [+]
line wrap: on
line diff
--- 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) {
+}
--- 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;
     });
--- 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<lines.length;i++) {
-    sys.puts("["+i+"]="+lines[i].y);
-}
 line=0;
 
 items=[video,audio,picture,setting];
 item = 0;
-an = new animate.scale(app,items[item],1,1.5,0.1);
-an.start();
+
+animate.run([new animate.scale(app,items[item],1,1.5)],0,0.1);
 app.refresh();
+
 app.addKeyListener(mbapp.KEY_LEFT, function() {
 	var old = items[item];
 	item = item - 1;
@@ -35,10 +33,8 @@
 		return;
 	}
         var target = items[item];
-	var an = new animate.scale(app,old,1,1,0.1);
-        an.start();
-	an = new animate.scale(app,target,1,1.5,0.3);
-        an.start();
+	animate.run([new animate.scale(app,old,1,1)],0,0.1);
+	animate.run([new animate.scale(app,target,1,1.5)],0,0.3);
 });
 
 app.addKeyListener(mbapp.KEY_RIGHT, function() {
@@ -49,10 +45,8 @@
 		return;
 	}
         var target = items[item];
-	var an = new animate.scale(app,old,1,1,0.1);
-        an.start();
-	an = new animate.scale(app,target,1,1.5,0.3);
-        an.start();
+	animate.run([new animate.scale(app,old,1,1)],0,0.1);
+	animate.run([new animate.scale(app,target,1,1.5)],0,0.3);
 });
 
 app.addKeyListener(mbapp.KEY_UP, function() {
@@ -65,8 +59,7 @@
         var target = lines[line];
 	var sy = target.y-lightbar.y;
 	sys.puts(sy);
-	var an = new animate.linear(app,lightbar,0,sy,0.3);
-        an.start();
+	animate.run([new animate.shift(app,lightbar,0,sy)],0,0.3);
 });
 app.addKeyListener(mbapp.KEY_DOWN, function() {
 	var old = lines[line];
@@ -81,8 +74,7 @@
 	sys.puts("sy="+sy);
 	sys.puts("target.y="+target.y);
 	sys.puts("lightbar.y="+lightbar.y);
-	var an = new animate.linear(app,lightbar,0,sy,0.3);
-        an.start();
+	animate.run([new animate.shift(app,lightbar,0,sy)],0,0.3);
 });
 
 app.addKeyListener(mbapp.KEY_ENTER, function() {
@@ -90,8 +82,7 @@
 	var sx = 500-target.x;
 	var sy = 220-target.y;
 	sys.puts("target "+sx+','+sy);
-	var an = new animate.linear(app,target,sx,sy,1);
-	an.start();
+	animate.run([new animate.shift(app,target,sx,sy)],0,1);
 	for(i=0;i<items.length;i++) {
 	    if (i == item) continue;
 	    var x = Math.random();
@@ -102,10 +93,8 @@
 	    else y = -500;
 	    sx = x-items[i].x;
 	    sy = y-items[i].y;
-	    an = new animate.linear(app,items[i], sx,sy,2);
-	    an.start();
-	    alpha = new animate.alpha(app,items[i],0, 1);
-	    alpha.start();
+	    animate.run([new animate.shift(app,items[i], sx,sy)],0,2);
+	    animate.run([new animate.alpha(app,items[i],0)],0, 1);
 	}
 });