Depot43-Unterlagen - ZIM Shapes Event Animation

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
  <meta charset=utf-8>
  <title>Zim-CreateJS-Animation - ZIM Shapes Event Animation</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)

		stage.on("stagemousedown", function() {
			circle
			.animate({x:stage.mouseX, y:stage.mouseY}, 1000); // default ease is quadInOut
		});

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

    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</head>
    <body>
<h3>Klick auf die Bühne (grauer Bereich)</h3>
    </body>
</html>


 

            

Hinweis

Der einfache Event "Click" auf der Bühne wird in einer Funktion ausgeführt. Das angesprochene Objekt ist der "circle", die Animation wird auf die Mausposition in der angegeben Zeit ausgeführt:

stage.on("stagemousedown", function() {
    circle
    .animate({x:stage.mouseX, y:stage.mouseY}, 1000); 
 });