Home > Article > Web Front-end > How to add image animation effects in html5
How to add image animation effects in html5: 1. Use the steps of css3 animation to implement spirit animation; 2. Use html5 canvas to implement gif images.
The operating environment of this tutorial: windows7 system, html5&&css3 version, DELL G3 computer.
html5 Method to add image animation effects:
Method 1: Use the steps of css3 animation to implement spirit sprite animation;
When applying CSS3 gradient/animation, there is an attribute that controls the time66aa3d34d47552b7b986fe2a4b5468d0. In addition to the commonly used cubic Bezier curve, there is also a confusing steps() function.
steps() The first parameter number is the specified interval number (must be a positive integer), that is, the animation is divided into n steps for staged display. The second parameter defaults to end. Set the status of the last step, start is the status at the end, and end is the status at the beginning.
With this steps(), we can implement the common sprite animation in the web. See demo:
<!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>Method 2: Use html5 canvas to implement gif images;
Use canvas's drawImage to load images containing frames into canvas, and then combine them with js to implement animation. See 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>Related learning recommendations: html video tutorial
The above is the detailed content of How to add image animation effects in html5. For more information, please follow other related articles on the PHP Chinese website!