201003Feb

jQuery: Gravitation in Animationen erzeugen

Durch physikalische Bewegungsabläufe lassen sich Realismus und Dynamik in Animationen erzeugen. Dabei spielt Gravitation eine wichtige Rolle, die jedoch in Verbindung mit Easing (Abbremsen bzw. Beschleunigen) relativ einfach simuliert werden kann. Im ThemeForest-Blog gab es dazu einen interessanten Artikel, der an einem einfachen Beispiel Gravitationseffekte zeigt.

Themeforest - Gravitation in jQuery

Unter Verwendung des jQuery Easing Plugins lassen sich solche Effekt sehr gut umsetzen. Die relevanten jQuery-Zeilen entsprechen in etwa:

  • yPos = $(block).position()["top"] – $("#air").position()["top"];
  • hoehe = ($("#air").outerHeight() – yPos) – $(block).outerHeight();

Das DOM-Element "air" ist das Elternelement (in dem Beispiel die hellblaue Fläche), während "block" den aktuell animierten Block beschreibt. Anschließend wir der CSS-Wert "marginTop" des "block"-Elements mit dem Easing-Parameter "easeOutBounce" animiert. Diese mathematische Berechnung sorgt für den springenden Bewegungsablauf, was dem schwarzen Objekt Gewicht und Material verleiht.

RSS-Feed abonnieren