Depot43-Unterlagen - ZIM Animate Shapes

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
  <meta charset=utf-8>
  <title>Zim-CreateJS-Animation - ZIM Animate Shapes</title>
      <script src="https://d309knd7es5f10.cloudfront.net/createjs.min.js"></script>
      <script>
        var zon = true; 
        var zns = false; 
      </script>
    <script src="https://d309knd7es5f10.cloudfront.net/zim_6.7.3.js"></script>

    <script>
	var scaling = "fit";
	var width = 1000;
	var height = 800;
	var frame = new Frame(scaling, width, height);
	frame.on("ready", function() {

		var stage = frame.stage;
		var stageW = frame.width;
		var stageH = frame.height;
		frame.outerColor = "#f00";
		frame.color = "#ccc";
		
		var circle = new Circle(100, "red", "black", 8) 
		.addTo(stage)
		.pos(200, 200)

		.animate({
			obj:{x:800, y:400},
			time:3000,
			rewind:true,
			loop:true,
			loopCount:15
		});

		stage.update();
	});
    </script>
    <style>

    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</head>
    <body>

    </body>
</html>


 

            

Hinweis

Das erstellte Objekt wird mit ".addTo(stage)" geladen, mit ".pos(...)" in Startposition gebracht und mit ".animate(..)" animiert.

Ähnlich wie bei jQuery können einem Objekt mit einem Array Veränderungen der Starteigenschaften übergeben werden:

obj:{width: 300, alpha:0.2, x:500, y:500},

Das Objekt wird angesprochen mit:

obj:{}

width:300 //neue Breite
alpha:0.2 // neuer Transparenzwert
x:500 // neuer horizontaler Wert
y:500 // neuer vertikaler Wert

Weitere Parameter:

time:1000, // Dauer der Animation
rewind:true, // Rückwärts abspielend
loop:true, // Wiederholend
loopCount:8 // Anzahl der Wiederholungen