Auf www.greensock.com gibt es verschiedene Frameworks für Flash und auch Javascript. Eine der bekanntesten Bibliotheken sind TweenLite und TweenMax.
Inhalt
Hier eine tolle Einführung und der Download Link oben rechts auf der folgenden Seite: Get Started Greensock Animation Platform
Hier die komplette online Dokumentation
Lade den Ordner src/js auf deinen Server hoch. Der Ordner uncompressed wird nicht hochgeladen, wenn du die komprimierte Version eingebunden hast, die man an dem Wörtchen min erkennt.
<script type="text/javascript" src="js/TweenLite.min.js"></script>
<script type="text/javascript" src="js/plugins/CSSPlugin.min.js"></script>
<script type="text/javascript" src="js/easing/EasePack.min.js"></script>
<script type="text/javascript" src="js/TweenLite.min.js"></script>
<script type="text/javascript" src="js/TweenMax.min.js"></script>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Greensock Tween</title>
<script type="text/javascript" src="js/TweenMax.min.js"></script>
<script>
var myTween, photo;
function init(){
photo = document.getElementById("photo");
myTween = new TweenLite(photo, 1.5, {width:337, height:104});
}
</script>
</head>
<body>
<img src="../img/easelJS_header.png" width="66" height="20" id="photo">
<button onClick="init()">start</button>
</body>
</html>
TweenLite kann jede numerische Eigenschaft eines Javascript Objekts tweenen.
var obj = {objEigschft:0};
bild = document.getElementById("photo");
TweenLite.to(bild, 2, {objEigschft:100});
Der erste Parameter ist das Zielobjekt, der zweite Parameter die Zeit in Sekunden, es folgt ein Objekt in geschweiften Klammern, in dem eine oder mehrere Eigenschaft:Wert Zuweisungen mit Kommata getrennt aufgeführt werden. Der Wert ist der Endwert der Animation. Im obigen Beispiel beträgt er 100 und wird nach 2 Sekunden erreicht.
var photo = document.getElementById("photo"); //oder benutze JQuery's Selektor $("#photo")
TweenLite.to(photo, 1.5, {width:100, x:100});
to() tweened vom aktuellen Wert zum angegeben Wert
TweenLite.to(photo, 1.5, {width:100, height:200});
from() tweend von dem angegeben Wert zum aktuellen Wert
TweenLite.from(photo, 1.5, {width:0, height:0});
fromTo() hier werden Anfangs- und Endwerte angegeben
TweenLite.fromTo(photo, 1.5, {width:0, height:0}, {width:100, height:200});
Im folgenden wird das Tweening nicht automatisch gestartet, sondern angehalten. Durch die Methode resume() kann man das Tweening dann starten oder besser gesagt, es startet ab der Stelle, an der es angehalten wurde.
var myTween = new TweenLite(photo, 1.5, {width:100, paused:true});
myTween.resume();
Weitere Methoden Tweenings zu kontrollieren
//Pause
tween.pause();
//resume (honors direction - rückwärts oder nicht)
tween.resume();
//restart(startet vom Anfang)
tween.restart();
//reverse (geht zurück zum Anfang)
tween.reverse();
//springt exakt 0.5 Sekunden in das Tweening
tween.seek(0.5);
//lässt das Tweening mit halber Geschwindigkeit laufen
tween.timeScale(0.5);
//Tweening läuft mit doppelter Geschwindigkeit
tween.timeScale(2);
//Entfernt das Tweening und macht es für den Garbage Collector verfügbar
tween.kill();
//Man kann alle Tweens eines Elementes folgendermaßen entfernen.
TweenLite.killTweensOf(myElement);
Mittels Javascript event.target kann man das Element ansprechen, welches eine Funktion über einen Event aufgerufen hat.
<div onClick="turnMe(event)"></div>
In der Funktion kann man auf folgende Art auf das angeklickte Objekt zugreifen:
function turnMe(event){
var element=event.target;
}
delay Verzögerung des Starts in Sekunden
TweenLite.to(photo, 1.5, {width:100, delay:2});
onComplete Funktionsaufruf nach Ablauf des Tweens
TweenLite.to(photo, 1.5, {width:100, delay:0.5, onComplete:myFunction});
Man beachte den Zugriff auf das zuvor getweente Element mit this.target in der nachfolgenden Funktion.
Ich habe in dem Beispiel auch einen counter eingefügt, der einmal dafür sorgt, dass die Element alle nebeneinander liegen und dass der Farbtonwert bei jedem Element etwas höher gesetzt wird, damit Regenbogenfarben entstehen. Das sieht komplizierter aus als es ist. Ohne Variable counter würde die Hintergrundfarbe folgendermaßen definiert.
backgroundColor:"hsl(30,100%,50%)"
Nun geht es darum den Farbwert durch den numerischen Wert mit Variable zu ersetzen. Den kann ich aber nicht einfach in den String einfügen, sondern muss den String in 2 Teile aufteilen und mittels + Pluszeichen die Variable dazwischen einfügen.
backgroundColor:"hsl("+counter*30+",100%,50%)"
Man kann auch Parameter übergeben, das sieht dann so aus
TweenLite.to(element, 1, {css:{width:"50%"}, onComplete:myFunction, onCompleteParams:["param1", "param2"], onCompleteScope:this});
function myFunction(p1, p2) {
console.log("tween completed. Received parameters: " + p1 + " and " + p2 + ". The scope is: " + this);
}
Das gilt auch für: onUpdate, onUpdateParams, onUpdateScope, onStart, onStartParams, and onStartScope.
onStart Funktionsaufruf beim Start des Tweens
TweenLite.to(photo, 1.5, {width:100, delay:0.5, onStart:myFunction});
onUpdate Funktionsaufruf beim Start des Tweens
TweenLite.to(photo, 1.5, {width:100, delay:0.5, onUpdate:myFunction});
Siehe auch die Dokumentation
Mit Easing sind eine Reihe dynamischer Bewegungen gemeint. Das heißt die Bewegung läuft nicht gleichmäßig, sondern wird beispielsweise zum Ende hin schneller oder langsamer.
TweenLite.to(photo, 1, {width:100, ease:Power2.easeOut});
Es gibt sehr viele Möglichkeiten, die man an diesem Tool ausprobieren kann.
Mit Plugins werden Eigenschaften hinzugefügt, die in der Standardversion nicht enthalten sind. Durch diese dynamischen Erweiterungen kann man die Dateigröße klein halten. Jede Eigenschaft wird mit dem Eigenschaftsnamen verknüpft. So geht es beim CSSPlugin um css Eigenschaften.
TweenLite.to(photo, 1, {css:{scaleX:0.5, rotation:30}, ease:Power3.easeOut});
Selbstverständlich muss das CSSPlugin geladen sein, denn sonst würde TweenLite versuchen eine photo.css Eigenschaft zu verändern.
Mit dem RoundPropsPlugin kann man Werte auf Kommastellen runden.
RoundPropsPluginTweenLite.to(photo, 1, {width:100, height:200, roundProps:"width,height"});
Die Werte müssen in Camel Case geschrieben werden: anstatt background-color schreibe: backgroundColor
TweenLite.to(element, 1, {css:{top:"20px", left:"100px", backgroundColor:"#FF0000"}, ease:Power2.easeOut});
Es ist möglich die Werte folgendermaßen zu mischen. In den meisten Fällen wird der Wert in Pixeln angegeben. Man kann px setzen oder es weglassen.
TweenLite.fromTo(myBox, 1.5, {css:{width:50%, height:20%}}, {css:{width:200px, height:200px}});
TweenLight kann auch komplexe Werte tweenen, z.B.:
boxShadow:"0px 0px 20px 20px red"
borderRadius:"50% 50%"
border:"5px solid rgb(0,255,0)"
2D Transformationen kann man intuitiv setzen und braucht sich nicht um Kompatibiltätsprobleme der verschiedenen Browser und Versionen zu kümmern.
rotation, scaleX, scaleY, scale, skewX, skewY, x, and y
TweenLite.to(element, 2, {css:{rotation:30, scaleX:0.8}});
Der Drehwinkel wird standarmäßig in Grad "degree" definiert. Man kann aber auch das Bogenmaß "radians" benutzen.
TweenLite.to(element, 2, {css:{rotation:"1.25rad", skewX:"30deg"}});
3D Transformationen werden von den meisten modernen Browsern unterstützt und können intuitiv in TweenLite eingesetzt werden:
TweenLite.to(element, 2, {css:{rotationX:45, scaleX:0.8, z:-300}});
Siehe dazu: http://caniuse.com/transforms3d
Beispiele findet man hier: http://www.greensock.com/css3/
Wenn man mit 3D arbeiten will, muss man den "perspective" Wert setzen. Er bewirkt, wie stark sich die Verzerrung auswirkt. Man kann diesen Wert generell setzen, so dass er für alle Elemente gültig ist. Oder man setzt ihn auf das Eltern Element, oder auf ein einzelnes Element.
Weitere Infos zum Thema Perspektive setzten, findet man in diesem Beitrag.
//Es ist die Beste Möglichkeit, die Perspektive des Elternelements zu setzen.
TweenLite.set(container, {css:{perspective:500}});
//Standard Perspektive für alle Elemente
CSSPlugin.defaultTransformPerspective = 500;
//Perspektive für ein einzelnes Element mit der Eigenschaft"transformPerspective"
TweenLite.set(element, {css:{transformPerspective:500}});
Im normalen CSS ist die Reihenfolge der 3D Eigenschaften von Bedeutung. Um Einheitlichkeit zu bewahren sollte man es in TweenLight genauso halten.
scale, dann rotation (genauso wie rotationZ), dann rotationY, dann rotationX, dann translation (x, y, z).
//sample css:
.myClass { transform: scale(1.5, 1.5) rotateY(45deg) translate3d(10px, 0px, -200px)}
//corresponding GSAP transform (tweened over 2 seconds):
TweenLite.to(element, 2, {css:{scale:1.5, rotationY:45, x:10, y:0, z:-200}});
//sample css that uses a perspective():
.myClass { transform: perspective(500px) rotate(120deg) translateY(50px)}
//corresponding GSAP transform (set, not tweened):
TweenLite.set(element, {css:{transformPerspective:500, rotation:120, y:50}});
Im folgenden Beispiel hat jedes Element einen anderen transformPerspektive Wert. siehe Beispiel
Wenn man ein Element um einen Punkt im 3D-Raum drehen will, benutze die Eigenschaft transformOrigin (siehe unten). Standardmäßig ist der Drehpunkt das Zentrum des Elements (50% 50%). Man kann Keywords nutzen wie "top", "left", "right", "bottom" oder man kann Prozentzahlen einsetzen (untere rechte Kante wäre dann 100% 100%) oder Pixel. Im folgenden Beispiel wird ein Element um die linke, obere Ecke gedreht.
TweenLite.to(element, 2, {css:{rotation:360, transformOrigin:"left top"}});
Will man einen Drehpunkt im 3D Raum bestimmen, kann man der Eigenschaft transformOrigin auch einen dritten Parameter zuweisen, transformOrigin: " x y z"
shortRotation wählt für die Drehung den kürzesten Weg.
TweenLite.to(element, 2, {css:{shortRotation:-170}});
autoAlpha ist das gleiche wie opacity. Hier wird ein Transparenzwert von 0 bis 1 erwartet. Wenn autoAlpha auf 0 gesetzt wird, wird die Eigenschaft "visibility" auf "hidden" gesetzt.
//fade out and set visibility:hidden
TweenLite.to(element, 2, {css:{autoAlpha:0}});
//in 2 seconds, fade back in with visibility:visible
TweenLite.to(element, 2, {css:{autoAlpha:1}, delay:2});
className bietet die Möglichkeit zwischen den Klassen zu wechseln. Nehmen wir mal an wir haben 2 Klassen class1 und class2. In jeder Klasse gibt es verschiedene CSS Eigenschaftswerte. Mein Element hat die class1 und ich möchte dass es in einem Zeitraum von 2 Sekunden zu den Eigenschaftswerten der class2 morphed oder tweened.
TweenLite.to(myElement, 1, {css:{className:"class2"}});
Man kann die Klasse auch an die bestehende Klasse anhängen mit +=
Um Sie zu entfernen, benutze -=
TweenLite.to(myElement, 1, {css:{className:"+=class2"}});
Achtung, es gibt einige CSS Eigenschaften, die man nicht tweenen kann, wie IE Filter und 3D Transforms. Außerdem hat man Geschwindigkeitseinbußen, wenn man mit className arbeitet, da der Rechner die gesamte Klassenstruktur durchlaufen muss.
autoRound Standardmäßig werden Pixelwerte oder zIndex während des Tweenings gerundet, denn das steigert die Performance. Man kann jedoch dieses Verhalten für einzelene Element außer Kraft setzen, indem man autoRound: false setzt. Wenn man das für ein einzelnes Objekt gemacht hat, kann man dennoch das RoundPropsPlugin nutzen.
TweenLite.to([e1, e2, e3], 1, {css:{autoAlpha:0}});
Siehe Info bei Greensock
Die Objekte werden mit einer Zeitverzögerung von 0.5 Sekunden animiert.
tl.staggerTo([e1, e2, e3], 1, {css:{rotation:60}}, 0.5);
Siehe Info bei Greensock
Im folgenden Beispiel wird eine Animation mehrmals wiederholt. Man kann die Anzahl der Wiederholungen eingeben. Man kann für jede Wiederholung Parameter setzen. Der yoyo Effekt erzeugt eine hin und her Animation.
siehe Beispiel
//erstelle eine TimelineLite Instanz
var tl = new TimelineLite();
//füge ein to() tween hinzu, außerdem wurde hier noch ein Funktionsaufruf eingefügt, der beim Start ausgeführt wird onStart , Die Funktion startFunction wird weiter unten definiert
tl.to(element, 1, {css:{width:"50%"}, onStart:startFunction});
//füge ein weiteres tween hinzu (standardmäßig werden die Tweens am Ende der Timeline eingefügt, das macht die Sache einfach)
tl.to(element, 1, {css:{height:"300px"}, ease:Elastic.easeOut});
//Das nächste Tween bekommt eine Zeitverzögerung von 0.75 Sekunden so dass eine Lücke zwischen dem vorigen und dem neuen Tween entsteht
tl.to(element, 1, {css:{opacity:0.5}}, 0.75);
//Eine Überlappung des nächsten zum vorigen Tween von einer halben Sekunde wird durch den negativen Offset Wert erzeugt
tl.to(element, 1, {css:{backgroundColor:"#FF0000"}}, -0.5);
//hier werden 3 Elemente(e1, e2, and e3) mit einer Drehung von 60 Grad animiert. Dann wird die Startzeit gestapelt mit einer Verzögerung von 0.2 Sekunden
tl.staggerTo([e1, e2, e3], 1, {css:{rotation:60}}, 0.2);
//zum Schluss könnte man eine Funktionsaufruf einfügen, der nach Ablauf der Timeline ausgeführt wird. Die Funktion muss selbstverständlich noch erzeugt werden.
tl.call(myFunction);
//Mit folgenden Standardmethoden kann man die Sequenz kontrollieren:
tl.pause();
tl.resume();
tl.restart();
tl.reverse();
tl.play();
//Springe genau 2.5 Sekunden in die Animation
tl.seek(2.5);
//Verlangsame die Abspielgeschwindigkeit um 10% der Normalgeschwindigkeit
tl.timeScale(0.1);
//Füge ein label namens "myLabel" nach exakt 3 Sekunden hinzu:
tl.insert("myLabel", 3);
//Füge ein Tween hinzu, welches bei "myLabel" startet
tl.insert( TweenLite.to(element, 1, {css:{scale:0.5}}), "myLabel");
//Springe zu "myLabel" und spiele die Zeitleiste ab da ab.:
tl.play("myLabel");
siehe Greensock Dokumentation
Es folgt das erste Beispiel der Dokumentation. Es reicht anscheinend nicht aus, TweenMax einzubinden. Es muss auch die Draggable.min.js eingebunden werden.
Draggable.create("#yourID");
Im zweiten Beispiel dient das Elternelement als Begrenzungsbox (Bounding Box). Außerdem werden Hinweise an die console ausgegeben.
Draggable.create("#yourID", {
bounds: document.getElementById("container"),
throwProps:true,
onClick:function() {
console.log("clicked");
},
onDragEnd:function() {
console.log("drag ended");
}
});
Im dritten Beispiel wird die Bewegung auf der vertikalen y- Achse eingeschränkt. Eine gute Möglichkeit einen Schieberegler zu erzeugen.
type:"y",
Beispiel mit Drehung
type:"rotation"
Hier wird die Box nicht verschoben, sondern der Inhalt wird innerhalb der Box gescrollt.
In diesem Beispiel haben wir wieder die Begrenzungsbox, jedoch hier mit einer Art Einschnappfunktion. Die Elemente springen zurück, wenn man sie über den Rand der Begrenzungsbox hinausschiebt.
Im folgenden Beispiel kann man einige Photos verschieben. Die ursprüngliche Drehung der Photos wird beim Verschieben auf 0 Grad gesetzt. Außerdem wird das Photo vergrößert und nach dem Vorgang wieder verkleinert. Hier kommen Events zum Einsatz. onPress und onDragEnd. Der selektor this.target verweist auf das Element, welches gerade verschoben wird.