Tween JS

HTML5 - canvas - Javascript - TweenJS

Animate CC, Canvas Graphics TweenJS Api EaselJS Adobe Help

Einleitung
Basic
Tween Eigenschaften
Beschleunigung / Easing
Wartezeit / wait()
Loop
Callback
Callback mit Parameter
Callback als Schleife
set Starteigenschaften
Pause & Play
Stoppen & Starten / removeTweens()
Zeitpunkt der Animation aufrufen / position
Motion Guide
Tweening zur Mausposition
Mauseffekt
Spiralbewegung

Links zu weiteren Tutorials

AnimateCC

TweenJS ist eine Javascript Bibliothek für programmierte Bewegungen. Man kann es in der Entwicklungsumgebung des Browsers nutzen oder auch direkt in AnimateCC in einem Schlüsselbild einsetzen. Soll heißen, wenn man eine HTML5 Canvas Datei in Flash CC erstellt, kann man die Tween JS Befehle auf Movieclips oder andere DisplayObjekte anwenden.

Auf der offiziellen Seite findet man Beispiele und die Dokumentation.
Auf der Seite https://andysaia.com/blog/tweenjs/ kann man die Animation testen.

Basic

Man geht folgendermaßen vor.

Man erzeugt eine Tween Instanz.
Daran bindet man ein Displayobject. Optional kann man als zweites Argmument ein Objekt mit Initialeigenschaften des Tweens zuweisen.
Dann ruft man die Methode to() auf, um eine Animation zu erzeugen. Hier gibt man ein Objekt mit den gewünschten Eigenschaften als erstes Argument ein und die Zeit in Millisekunden als zweites Argument ein.

var myTween = new createjs.Tween.get(target, properties);

myTween.to(eigenschaften, millisekunden);

Auch diese Schreibweise mit Punktsyntax ist möglich.

var myTween = new createjs.Tween.get(this.myMc, {loop: true}).to({x: 200, y:300}, 2000);

Es folgt ein Beispiel, das Script wurde in einem Schlüsselbild in AnimateCC eingefügt.

Auf der Bühne befindet sich eine Movieclip Instanz namens ball. Der ursprüglich gesetzte Transparenzwert von 0 wird auf den Wert 1 getweent. Das Tweening dauert 1000 Millisekunden.

Beispiel

this.ball.alpha = 0;
createjs.Tween.get(this.ball).to({alpha: 1}, 1000);

Man kann auch weitere Animation anhängen:

var myTween = new createjs.Tween.get(this.myMc,{loop:true});
myTween.to({x: 200, y:300}, 2000);
myTween.to({x: 20, y:20}, 1000);

Tween Eigenschaften der Get Methode

Die get Methode erwartet ein Anzeigeobjekt. Optional kann man als zweites Argument ein Objekt mit Initial-Eigenschaften zweisen.

get(myMc, {eigenschaft:wert})

Es gibt folgende Eigenschaften. Siehe Dokumentation

loop: false Die Animation wird nicht wiederholt, siehe hier
paused: false Die Animation ist pausiert und startet erst wenn der Wert auf true gesetzt wird. myTween.setPaused(false);
useTicks:false Anstatt mit Millisekunden wird mit der Tickrate gearbeitet. siehe tick
ignoreGlobalPause: false bedeutet eine globale Pause hat auf dieses Tween keine Auswirkung (siehe ticker)
override: false Man kann ein Tween erneut starten, beispielsweise durch Mausklick. Wenn allerdings eine zuvor gestartete Animation noch läuft wird diese erst beendet. Das führt in der Regel zu ungewollten Effekten. Durch override: true, wird die eine laufende Animation abgebrochen, wenn das Tween neu gestartet wird. Beispiel
position: 0 Hier kann man bestimmen ab welcher Millisekunde die Animation starten soll. Standardmäßig startet sie bei 0. siehe Position
myTween.get(this.myMc, {loop:true, override: true})
onChanged bestimmt einen einen onChange Eventhandler für dieses Tween

Beschleunigungs Funktion / Easing

TweenJS bringt auch eine Ease-Klasse mit. Damit lassen sich Arten von Beschleunigungen definieren. Man definiert eine Eases Instanz und fügt diese als drittes Argument in der to() Funktion ein.

myTween.to(eigenschaft, millisekunden, ease);

Im folgenden Beispiel werden die beiden Eigenschaften x-Position und y-Position getweent. Außerdem ist noch eine Beschleunigungsfunktion hinzugekommen.

  .to({x:25, y:100}, 1000, createjs.Ease.getPowInOut(2))

Auf einer Seite von andysaia.com hat man die Möglichkeit verschwiedene Easing Funktionen zu testen.

Beispiel easeBounce

Wartezeit / wait()

Mittels der wait() Funktion kann man Wartezeiten einfügen. Der Parameter erwartet einen Wert in Millisekunden

Beispiel wait

Loop

Eine Möglichkeit eine Animation in einer Schleife zu wiederholen, wird hier vorgestellt. Man beachte, wie hier to() Methoden definiert wurden. Sie werden nacheinander abgespielt, damit der MC hin und zurück läuft. Selbstverständlich ist die Anzahl nicht auf 2 begrenzt.

Auf diese Art kann man jedoch keine Zufallsposition definieren, wie in den nächsten Beispielen der call() Methoden. Man könnte zwar der x und y Position Zufallswerte zuweisen, aber diese würden sich nicht ändern, wenn die Schleife erneut durchläuft.

Beispiel loop

   createjs.Tween.get(this.ball, { loop: true } ).to({x:500, y:350}, 3000, createjs.Ease.bounceOut)
 .to({x:130, y:130}, 3000, createjs.Ease.elasticOut);

Callback Funktion / call()

Die Methode call() wird wie üblich mit Punktsyntax angehängt. Der erste Parameter ist eine Referenz auf eine Funktion der zweite Parameter ist ein Argument der aufzurufenden Funktion.


  .call(info, "Animation beendet");
  function info(meldung){

    console.log(meldung)

    }

Beispiel call1

Callback Funktion mit mehreren Parametern

Sollte die aufzurufende Funktion mehrere Parameter haben, kann man über den Array-Zugriffsoperator [] mehrere Parameter angeben.

.call(Funktionsreferenz, [Argument 1, Argument 2])

Beispiel call2

this.ball.alpha = 0;
createjs.Tween.get(this.ball)
	.to({alpha: 1}, 1000)
	.call(handleComplete.bind(this), [130, 200]);

function handleComplete(xPos, yPos) {
	this.ball.x = xPos;
	this.ball.y = yPos;
}

Hier noch ein etwas sinnvolleres Beispiel.

Beispiel call

Callback als Schleife

In diesem Beispiel wird die Callbackfunktion immer wieder aufgerufen wird. Es entsteht somit eine Schleife.

Beispiel tween3

this.ball.alpha = 0;

function showBall(ziel) {
	ziel.x = Math.random() * 500 + 20;
	ziel.y = Math.random() * 300 + 50;
	ziel.alpha = 0;
	createjs.Tween.get(ziel).to({alpha: 1}, 1000).call(showBall, [ziel]);
}
showBall(this.ball);

Beispiel tween4

function moveMc(ziel) {
createjs.Tween.get(ziel)
	.to({x: Math.random() * 500,y: Math.random() * 400}, 1000, createjs.Ease.getPowInOut(2))
	.call(moveMc, [ziel]);
}

Man kann diese Funktion für viele Instanzen nutzen.

Beispiel tween4a

  	moveMc(this.ball1);
  	moveMc(this.ball2);
 	moveMc(this.ball3);

Hier noch ein Beispiel, mit unterschiedlichen Zeiten

Beispiel tween4b

set Starteigenschaften definieren

Mit der Methode set() kann man für das Zielobjekt Initialeigenschaften definieren. Zum Beispiel kann man das Objekt vor der Animation auf eine bestimmte Position setzen. Das macht besonders in Loops Sinn.

Beispiel set_1

createjs.Tween.get(this.ball, {loop:true})
.set({y: 100})
.to({x: 400},2000);

Etwas merkwürdig verhält es sich allerdings, wenn man eine mit set() definierte Eigenschaft im Anschluss mit to() animieren möchte.

Beispiel set_2

Der zweite Parameter der set() Funktion ist optional. Hier kann man ein Zielobjekt angeben.

Beispiel set_3

Tween Pausieren

Es gibt eine Eigenschaft und eine Methode, mit der man ein Tween pausieren kann. Die Eigenschaft, wurde anfangs schon erwähnt. Sie lässt sich als Initialwert angeben.

var myTween = new createjs.Tween(this.auto, {loop:true, paused:true});

Dieser Wert lässt sich auch ausgeben mittels

myTween._paused

Desweiteren gibt es die Methode setPaused(boolscher Wert) mit dem man ein Tween pausieren kann.

Beispiel pause_1

In folgenden Beispiel wird mit einem Button zwischen play und pause hin und her geschaltet.

Beispiel pause_2

Stoppen & Starten / removeTweens()

Ein Tweening soll auf Mausklick immer wieder neu von Anfang bis Ende durchlaufen.
Außerdem soll die Möglichkeit bestehen es jederzeit zu beenden.
Mit paused und setPaused() kommt man hier nicht weiter.
removeTweens() erwartet ein Objekt welches getween wird.
Das kann man beispielweise gebrauchen, wenn man ein sich bewegendes Objekt verschieben möchte.
Auf der Bühne befinden sich die Instanzen: go_btn, stop_btn, ball

var _this = this;

this.go_btn.addEventListener("click", startTween);
this.stop_btn.addEventListener("click", stopTween);

function startTween(evt) {
createjs.Tween.get(_this.ball, {override:true}).to({x:20, y:20},0)
.to({x:550, y:120},2000);
}

function stopTween(evt){
createjs.Tween.removeTweens(_this.ball);
}

Beispiel

Tween mit drag & Drop kombinieren

In den Dateien zum Download befindet sich ein Ordner dragDropTween. Dort wird Schritt für Schritt erklärt, wie man ein sich bewegendes Objekt anklickt und fallen lassen kann.

Beispiel

Zeitpunkt bestimmen / position

Innerhalb des Tweenings werden eine oder mehrere Zeitangaben definiert, die zusammengenommen die Gesamtzeit der Animation ausmachen.

Es gibt die Initaleigenschaft position, sowie die Methode setPosition() mit dem man einen bestimmten Zeitpunkt der Animation aufrufen kann.

Beispiel position_1

Im nächsten Beispiel wird durch Buttonclick ein bestimmter Zeitpunkt aufgerufen.

Beispiel position_2

Im folgenden Beispiel wird mehreren Movieclip Instanzen die gleiche Tweenfunktion zugewiesen, jedoch startet jedes auf einer anderen Zeitposition. Dieses Beispiel ist mit händischem Tweening nur sehr schwierig zu erstellen.

Beispiel position_3

Motion Guide / Pfad

Man kann mit mehreren x-y Koordinaten einen Pfad für die Bewegung bestimmen

Siehe TweenJS Dokumenatation und ein Beispiel . siehe auch Github

Die path- Werte in eckigen Klammern sind eine Reihe von x , y, x, y.... Koordinaten, welche den Pfad definieren. Es entspricht der Definintion von Linien des graphics Object mittels curveTo. oder quadraticCurveTo

createjs.Tween.get(target).to({guide:{ path:[0,0, 0,200,200,200, 200,0,0,0] }},7000);  
entspricht    
graphics.moveTo(0,0).curveTo(0,200,200,200).curveTo(200,0,0,0);

Im folgenden Beispiel befindet sich ein MC namens rakete auf der Bühne. Die Ausrichtung mittels orientation erwartet einen der folgenden Werte: auto, fixed, cw, ccw Die beiden letzteren bedeuten clockwise und counterclockwise.

createjs.MotionGuidePlugin.install(createjs.Tween);
createjs.Tween.get(this.rakete, {loop: -1, bounce: true}, true)
	.to({
		guide: {
			path: [15, 300, 700, 10, 500, 300],
			orient: "fixed"
		}
	}, 2000, createjs.Ease.quadOut);

Beispiel

Hier ein weiteres Beispiel. start und end erwarten einen Wert zwischen 0 und 1. Hiermit bestimmt man die Start und End Position auf der Linie. Die Gesamtlänge ist 1. start:1, end: 0 lässt die Bewegung rückwärts laufen.

createjs.MotionGuidePlugin.install(createjs.Tween);
createjs.Tween.get(this.ball, {
	loop: -1,
	bounce: true
}, true)
	.to({
		guide: {
			path: [100, 100, 700, 100, 800, 480],
			orient: "auto"
		}
	}, 2000, createjs.Ease.quartIn)
	.to({
		guide: {
			path: [100, 100, 700, 100, 800, 480],
			start: 1,
			end: 0
		}
	}, 2000)
	.to({
		rotation: -360,
		guide: {
			path: [800, 280, 200, 280, 150, 150]
		}
	}, 2000, createjs.Ease.bounceOut);

Beispiel

Im folgendem Beispiel wird das eine Linie progammatisch gezeichnet und diese Punkte für die MotionGuide Bewegung genutzt. Auf der Bühne befinden sich die Movieclips: ball, p1, p2, p3

this.info.text = "Verschiebe die schwarzen Punkte";

var stroke_color = "#ff0000";
var shape = new createjs.Shape();
createjs.MotionGuidePlugin.install(createjs.Tween);

this.p1.addEventListener("pressmove", dragMe.bind(this));
this.p2.addEventListener("pressmove", dragMe.bind(this));
this.p3.addEventListener("pressmove", dragMe.bind(this));
this.addEventListener("pressup", moveBall.bind(this));


function dragMe(evt) {
	var p = this.globalToLocal(evt.stageX, evt.stageY);
	evt.currentTarget.x = p.x;
	evt.currentTarget.y = p.y;
	var g = new createjs.Graphics();
	g.setStrokeStyle(1);
	g.beginStroke(stroke_color);
	g.moveTo(this.p1.x, this.p1.y);
	g.curveTo(this.p2.x, this.p2.y, this.p3.x, this.p3.y);
	g.endStroke();
	shape.graphics.clear();
	shape.graphics = g;
	this.addChild(shape);
	this.info.text = "path: [" + Math.round(this.p1.x) + ", " + Math.round(this.p1.y) + ", " + Math.round(this.p2.x) + ", " + Math.round(this.p2.y) + ", " + Math.round(this.p3.x) + ", " + Math.round(this.p3.y) + "]";
}

function moveBall() {
	createjs.Tween.get(this.ball, {
		override: true
	})
		.to({
			guide: {
				path: [this.p1.x, this.p1.y, this.p2.x, this.p2.y, this.p3.x, this.p3.y],
				orient: "auto"
			}
		}, 2000, createjs.Ease.quartIn);
}

Beispiel

Tweening zur Mausposition auf click

Klicke im folgenden Beispiel irgendwo auf die Bühne. Der Ball bewegt sich auf die Mausposition zu. Die Mausposition kann man über den Mausevent abfragen. siehe EaselJS Dokumentation.

Beispiel

this.addEventListener("stagemouseup", moveBall.bind(this));

function moveBall(evt) {
createjs.Tween.get(this.ball).to({x:evt.stageX, y:evt.stageY}, 1000, createjs.Ease.bounceOut)
}

Mauseffekt

Im folgenden Beispiel gibt es einen Movieclip in der Bibliothek mit Klassennamen Kreis. Einen derart einfachen Kreis könnte man auch programmieren. In der ersten for-Schleife werden mehrere Instanzen erzeugt und in einem Array ring gespeichert. Auf Mausklick werden alle Elemente zur Mausposition getweent, jedes ring-Element mit einer jeweils etwas längeren Dauer. (0.5 + i * 0.6) * 1500

Beispiel

  var ring = new Array();
var anzahl = 20;

	for(var i = 0; i < anzahl; i++){
	ring[i] = new lib.Kreis();
	ring[i].scaleX = ring[i].scaleY = 1 + i *0.2;
	ring[i].x = 400;
	ring[i].y = 300;
	this.addChild(ring[i]);
	}
	
stage.addEventListener("stagemouseup", movering.bind(this));


function movering(evt) {
for(i = 0; i < anzahl; i++){
createjs.Tween.get(ring[i] ,{override: true})
.to({x:evt.stageX, y:evt.stageY}, (0.5 + i * 0.06) * 1500, createjs.Ease.bounceOut);
}
}

In der Tween Funktion gibt es den Parameter {override:true}. Dadurch wird ein nicht beendetes Tween von einem erneut aufgerufenen überschrieben. Entfernen Sie die Stelle und probieren Sie es aus, das verdeutlicht den Sachverhalt.

Spiralbewegung

Die folgende Spiralbewegung wurde erzeugt, indem der Registrierpunkt und die Rotation vergrößert und wieder verkleinert wird. Es gibt den Movieclip mcParent und darin den Movieclip mcChild Außerdem wurde noch eine Funktion hinzugefügt, die einen Strich zeichnet. Siehe dazu auch den Tipp localToGlobal Dort wird die Funktion LocalToGlobal erklärt.

Beispiel

function LocalToGlobal(_symbol) {
	var point = _symbol.localToGlobal(0, 0);
	point.x /= stage.scaleX;
	point.y /= stage.scaleY;
	return point;
}




createjs.Tween.get(this.mcParent, {
	loop: true
}).to({
	rotation: 360 * 10,
	regY: 190
}, 30000)
	.to({
		rotation: 1,
		regY: 4
	}, 30000);

this.addEventListener("tick", drawLine.bind(this));


var stroke_color = "#000";
var shape = new createjs.Shape();

var mitte = LocalToGlobal(this.mcParent);


function drawLine(evt) {
	var pt = LocalToGlobal(this.mcParent.mcChild);

	var g = new createjs.Graphics();
	g.setStrokeStyle(2);
	g.beginStroke(stroke_color);
	g.moveTo(mitte.x, mitte.y);
	g.lineTo(pt.x, pt.y);
	g.endStroke();
	shape.graphics = g;
	this.addChild(shape);
}

Spiralbewegung mit Linie

Es gibt den Movieclip mcParent und darin den Movieclip mcChild . Im folgenden wird die Spiralbewegung auf die gleiche Art erzeugt, aber die Linie folgt dieser Bewegung.Das wird ermöglicht, indem lauter kleine Linienstücke erzeugt werden. Am Ende der Funktion werden alle Linien in der callBack Funktion gelöscht.

Beispiel

function LocalToGlobal(_symbol) {
	var point = _symbol.localToGlobal(0, 0);
	point.x /= stage.scaleX;
	point.y /= stage.scaleY;
	return point;
}

createjs.Tween.get(this.mcParent, {
	loop: true
}).to({
	rotation: 360 * 10,
	regY: 190
}, 20000).call(handleComplete, this).to({
	rotation: 1,
	regY: 4
}, 20000).call(handleComplete, this);

this.addEventListener("tick", drawLine.bind(this));

var container = new createjs.Container();
this.addChild(container);

var stroke_color = "#000";
//var pt2 = child.localToGlobal(0, 0);

var pt2 = LocalToGlobal(this.mcParent.mcChild);
function drawLine(evt) {
	var shape = new createjs.Shape();
	var pt = LocalToGlobal(this.mcParent.mcChild);
	//var pt = child.localToGlobal(child.x, child.y);
	var g = new createjs.Graphics();
	g.setStrokeStyle(2);
	g.beginStroke(stroke_color);
	g.moveTo(pt2.x, pt2.y);
	g.lineTo(pt.x, pt.y);
	g.endStroke();
	shape.graphics = g;
	container.addChild(shape);
	pt2 = pt;
}

function handleComplete() {
	container.removeAllChildren();	
}

Links zu weiteren Tutorials

TweenJS
CreateJS die offizielle Seite
tween.js user guide
Creating Retro Game
Introduction to EaselJS – Lee Brimelow (veraltet siehe Beispiele bei Quickstart)
JavaScript animation – using EaselJS pt 2 – Highlander
HTML5 Gaming: animating sprites in Canvas with EaselJS – David Rousset
ein Spiel mit Flash HTML5 Canvas erstellen
Canvas mit dynamischer Größe

Aufträge könnt ihr mir per Email schicken oder anrufen:

Hompage: https://www.pastorpixel.de