KineticJS-Problem

[Enidan]

Hallo,

ich setze KineticJs an, um ein Rechteck zu animieren.

Ich will aber nicht jedes mal ein neues Rechteck Objekt erstellen, sondern immer die gleiche zum animieren. Die Skallierfunktion klappt, aber ich kann das Ergebnis nicht beobachten. Das Rechteck animiert sich quasi nicht.
Hier ist der Code:

  
Animation.prototype.drawBubble = function(stageId){  
	var layer = new Kinetic.Layer();  
	  
	var rect = new Kinetic.Rect({  
	    x: 100,  
	    y: 100,  
	    width: 250,  
	    height:  120,  
	    id: stageId,  
	    cornerRadius: 7,  
	    fill: "#b23300",	//#1a9133  
	    stroke: "#b23300",  
	    strokeWidth: 4,  
	    offset: {  
            x: 75,  
            y: 40  
          },  
	    draggable: false  
	});  
	var rect2 = new Kinetic.Rect({  
	    x: 250,  
	    y: 20,  
	    id: "test2",  
	    width: 80,  
	    height: 60,  
	    cornerRadius: 7,  
	    fill: "#b23300",	//#1a9133  
	    stroke: "#b23300",  
	    strokeWidth: 4  
	});  
	  
	layer.add(rect);  
	layer.add(rect2);  
	this.stages[stageId].add(layer);  
	  
};  
  
Animation.prototype.animate = function(id){  
	var mooh = this.stages[id].getChildren(0);  
	var kid = this.stages[id].get('#'+id);  
	var period = 2000;  
	var test ="on";  
	var count = 0;  
	var start = true;  
	  
    var anim = new Kinetic.Animation({  
      func: function(frame) {  
    	if(start){  
    		frame.time = 246.7;  
    		start = false;  
    	}  
    	  
    	var scale = Math.sin(frame.time * 2 * Math.PI / period) + 0.001;  
    	  
    	if(scale >= 1.0){  
    		test = "off";  
    	}  
    	if(test == "off" && scale <= 0.70){  
    		frame.time = 246.7;  
    		test = "on";  
    		count++;  
    	}  
  
    	kid[0].setScale(scale);  
  
        if(count == 3){  
        	anim.stop();  
        	start = true;  
        }  
      },  
      node: mooh  
    });  
	anim.start();  
  
};  
  

Danke im voraus.

[Enidan]

Hi,
problem hat sich erledigt.

  
  
var mooh = this.stages[id].getChildren(0);  
node: mooh  
  
// So ist es richtig  
  
node : kid[0].getLayer();  

~~~>  
  
Hallo,  

>   
> ich setze KineticJs an, um ein Rechteck zu animieren.  
>   
> Ich will aber nicht jedes mal ein neues Rechteck Objekt erstellen, sondern immer die gleiche zum animieren. Die Skallierfunktion klappt, aber ich kann das Ergebnis nicht beobachten. Das Rechteck animiert sich quasi nicht.  
> Hier ist der Code:  
>   
> ~~~javascript
  

> Animation.prototype.drawBubble = function(stageId){  
> 	var layer = new Kinetic.Layer();  
> 	  
> 	var rect = new Kinetic.Rect({  
> 	    x: 100,  
> 	    y: 100,  
> 	    width: 250,  
> 	    height:  120,  
> 	    id: stageId,  
> 	    cornerRadius: 7,  
> 	    fill: "#b23300",	//#1a9133  
> 	    stroke: "#b23300",  
> 	    strokeWidth: 4,  
> 	    offset: {  
>             x: 75,  
>             y: 40  
>           },  
> 	    draggable: false  
> 	});  
> 	var rect2 = new Kinetic.Rect({  
> 	    x: 250,  
> 	    y: 20,  
> 	    id: "test2",  
> 	    width: 80,  
> 	    height: 60,  
> 	    cornerRadius: 7,  
> 	    fill: "#b23300",	//#1a9133  
> 	    stroke: "#b23300",  
> 	    strokeWidth: 4  
> 	});  
> 	  
> 	layer.add(rect);  
> 	layer.add(rect2);  
> 	this.stages[stageId].add(layer);  
> 	  
> };  
>   
> Animation.prototype.animate = function(id){  
> 	var mooh = this.stages[id].getChildren(0);  
> 	var kid = this.stages[id].get('#'+id);  
> 	var period = 2000;  
> 	var test ="on";  
> 	var count = 0;  
> 	var start = true;  
> 	  
>     var anim = new Kinetic.Animation({  
>       func: function(frame) {  
>     	if(start){  
>     		frame.time = 246.7;  
>     		start = false;  
>     	}  
>     	  
>     	var scale = Math.sin(frame.time * 2 * Math.PI / period) + 0.001;  
>     	  
>     	if(scale >= 1.0){  
>     		test = "off";  
>     	}  
>     	if(test == "off" && scale <= 0.70){  
>     		frame.time = 246.7;  
>     		test = "on";  
>     		count++;  
>     	}  
>   
>     	kid[0].setScale(scale);  
>   
>         if(count == 3){  
>         	anim.stop();  
>         	start = true;  
>         }  
>       },  
>       node: mooh  
>     });  
> 	anim.start();  
>   
> };  
>   
> 

Danke im voraus.