Heim > Artikel > Web-Frontend > So fügen Sie Bildanimationseffekte in HTML5 hinzu
So fügen Sie Bildanimationseffekte in HTML5 hinzu
- coldplay.xixiOriginal
- 2021-03-04 15:35:555849Durchsuche
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.
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 66aa3d34d47552b7b986fe2a4b5468d0 . Zusätzlich zur häufig verwendeten kubischen Bezier-Kurve gibt es auch eine verwirrende Funktion steps(). 66aa3d34d47552b7b986fe2a4b5468d0 。它的取值中除了常用到的 三次贝塞尔曲线 以外，还有个让人比较困惑的 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: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<style>
.bird{background: url(bird.png);width: 140px;height:85px;animation: bird 2s steps(8) infinite; }
@keyframes bird{
from {
background-position: 0 0;
}
to {
background-position: -800% 0px;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>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: 🎜<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas帧--实现动画</title> <style> *{padding:0;margin:0;} canvas{display:block;background:white} </style> </head> <body> <canvas></canvas> <script> var imgPic = new Image(); imgPic.src = 'http://www.cj365.cc/demo/bird/bird.png'; var canvas = document.querySelector('canvas'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var ctx = canvas.getContext('2d'); imgPic.onload = function () { drawImg() } var i = 0; var lastTime = new Date().getTime(); var delatime; var timer = 0; function drawImg() { window.requestAnimationFrame(drawImg); var now = new Date().getTime(); delatime = now - lastTime; lastTime = now; timer += delatime; if (timer > 200) { i++; if (i > 7) i = 0; timer = 0 } console.log(delatime) ctx.drawImage(imgPic, i * 140, 0, 140, 85, (canvas.width - 140) / 2, (canvas.height - 85) / 2, 140, 85); } </script> </body> </html>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!