Wie spiele ich Bildsequenzen reibungslos mit CSS -Animation?

Wie benutze ich CSS -Animation, um eine sanfte Bildsequenzwiedergabe zu erzielen?

Viele Szenen erfordern simulierte Video -Wiedergabel -Effekte, aber das Material ist eine Abfolge von Bildern. Die Methode, den Bildpfad direkt zu ersetzen, ist ineffizient und neigt für den schwarzen Bildschirm oder die Verwirrung, die durch die Ladeverzögerung verursacht wird. Dieser Artikel enthält eine Lösung, die auf CSS -Animation basiert, um solche Probleme effektiv zu vermeiden.

Das Vorladen aller Bilder ist nicht die beste Lösung, insbesondere wenn die Anzahl der Bilder enorm ist, die Verwaltungs- und Ladekosten zu hoch sind.

Eine bessere Strategie besteht darin, die Bilder in ein langes Bild zu spleißen. Unter der Annahme, dass alle Bilder gleich groß sind (z. B. 500 x 300 Pixel), spleifen Sie die drei Bilder horizontal in ein langes Bild von 1500 x 300 Pixel. Verwenden Sie background-position von CSS und @keyframes -Animation, um die Bildwiedergabe zu simulieren.

Das folgende CSS -Codebeispiel:

 .Container {
  Breite: 500px;
  Höhe: 300px;
  Hintergrund: URL ("geteiltes Bild") Links / Auto 100% No-Repeat;
  Animation: Animationsdauer Schritte abspielen (1, Start) 0s Infinite Normal None;
}

@keyframes spielen {
  aus {Hintergrundposition: 0 0; } /* Foto 1* /
  33,3% {Hintergrundposition: -500px 0; } /* Foto 2* /
  66,7% {Hintergrundposition: -1000px 0; } /* Foto 3* /
  zu {Hintergrundposition: 0 0; } /* Gehen Sie zurück zum ersten Bild, spielen Sie es Schleife* /
}

Im Code definiert .container den Container und das Hintergrundbild ist ein langes Bild der Nähte. animation definiert das play , steps(1, start) stellt sicher, dass die Animation Schritt für Schritt abgespielt wird und动画时长an die Anzahl der Bilder und die Wiedergabegeschwindigkeit angepasst werden muss. background-position steuert den Anzeigebereich und schaltet die Bilder durch, indem er seinen Wert geändert hat. Der Prozentsatz in keyframes muss entsprechend der Anzahl und Größe des Bildes angepasst werden, und die Anzeigezeit jedes Bildes wird genau gesteuert.

Diese Methode vermeidet das Laden von nacheinander, verbessert die Wiedergabereiung und erleichtert den Code einfach und leicht zu verstehen. Die Prämisse ist, dass alle Bilder gleich groß sind. Wenn die Größe inkonsistent ist, muss die Vorverarbeitung unter Verwendung von Leinwand oder anderen Bildverarbeitungstechniken durchgeführt werden.

Das obige ist der detaillierte Inhalt vonWie spiele ich Bildsequenzen reibungslos mit CSS -Animation?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!