Auf der Suche nach einer "swing" -ähnlichen Erleichterung, die sowohl mit jQuery als auch mit CSS3 ausgedrückt werden kann
Ich muss zwei Animationen gleichzeitig an einem Objekt durchführen.
Aus verschiedenen Gründen möchte ich jQuery für die vertikale Animation und CSS3 für die horizontale Animation verwenden.
Auf der jQuery-Seite funktioniert swing easing hervorragend:
Ich suche nach einer Möglichkeit, diese Beschleunigungsfunktion in CSS3-Übergang auszudrücken.
Wenn es unmöglich ist, suche ich nach einer Beschleunigungsfunktion (z. B. einer Bézier-Kurve), die am ähnlichsten ist zu swing
und kann beide in jQuery und CSS3 verwendet werden. Bitte fügen Sie einen Link zu den erforderlichen Plugins hinzu.
3 Antworten
TL; DR
Ich fand, dass die [.02, .01, .47, 1] Bézier-Kurve eine gute Näherung liefert.
CSS3
%Vor%jQuery
%Vor%mit jquery.easie (Sie können auch Bez ).
Die Suche
Ich habe diese Grafiken aus der Antwort von Sparky672 verwendet, um die genaue Funktion und ihre Argumente herauszufinden:
Es ist dasselbe wie y = –x • (x – 2) , wobei x zwischen 0 und 1 liegt.
Also habe ich eine Grafik mit abettercalculator erstellt:
Ich habe es abgeschnitten und online gestellt.
Dann verwendet position: absolute , um cubic-bezier.com , vorgeschlagen von Jim Jeffers, zu überlagern.
Die resultierende Approximation, die ich verwendet habe, war [.02, .01, .47, 1] .
Gemäß W3C dürfen Sie nur die folgenden Beschleunigungsfunktionen verwenden auf der Eigenschaft transition-timing-function .
- Leichtigkeit
- linear
- Erleichterung
- Erleichterung
- Leichtigkeit-in-out
- kubisch-bezier (
<number>, <number>, <number>, <number>)
Wenn Sie "swing" in eine kubische Bezier-Funktion übersetzen können, können Sie das tun.
Auch wenn Sie sich die grafischen Darstellungen hier ansehen, scheint es so, als wäre die ease-out in transition-timing-function eingebaut. ist der Form von swing sehr ähnlich.
BEARBEITEN basierend auf Kommentaren:
Wenn Sie jQuery nur zum Beschleunigen verwenden möchten, brauchen Sie nicht einmal ein Plugin. Sie können einfach Ihre bevorzugte Funktion definieren und verwenden ...
jQuery-Beschleunigungsfunktionen ohne Verwendung eines Plugins
Sie sind auf die Voreinstellungen oder eine einfache kubische Bezierkurve beschränkt. Ich habe es geschafft, indem ich in JavaScript eine Beschleunigungs-Engine erstellt habe, die CSS-Keyframe-Animationen erzeugt, die als Übergänge ausgeführt werden:
%Vor%Sie können das Projekt hier auschecken: Ссылка
Durch die Verwendung von CSS-Keyframe-Animationen erhalten wir die GPU-gesteigerte Leistung von CSS-Übergängen mit der uns zugewiesenen Flexibilität, indem wir unsere eigenen benutzerdefinierten Beschleunigungsgleichungen in Javascript verwenden.
Meine Beschleunigungs-Engine verwendet einen Port von Robbert Penners Gleichungen. Der, der jswing entspricht, sollte dies sein:
%Vor%UPDATE:
Pro Kommentar - Wenn Sie möchten, können Sie versuchen, die Kurve eines Schwungübergangs mit einem Werkzeug wie:
zu vergleichenTags und Links jquery css3 css-transitions jquery-easing