So fügen Sie Bildanimationseffekte in HTML5 hinzu-H5-Tutorial-php.cn

So fügen Sie Bildanimationseffekte in HTML5 hinzu: 1. Verwenden Sie die Schritte der CSS3-Animation, um Spirit-Animationen zu implementieren. 2. Verwenden Sie HTML5-Canvas, um GIF-Bilder zu implementieren.

So fügen Sie Bildanimationseffekte in HTML5 hinzu

Die Betriebsumgebung dieses Tutorials: Windows7-System, HTML5- und CSS3-Version, DELL G3-Computer.

So fügen Sie Bildanimationseffekte in HTML5 hinzu:

Methode 1: Verwenden Sie die Schritte der CSS3-Animation, um eine Spirit-Sprite-Animation zu implementieren.

Beim Anwenden von CSS3-Verläufen/-Animationen gibt es ein Attribut, das die Zeit steuert . Zusätzlich zur häufig verwendeten kubischen Bezier-Kurve gibt es auch eine verwirrende Funktionsteps().。它的取值中除了常用到的三次贝塞尔曲线以外，还有个让人比较困惑的steps()函数。

steps()

steps()Die erste Parameternummer ist die angegebene Intervallnummer (muss eine positive ganze Zahl sein), d. h. die Animation ist für die stufenweise Anzeige in n Schritte unterteilt. Der zweite Parameter ist standardmäßig auf „Ende“ eingestellt. Dies legt den letzten Schrittzustand fest, start ist der Zustand am Ende und end ist der Zustand am Anfang.

Mit diesen Schritten () können wir die übliche Sprite-Animation im Web implementieren:

Nach dem Login kopieren

Methode 2: Verwenden Sie HTML5 Canvas, um GIF-Bilder zu implementieren.

Verwenden Sie das drawImage von Canvas, um Frames zu konvertieren, die das Bild enthalten in Canvas und kombinieren Sie es dann mit js, um Animationen zu implementieren. Siehe Demo:

    canvas帧--实现动画

Nach dem Login kopieren

Verwandte Lernempfehlungen:HTML-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo fügen Sie Bildanimationseffekte in HTML5 hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!