Ausgabe
Ich habe eine Folie mit vielen animierten Gifs. Jede Folie enthält ein animiertes GIF.
Der Effekt, den ich zu erreichen versuche, besteht darin, dass die animierten Gifs gemäß der Zeitachse abgespielt werden, die ich in Photoshop erstellt habe, und vom ersten bis zum letzten Bild, wenn sie angezeigt werden.
Mein Problem ist, dass die animierten GIFs in der Mitte der Timeline beginnen und nicht im ersten Frame, wenn sie aktiv und sichtbar sind. Ich denke es liegt an der Ladezeit? Ich habe versucht, die Zeit für das erste Bild und das letzte Bild jeder Folie zu verlängern, aber ohne Erfolg.
Gibt es eine Möglichkeit, die Zeit zum Laden und Abspielen der animierten GIFs zu steuern, wenn sie sichtbar sind? ist es etwas, das in Javascript oder jQuery getan werden muss?
Lösung
Aus meiner Sicht CSS Spriteswird es dir eine bessere Unterstützung geben, die du dir in deiner Animation gewünscht hast. Das Wichtigste, was Sie brauchen, ist die Kontrolle über die Animation.
Da Sie keine Kontrolle über animierte GIFs haben. Sie können sie nicht starten, Sie können sie nicht stoppen, das Einzige, was sie tun, ist, sich zu animieren, sobald sie geladen werden.
Andererseits können Sie mit Sprites die Animation steuern. Am wichtigsten ist, dass Sie Browserereignisse starten, stoppen und darauf reagieren sowie durch die Animation schwenken können.
Als Referenz können Sie sehen Google Doodles, welche nur aktiviert werden, wenn Sie nur darauf klicken.
Als aktive Referenz können Sie den Blog sehen, der Sie vielleicht dazu inspiriert, CSS-Sprites zu verwenden.
https://itnext.io/creating-css-animations-using-sprite-sheet-47e2b7a3793c
Wieder ist es nur Meinung. Die Entscheidung, welche Sie für die Animation verwenden, liegt bei Ihnen.
Beantwortet von – Abu Sufian
Antwort geprüft von – David Marino (FixError Volunteer)
