Verwenden von CSS zur Implementierung von Bildrahmenanimationen und Kurvenbewegungen

Das Grundprinzip aller Animationen besteht darin, innerhalb kurzer Zeit zusammengehörende Bilder nacheinander anzuzeigen, so dass der Eindruck einer optischen Bewegung entsteht.

In diesem Artikel werden hauptsächlich die Punkte 4 und 5 behandelt.

Bilderrahmen-Animation

Wenn der gewünschte Animationseffekt komplexer ist und der Entwicklungszeitplan eng ist, ist die Verwendung eines GIF zur Erstellung der Animation die kostengünstigste und effektivste Lösung. Beispielsweise folgender Animationseffekt:

Wenn wir jedoch möchten, dass die Animation zu einem bestimmten Zeitpunkt angehalten wird und die Wiedergabe der Animation nach einer gewissen Zeit vom Haltepunkt aus fortgesetzt wird, ist dies mit GIF-Bildern nicht möglich. Es gibt keine Möglichkeit, die Animation eines GIF-Bildes anzuhalten. Zu diesem Zeitpunkt können Sie die Verwendung einer Bilderrahmenanimation in Betracht ziehen.

Man kann sich die Bilderrahmenanimation wie folgt vorstellen: Implementierung des Prinzips von GIF-Bildern mit Code auf dem Front-End.

Die obige Animation kann (hypothetisch) in 100 Frames, also 100 Bilder, unterteilt werden. Anschließend wird der Code verwendet, um die Anzeige der 100 Bilder nacheinander zu steuern. Und Sie können jederzeit eine Pause einlegen.

Um HTTP-Anfragen zu sparen, kombinieren Sie 100 Bilder zu einem Sprite-Bild und steuern Sie anschließend über die Hintergrundposition, welches Bild angezeigt wird. Empfehlen Sie ein sehr gutes Bildgenerierungstool: GKA

Ich habe aus 100 Bildern ein vertikales Sprite erstellt.

Im Code müssen Sie nur die Hintergrundposition des DOM-Elements aktualisieren, um die Animation zu erzielen.

Der erste zu beachtende Punkt ist, dass die Hintergrundposition die Startposition des Hintergrundbildes relativ zum DOM-Element festlegt.

Angenommen, die Breite und Höhe des DOM-Elements und des Bildes betragen beide 100 * 200

---css

#Wrapper {
    Breite: 100px;
    Höhe: 200px;
    Hintergrundbild: URL('Sprite.png');
    Hintergrundgröße: 100% 10000%; // Es gibt 100 Bilder, 100*100
    Hintergrundwiederholung: keine Wiederholung;
}

--- js

var domEl = document.querySelector('#wrapper');
var n; // n: die Anzahl der im Sprite-Diagramm anzuzeigenden Bilder, n >= 0 && n<100
domEl.style.backgroundPosition = `0px ${-n*200}px`; // Beachten Sie, dass dies ein negativer Wert ist

Wir müssen nur js verwenden, um den Wert von n zu steuern, und können die Animation jederzeit problemlos ausführen und anhalten.

Im obigen Beispiel sind die Breite und Höhe des DOM-Elements fest. Wenn sie nicht fest sind und Sie möchten, dass sie adaptiv sind, müssen Sie das Seitenverhältnis des DOM-Elements über padding-top entsprechend dem Seitenverhältnis des Bildes einstellen. Derzeit können Sie in der Hintergrundposition keine spezifischen Werte mehr verwenden, Sie müssen Prozentsätze verwenden. Dabei ist eines zu beachten:

Wenn man den Prozentwert der Hintergrundposition nimmt, ist es naheliegend zu glauben, dass der endgültige Versatz durch einfaches Multiplizieren der Breite und Höhe des Hintergrundbildes mit dem Prozentsatz ermittelt werden kann. Dies ist jedoch nicht der Fall. Die Berechnungsformel lautet wie folgt:

x Versatz = (Elementbreite - Breite des Hintergrundbilds) * x Prozentsatz
y-Offset = (Elementhöhe - Höhe des Hintergrundbilds) * y-Prozentumrechnung:

x Prozentsatz = x Versatz / (Elementbreite - Breite des Hintergrundbilds)
Y-Prozentsatz = Y-Versatz / (Elementhöhe – Höhe des Hintergrundbilds)

Im Einzelnen ist es im obigen Beispiel:

// Angenommen, die Breite jedes kleinen Bildes ist w und die Höhe ist h, das n-te Bild muss angezeigt werden und es gibt insgesamt 100 Bilder, dann var xPercent = 0;
var yProzent = -hn / (h - 100h) * 100 = n / 99 * 100;
domEl.style.backgroundPosition = `${xPercent}% ${yPercent}%`;

Schließlich können wir die Bilderrahmenanimation realisieren. Wenn Sie den Animationseffekt nicht vollständig steuern müssen, können Sie CSS natürlich direkt ohne die Hilfe von JS verwenden. Oder verwenden Sie einfach eine GIF-Animation.

CSS-Kurvenbewegung

Für gekrümmte Bewegungen ist die Verwendung von SVG oder Canvas eine gute Wahl. Wenn der Kurvenpfad jedoch nicht so streng ist, kann die Verwendung von SVG und Canvas etwas problematisch sein. Um eine Bewegung zu erzielen, die wie eine Kurve aussieht, können Sie CSS direkt nutzen. Am Beispiel einer parabelartigen Bewegung ist der Effekt wahrscheinlich wie folgt:

Die Tangente an einem Punkt auf der Verschiebungskurve ist die Geschwindigkeit, und die Geschwindigkeit kann in die Geschwindigkeit auf der x-Achse und die Geschwindigkeit auf der y-Achse zerlegt werden. Mit anderen Worten kann die obige Bewegung in die Bewegung der horizontalen x-Achse und die Bewegung der vertikalen y-Achse zerlegt werden. Sensorisch lässt sich unschwer erkennen, dass die Bewegung der x-Achse etwa gleichmäßig erfolgt, während die Bewegung der y-Achse immer schneller wird.

Da die Bewegung außerdem in zwei Richtungen zerlegt wird, sind zwei DOMs erforderlich, um Animationen separat zu schreiben und den endgültigen Effekt zu erzielen.

---html

<div Klasse='x-Container'>
    <div Klasse = "y-Container"></div>
</div>

---css

.x-container {
    Breite: 50px;
    Höhe: 50px;
    Animation: xBewegung 2 s linear;
}
.y-Container {
    Breite: 50px;
    Höhe: 50px;
    Randradius: 50 %;
    Hintergrundfarbe: #000;
    Animation: yBewegung 2s kubisch-bezier(.98,.03,.91,.77);
}
@keyframes xMove {
    0% {
    }
    100 % {
      transformieren: übersetzenX(400px);
    }
}
@keyframes yBewegen {
    0% {
    }
    100 % {
      transformieren: übersetzenY(400px);
    }
}

Die kombinierte Bewegung in die beiden Richtungen erzeugt den oben genannten Effekt. Informationen zur Bewegungskurve im Animationsattribut finden Sie auf der folgenden Website:

https://cubic-bezier.com/

Wenn Sie eine weniger strenge Kurvenbewegung erreichen möchten, ist auch die direkte Verwendung einer CSS-Animation eine gute Wahl.