Kategorien
Allgemeines Entwickler

Arbeiten mit Easing-Effekten

Aktuell arbeiten wir viel mit Slidern und anderen Objekten, bei denen man eine Überblendung oder ähnliches verwenden kann. Sieht schön aus und ist auch für das Webdesign sehr praktisch. Um diese Animationen zu beschleunigen oder einzubremsen, hält CSS3 einfache Ease-In- und Ease-Out-Effekte bereit. Diese können auch durch die Definition eigener Easings ersetzt werden.

Wer sich allerdings nicht so recht an das Festlegen einer individuellen Bézierkurve traut, für den stehen auf http://easings.net/ 30 vordefinierte Animationseffekte bereit. Damit man sich unter den einzelnen Effekten auch etwas vorstellen kann, haben die Macher der Seite kleine Vorschaubilder der Bézierkurven erstellt. Für jedes Easing wird dann auch noch der passende Quelltext gleich mitgeliefert.

Da direkt in CSS3 ausgeführte Easings nicht über allzu komplexe Bézierkurven verfügen dürfen, muss das Abfedern oder die Elastizität in einer Animation dann mittels Javascript realisiert werden. Auf der hier vorgestellten Website sind deshalb nicht nur Kurven für CSS3 zu finden, sondern auch immer der passende Quelltext für das jQuery-Easing-Plugin. Damit sind dann auch sehr viel komplexere Animationsübergänge möglich. In dem Plugin sind die bereits angesprochenen 30 Easing-Effekte schon implementiert. Deshalb muss lediglich der Name des Effektes angegeben werden.

Auch die Ausgabe für das CSS3-Framework Compass ist mit der Erweiterung Ceaser Easing Animation möglich. Vordefinierte Easings können damit einfach übernommen werden, ohne das der Entwickler die entsprechende Bézierkurve angeben muss.

Viel Spaß beim ausprobieren!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert