Wie die Umsetzung easeOutBack Lockerung in css transform-animation

Arbeite ich mit einigen css-animation. Aber ich fand, dass die CSS-übergang unterstützen nur folgende easing-Funktion.

einfache | lineare | ease-in | ease-out | ease-in-out | cubic-bezier()

Ich will so etwas wie easeOutBack Lockerung in der animation mit reinem css. Ich bin am überlegen, es zu tun mit der webkit-animation. Aber nur safari unterstützt.

Den easeOutBack Bewegung ist eine Bewegung
wo wird das Objekt hinausgehen
Grenze und wieder zurück.Mehr über die verschiedenen motion-Funktion.
Sie können finden Sie unter diesem link.

http://hosted.zeh.com.br/tweener/docs/en-us/misc/transitions.html

Jemand eine Vorschlag, wie zu implementieren easeOutBack Lockerung in css transform-animation?

  • es könnte helfen, wenn Ihr zu erklären, was easeOutBack bedeutet. nicht jeder benutzt das jquery-Modul, auf das Sie sich beziehen.
  • Sorry, ich habe fügen Sie einige Erklärung.
InformationsquelleAutor WaiLam | 2011-04-18
  1. 8

    Können Sie Ihre eigene Kurve mit den -webkit-animation-timing-function CSS-Eigenschaft.

    Das format der Funktion ist cubic-bezier(P1x, P1y, P2x, P2y) wobei P1 und P2 sind die beiden mittleren Punkte einer kubischen Bézier-Kurve von (0,0) nach (1,1). In Ihrem Fall, Sie wollen etwas, das sieht aus wie -

    EaseOutBack http://i56.tinypic.com/adg8yo.png

    Also die Punkte würden Sie in dieser Kurve sind - (0,0) und (0.2,1). Dies macht die Kurve - cubic-bezier(0,0,0.2,1).

    Ach, der webkit-kubische Kurve-Spezifikation nicht erlauben, die animation zu überschreiten die Grenzen von 1,1-cube. So animiert die Kurve wie gewünscht, die Sie brauchen, um einen zusätzlichen keyframe, der gibt die 'overflow'.

    @-webkit-keyframes snapback {
    0% {
        -webkit-transform:translateX(0px);
    }
    60% {
        -webkit-transform:translateX(140px);
    }
    100% {
        -webkit-transform:translateX(100px);
    }
}

    Werfen Sie einen Blick auf das Beispiel, das ich warf zusammen - http://jsfiddle.net/Heqs8/

    • Super..ich versuche auch zur Umsetzung der animation. Aber webkit nur. Ich bin versucht zu hacken jquery animation-Modul zur Unterstützung von css3-transform. Also, ich kann machen verwenden von jquery-timing-Funktion + css zu transformieren, um die Ergebnisse erzielen.
    • Während die animation " gehen am Ziel vorbei zeigen und gibt auf der Ziel-Punkt ist es nur C0 kontinuierliche und sieht völlig haltlos. Sie möchten, halten Sie die Bewegung glatt, so verwenden ease-in der auf das erste segment und Leichtigkeit-out auf dem zweiten segment, und die Leichtigkeit-in-out auf der letzten.
    • Gut-Leichtigkeit-in-out-auf dem letzten sieht nicht so gut. Es muss eine gute Bézier-Funktion für Sie.
    InformationsquelleAutor Anupam Jain
  2. 1

    Sieht aus wie der folgende code fügt die easeOutBack animation mit jQuery, und dann sollten Sie in der Lage sein, es zu benutzen.

    jQuery.extend(jQuery.easing, {
    easeOutBack: function (x, t, b, c, d, s) {
        if (s == undefined) s = 1.70158;
        return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
    }
});

    Gefunden von http://jsfiddle.net/marcofucci/rRtAq/, die erwähnt http://gsgd.co.uk/sandbox/jquery/easing/.

    • Danke. Ich will aber reines CSS-animation, aber nicht jquery.
    • Tagging Ihre Frage mit jQuery-tags ist ein bisschen verwirrend dann.
    • Der tag ist nicht von mir aufgenommen. ich werde es entfernen.
    InformationsquelleAutor Chris McFarland
  3. 1

    Andere alternative ist die CSS3-Animation-Generator, die es ermöglicht 12-easing-Funktionen nicht unterstützt, die von der W3C Besonderheiten, einschließlich back-ease-out. Eher als die Verwendung von kubischen Kurven, die eine Reihe von Einschränkungen, die CSS3-Animation-Generator verwendet keyframes berechnet.

    InformationsquelleAutor Eric Rowell
Schreibe einen Kommentar