JQuery-Animation stellt einheitliche Geschwindigkeit ein

In der Webentwicklung sind Animationseffekte sehr verbreitet. Animationseffekte können das Benutzererlebnis verbessern und Webseiten lebendiger und interessanter machen. Bei der Realisierung von Animationseffekten ist jQuery ein sehr häufig verwendetes Werkzeug. Es bietet uns umfangreiche und praktische Methoden zur Animationseinstellung, einschließlich der Einstellung einheitlicher Animationen.

Gleichmäßige Animation, das heißt, während des Animationsprozesses bleibt die Geschwindigkeit des Objekts immer unverändert. Es ist einfacher als andere Arten von Animationseffekten, aber in bestimmten Szenarien sehr praktisch. Wie stellt man also eine einheitliche Animation in jQuery ein? Lassen Sie uns es unten im Detail vorstellen.

Die Methode, die Sie zum Festlegen einer einheitlichen Animation in jQuery verwenden müssen, ist zunächst animate(). Mit der animate()-Methode können wir benutzerdefinierte Animationseffekte für bestimmte Elemente implementieren. Bei dieser Methode können wir den Schrittparameter verwenden, um den Effekt einer einheitlichen Animation anzugeben.

Also, was ist der Schrittparameter? Einfach ausgedrückt handelt es sich um eine Funktion, die bei jedem Frame der Animation aufgerufen wird. Wir können unterschiedliche Animationseffekte erzielen, indem wir in der Schrittfunktion die entsprechende Logik festlegen. Setzen Sie den Schrittparameter auf eine Funktion. Das Beispiel lautet wie folgt:

$(selector).animate({
    // 动画的属性和值
},
{
    duration: 1000, // 动画执行的时间
    step: function (now, fx) {
        // 设置匀速动画
    }
});

Im obigen Code legen wir die Animationsausführungszeit über den zweiten Parameter in der animate()-Methode fest. Der Parameterschritt stellt die Rückruffunktion dar, die in jedem Frame des Animationsprozesses aufgerufen wird. Diese Rückruffunktion hat zwei Parameter, stellt nun den aktuellen Attributwert dar (kann eine Zahl oder eine Zeichenfolge sein) und fx repräsentiert das aktuelle Animationsobjekt.

In der Funktion step() können wir eine einheitliche Animation erreichen, indem wir das Attribut now bearbeiten. Die Implementierung einer einheitlichen Animation besteht darin, den Wert des Jetzt mit der Zeit zu erhöhen, anstatt ihn zu beschleunigen oder zu verlangsamen. Hier können wir den Wert von jetzt durch eine einfache Formel berechnen: jetzt = Start + (Ende – Start)*p, wobei Start und Ende jeweils der Startwert und der Endwert des Attributs sind und p die aktuelle Gesamtzeit darstellt Zeitanteil, sein Wert liegt zwischen 0 und 1.

Das Folgende ist ein einfaches Beispiel, um zu zeigen, wie eine einheitliche Animation in jQuery implementiert wird:

HTML-Code:

<div id="box"></div>

CSS-Code: # 🎜🎜 #

#box {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    left: 0;
}

JS-Code:

$(document).ready(function () {
    $("#box").animate({
        left: "400px"
    },
    {
        duration: 5000,
        step: function (now, fx) {
            $(this).css("left", now);
        }
    });
});

In diesem Beispiel haben wir ein div-Element mit einer Breite und Höhe von 100 Pixeln und einer roten Hintergrundfarbe um 400 Pixel nach rechts verschoben und 5 Sekunden lang ausgeführt. In der Funktion step() setzen wir den aktuellen linken Attributwert auf den Jetzt-Wert und erzielen so einen einheitlichen Bewegungsanimationseffekt.

Daher können wir mit der oben genannten Methode problemlos einen einheitlichen Animationseffekt in jQuery festlegen. Natürlich gibt es in der tatsächlichen Entwicklung neben der einheitlichen Animation noch viele andere Arten von Animationseffekten, die wir verstehen und lernen müssen. Durch kontinuierliches Üben und Sammeln können wir die Animationseinstellungsmethoden von jQuery besser beherrschen und so reichhaltigere, lebendigere und interessantere Animationseffekte für Webseiten erzielen.

Das obige ist der detaillierte Inhalt vonJQuery-Animation stellt einheitliche Geschwindigkeit ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!