view nodejs/animate.js @ 776:77b561bb7929

Implement new algorithm to calculate the origin of the SVG elemnts so that we can implement object resize without changing the position of the object. However, the image does not work here since it does not use the transformation of the group.
author wycc
date Mon, 30 Aug 2010 08:56:44 +0800
parents d11b0900f03c
children 7ec13634c97d
line wrap: on
line source

var sys=require("sys");

function linear_draw() {
    if (this.end == 1) return;
    var percent = (Date.now() - this.starttime)/this.duration;
	if (percent > 1) percent = 1;
    this.obj[2] = (this.targetx-this.startposx)*percent+this.startposx;
    this.obj[5] = (this.targety-this.startposy)*percent+this.startposy;
	this.app.refresh();
	var self = this;
	if (percent < 1) {
	    this.obj.timer=setTimeout(function() { self.draw();}, 20);
		return;
	}
	this.app.refresh();
	this.obj.animated_linear = null;
}
function linear(app,obj,targetx,targety,duration) {
    try {
        if (obj.animated_linear) {
	        obj[5] = obj.animated_linear.targety;
	        obj[2] = obj.animated_linear.targetx;
			obj.animated_linear.end = 1;
		}
	} catch(e) {
	    
	}
	obj.animated_linear = this;
	this.app = app;
	this.obj = obj;
	this.end = 0;
	this.starttime = Date.now();
	this.startposx = obj[2];
	this.startposy = obj[5];
    this.targetx = targetx;
	this.targety = targety;
	this.duration = duration*1000;
}

exports.linear = linear;
linear.prototype.start = linear_draw;
linear.prototype.draw = linear_draw;

function multiply(s,d) {
    var m=[];
	m[0] = s[0]*d[0]+s[1]*d[3];
	m[1] = s[0]*d[1]+s[1]*d[4];
	m[2] = s[0]*d[2]+s[1]*d[5]+s[2];
	m[3] = s[3]*d[0]+s[4]*d[3];
	m[4] = s[3]*d[1]+s[4]*d[4];
	m[5] = s[3]*d[2]+s[4]*d[5]+s[5];
	s[0] = m[0];
	s[1] = m[1];
	s[2] = m[2];
	s[3] = m[3];
	s[4] = m[4];
	s[5] = m[5];
}


function scale_draw() {
    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];
	this.obj[0] = sx;
	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;

	this.app.refresh();
	var self = this;
	if (percent < 1) {
	    this.obj.timer=setTimeout(function() { self.draw();}, 20);
		return;
	}
	this.app.refresh();
	this.obj.animated_scale = null;
}

function scale(app,obj,targetx,targety, duration) {
    try {
        if (obj.animated_scale) {
	        //obj[0] = obj.animated_scale.targetx;
	        //obj[4] = obj.animated_scale.targety;
			//obj[2] = obj.animated_scale.final_offset_x;
			//obj[5] = obj.aninated_scale.final_offset_y;
			obj.animated_scale.end = 1;
		}
	} catch(e) {
	    
	}
	obj.animated_scale = this;
	this.app = app;
	this.obj = obj;
	this.end = 0;
	this.starttime = Date.now();
	this.startsx = obj[0];
	this.startsy = obj[4];
    this.targetx = targetx;
	this.targety = targety;
	this.duration = duration*1000;
	this.origin_offset_x = obj[2];
	this.origin_offset_y = obj[5];
	this.final_offset_x = this.origin_offset_x-(targetx-this.startsx)*obj.center.x;
	this.final_offset_y = this.origin_offset_y-(targety-this.startsy)*obj.center.y;
}


exports.scale = scale;
scale.prototype.start = scale_draw;
scale.prototype.draw = scale_draw;