Auf der Suche nach einem "swing"-wie die Lockerung ausdrückbar ist sowohl mit jQuery und CSS3

Habe ich zwei Animationen auf ein Objekt gleichzeitig.

Für eine Reihe von Gründen, ich möchte die jQuery für die vertikale animation und CSS3 für die horizontale.

Auf der jQuery Seite, swing Lockerung funktioniert Super:

Auf der Suche nach einem 

swing: function (a,b,c,d){return(-Math.cos(a*Math.PI)/2+.5)*d+c}

Ich bin auf der Suche nach einem Weg, um dies auszudrücken easing-Funktion in CSS3 transition.

Wenn es unmöglich ist, ich bin auf der Suche für eine easing-Funktion (z.B. eine Bézier-Kurve), die die meisten ähnlich zu swing

und kann verwendet werden, beide in jQuery und CSS3. Bitte link zu den benötigten plugins.

  • Nur finden kann ich den umgekehrten Weg gehen und verwenden Sie bezier-format (auch CSS3) für jQuery easing konsistente easings.
  • Noch besser—jquery.easie bietet genaue CSS3 easings für jQuery.
  • Ich persönlich würde empfehlen, das plugin, weil es nicht Präfix aller-easing-Funktionen mit easie, aber das ist nur persönliche Präferenz. Vielleicht möchten Sie versuchen ease-in-out in Ihrem CSS3 für eine swing-ish-animation.
  • Sie fragte, wie das zu tun swing mit CSS3. Wie wird mit einem jQuery-plugin zu "simulieren" CSS easing Ihnen helfen, wenn Sie könnten, verwenden Sie einfach die original-jQuery - swing in den ersten Platz?
  • Sie würde die Suche nach Leichtigkeit-in-out
  • Ich bin auf der Suche nach einem Weg, um meine horizontale (CSS3) und vertikale (jQuery) Animationen konsistent. Aber diese Frage ist speziell über jede Annäherung an swing im CSS3 so, dass ist der Grund, warum ich schrieb über diese plugins in die Kommentare.
  • Dann der nächste Weg, um eine swing in CSS3 wäre die ease-out gebaut in den CSS3 - transition-timing-function Eigenschaft.
  • Hey Leute, sorry für die Verwirrung. Ich werde die Antwort akzeptieren, die enthält eine Funktion am meisten ähnlich swing können beide verwendet werden, mit jQuery und CSS3, mit links auf die entsprechenden plugins.

InformationsquelleAutor Dan Abramov | 2012-02-11
  1. 27

    TL;DR

    Ich festgestellt, dass [.02, .01, .47, 1] Bézier-Kurve liefert eine ausreichend gute Näherung.

    CSS3

    -webkit-transition: all 1s cubic-bezier(.02, .01, .47, 1); 
-moz-transition: all 1s cubic-bezier(.02, .01, .47, 1); 
transition: all 1s cubic-bezier(.02, .01, .47, 1);

    jQuery

    $(element).animate({ height: height }, 1000, $.easie(.02, .01, .47, 1));

    mit jquery.easie (Sie könnte genauso gut verwenden bez).

    Die Quest

    Ich verwendet diese Graphen von Sparky672 Antwort, um herauszufinden, die genaue Funktion und Ihre Argumente:

    Auf der Suche nach einem

    Ist es das gleiche wie y = –x • (x – 2) wo x ist zwischen 0 und 1.

    So habe ich eine Grafik mit abettercalculator:

    Auf der Suche nach einem

    Ich beschnitten es und stellen es online.

    Dann verwendet position: absolute overlay cubic-bezier.com, vorgeschlagen von Jim Jeffers.

    Auf der Suche nach einem

    Die daraus resultierende Annäherung, die verwendet wurde, war ich [.02, .01, .47, 1].

    InformationsquelleAutor Dan Abramov
  2. 3

    Gemäß dem W3C, man darf nur die folgenden easing-Funktionen auf der transition-timing-function Eigenschaft.

    • Leichtigkeit
    • lineare
    • ease-in
    • Leichtigkeit-out -
    • ease-in-out
    • cubic-bezier(<number>, <number>, <number>, <number>)

    Wenn Sie übersetzen "swing" in ein cubic-bezier-Funktion, können Sie es tun.

    Sich auch, einen Blick auf die grafische Darstellungen hier, wie es scheint, die ease-out gebaut in transition-timing-function ist sehr ähnlich zu der Form der swing.

    BEARBEITEN, basiert auf Kommentare:

    Wenn Sie lieber nur verwenden jQuery für Ihre Lockerung, dann brauchen Sie nicht einmal ein plugin. Können Sie einfach definieren Sie Ihre bevorzugte Funktion und verwenden Sie es...

    jQuery-easing-Funktionen ohne den Einsatz eines plugins

    • Ich habe eben versucht ease-out aber leider es funktioniert nicht gut für mich (der Unterschied ist spürbar). Ich enthalten eine Klarstellung: es ist viel einfacher, jetzt zu verwenden jQuery für eine animation und CSS3-für den anderen ein. Immer die Lockerung der rechten Seite ist das einzige problem. Ansonsten, vielen Dank für die info!
    • wenn ease-out ist nicht nah genug, dann versuchen, es zu duplizieren mit einem cubic-bezier ist die einzige andere option für ein CSS3-Lösung.
    • Danke, ich werde versuchen, und lassen Sie wissen, die Ergebnisse.
    • Es gibt das Ergebnis. Nochmals vielen Dank!
    InformationsquelleAutor Sparky
  3. 1

    Sind Sie begrenzt auf die presets oder eine einfache kubische Bézier-Kurve. Ich habe um diese durch die Schaffung einer Lockerung engine in javascript erzeugt CSS-keyframe-Animationen, die ausgeführt werden, als übergänge:

    bounceDownTransition = new Sauce()
bounceDownTransition.recipe( (element) ->
   element.change("y").from(-200).using(Easie.bounceOut)
   element.change("scale").from(0).using(Easie.circOut)
)

bounceDownTransition.duration(2).delay(0.5).putOn("element_with_this_id")

    Können Sie Kasse das Projekt hier:
    https://github.com/jimjeffers/Sauce

    Durch die Verwendung von CSS keyframe-Animationen erhalten wir die GPU-enhanced-performance von CSS transitions mit der Flexibilität, die uns zugeteilt sind unsere eigenen custom-easing-Gleichungen in javascript.

    Mein Lockerung der Motor verwendet einen port von Robbert Penner-Gleichungen. Die passende jswing sollte dies sein:

    @sineIn: (time,begin,change,duration) ->
    -change * Math.cos(time/duration * (Math.PI/2)) + change + begin

    https://github.com/jimjeffers/Easie/blob/master/easie.coffee#L218

    UPDATE:

    Pro Kommentare-wenn Sie möchten, können Sie versuchen, zu entsprechen, die Kurve, die ein swing-übergang mit einem tool wie:

    http://cubic-bezier.com/#.41,.66,.54,.91

    • Wow, das ist heiß. Keine Unterstützung für IE?
    • Jedoch, er ist zu Fragen, wie es mit CSS3, kein JavaScript.
    • Noch nicht, aber könnte etwas Hilfe gebrauchen! Nur tun Sie es auf der Seite.
    • ja, aber ich werde zeigen, wie können Sie javascript verwenden, um es zu tun mit CSS3. Anstatt der Behandlung von Ihnen als sich gegenseitig ausschließende Optionen.
    • Ich bin fasziniert von diesem als gut... aber von einem community-moderation Standpunkt, es ist technisch nicht eine Antwort... es sei denn er bearbeitet seine ursprüngliche Frage 😉
    • fair genug, ich nehme an, Sie könnten wahrscheinlich passen eine Schaukel animation mit einer bezier-Kurve.
    • Hey @Jim, danke für all die Hilfe. Ich habe gerade gebucht die Lösung.
    • Das sieht aus wie die beste Antwort!

    InformationsquelleAutor Jim Jeffers
Schreibe einen Kommentar