Circulate

Kürzlich hatte ich den Anlass, etwas in einem Kreis zu animieren. Mir war bis dahin nicht bewusst, dass es dafür noch keine offensichtliche Lösung mit jQuery gab. Also habe ich einen Weg gefunden und daraus ein Plugin gemacht.

Demo anzeigen   Dateien herunterladen

Die ermächtigenden Konzepte

Dies ist ein jQuery-Plugin, daher ist es offensichtlich auf die jQuery-Bibliothek angewiesen. Speziell jQuery 1.4 oder neuer, da wir die neue Fähigkeit der .animate()-Funktion nutzen, eigene Easing-Funktionen pro Eigenschaft zu haben. Das bedeutet, wir können den "top"-Wert mit einer Easing-Funktion animieren, während wir den "left"-Wert mit einer anderen Easing-Funktion animieren. Bei all dem Gerede über Easing... ich sollte sagen, dass dies nicht nur jQuery 1.4+ erfordert, sondern auch das Easing-Plugin. Hier ist die Idee

Wenn wir das also viermal tun, die Easing-Funktionen vertauschen und nach Bedarf addieren/subtrahieren, können wir einen Kreis erhalten. Und nicht nur einen Kreis wirklich, sondern jede Ellipse, die durch Höhe und Breite definiert ist.

Funktionen

Sie können Geschwindigkeit, Höhe und Breite festlegen. Das sind ziemlich offensichtliche / Standard- / erwartete Parameter für ein Plugin wie dieses. Es gibt jedoch drei weitere

• sizeAdjustment: eine prozentuale Anpassung. Standard ist 100 (bleibt gleich). Weniger als 100 = schrumpft auf diesen Prozentsatz zur Hälfte des Weges und dann wieder nach oben. Mehr als 100 = wächst auf diesen Prozentsatz zur Hälfte des Weges und dann wieder nach unten.
• loop: Standard ist false. True bedeutet, dass die Schleife rekursiv ausgeführt wird. Sie können eine laufende Schleife stoppen, indem Sie das Plugin für dieses Element mit nur einem einzigen String-Parameter aufrufen: $(“#thing”).circulate(“stop”);
• zIndexValue: akzeptiert ein Array von vier numerischen Werten. Diese Werte legen die z-index CSS-Eigenschaft an jedem der vier Punkte der Animation fest.

Hier ist das vollständige Set

$("#anything").circulate({

    speed: 400,                  // Speed of each quarter segment of animation, 1000 = 1 second
    height: 200,                 // Distance vertically to travel
    width: 200,                  // Distance horizontally to travel
    sizeAdjustment: 100,         // Percentage to grow or shrink
    loop: false,                 // Circulate continuously
    zIndexValues: [1, 1, 1, 1],  // Sets z-index value at each stop of animation

});

BETA

Im Moment nenne ich das eine Beta-Version. Hauptsächlich, weil es in Opera nicht sehr gut funktioniert. Wenn jemand ein großer Opera-Fan ist und herausfinden möchte, was damit nicht stimmt, bin ich ganz Ohr.

Es ist auch Beta, weil ich noch nicht viel Feedback dazu erhalten habe, daher möchte ich auf alles reagieren, was reinkommt, und bei Bedarf Änderungen vornehmen. Zum Beispiel denke ich, dass ein Callback-Funktionsparameter eine gute Idee wäre. Außerdem bin ich sicher, dass einige Teile effizienter geschrieben werden könnten.

Demo anzeigen   Dateien herunterladen