Maison >interface Web >Tutoriel H5 >Comment ajouter des effets d'animation d'image en HTML5
Comment ajouter des effets d'animation d'image en HTML5
- coldplay.xixioriginal
- 2021-03-04 15:35:555933parcourir
Comment ajouter des effets d'animation d'image en HTML5 : 1. Utilisez les étapes de l'animation CSS3 pour implémenter l'animation spirituelle ; 2. Utilisez le canevas HTML5 pour implémenter des images GIF.
L'environnement d'exploitation de ce tutoriel : système windows7, version html5&&css3, ordinateur DELL G3.
Comment ajouter des effets d'animation d'image en HTML5 :
Méthode 1 : Utilisez les étapes de l'animation CSS3 pour implémenter l'animation de sprite spirituel
Lors de l'application d'un dégradé/animation CSS3, il existe un attribut qui contrôle le temps. En plus de la courbe de Bézier cubique couramment utilisée, il existe également une fonction 66aa3d34d47552b7b986fe2a4b5468d0 déroutante dans sa valeur. steps()
Le premier numéro de paramètre est le numéro d'intervalle spécifié (doit être un entier positif), c'est-à-dire que l'animation est divisée en n étapes pour un affichage par étapes. Le deuxième paramètre est par défaut terminé, ce qui définit le. le statut de la dernière étape, le début est l'état à la fin, la fin est l'état au début. steps()
<!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>
Méthode 2 : Utiliser le canevas html5 pour implémenter des images gif ; Utilisez drawImage de Canvas pour charger des images contenant des cadres dans Canvas, puis combinez-le avec js pour implémenter une animation. Voir la démo :
<!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>Recommandations d'apprentissage associées : Tutoriel vidéo HTML.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!