siehe auch: Animate CC, Canvas -:|:- TweenJS Api -:|:- EaselJS -:|:- Adobe Help
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.
Man geht folgendermaßen vor.
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.
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);
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
myTween.setPaused(false);
myTween.get(this.myMc, {loop:true, override: true})
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
Mittels der wait() Funktion kann man Wartezeiten einfügen. Der Parameter erwartet einen Wert in Millisekunden
Beispiel wait
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);
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)
}
Sollte die aufzurufende Funktion mehrere Parameter haben, kann man über den Array-Zugriffsoperator [] mehrere Parameter angeben.
.call(Funktionsreferenz, [Argument 1, Argument 2])
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.
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
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
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
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); }
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.
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
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);
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);
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); }
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.
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) }
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
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.
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.
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); }
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.
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(); }
Aufträge könnt ihr mir per Email schicken oder anrufen:
Hompage: https://www.pastorpixel.de