201212Dez

jQuery: Box2D für Physik-Effekte bei DOM-Elementen

Es ist soweit: Die 2D-Physik-Engine Box2D steht ab sofort auch in Form eines jQuery-Plugins zur Verfügung. Neben der AS3-Version und der JavaScript-Variante gibt es also mit "Box2D-jQuery" einen weiteren Vertreter der beliebten Engine, mit der sich physikalisch korrekte Animationen erzeugen lassen. Im Gegensatz zur JavaScript-Version "Box2DJS", die auf Canvas basiert, macht das jQuery-Plugin Gebrauch von CSS3-Transformationen und erlaubt dadurch Physik-Effekte bei DOM-Objekten.

Box2D-jQuery

Die Performance des Plugins ist überraschend gut und die Verwendung ist denkbar einfach:

  • $("h1, div, img").box2d({ 'y-velocity': 5 });

Die Eigenschaft "y-velocity" ist im Beispiel auf den Wert 5 eingestellt, was bedeutet, dass die DOM-Elemente 5 Pixel pro Schritt nach unten bewegt werden (Gravitation). Neben der vertikalen Beschleunigung lassen sich wie gehabt noch weitere Attribute wie Dichte, Reibung oder Federkraft einstellen. Bei GitHub findet sich die Bibliothek mit Dokumentation und Beispielen.