多种⽅法实现H5⽹页图⽚动画效果；
在web开发中，GIF动画效果是随处可见，⽐如常见的loading加载、⼈物奔跑的gif图⽚等等，那么这些都是怎么实现的呢？其实实现的原理很简单，简⽽⾔之，这些所谓的动画都是⼀帧⼀帧的图⽚经过⼀段时间的间隔做出位移⽽来的；譬如，我们在PS⾥⾯制作GIF动画，⾸先要把每⼀帧所需要的图⽚制作出来，然后再通过导出的⽅式把GIF图⽚保存下来；相信会PS的同学，都可以熟练的制作⼀个基本的GIF动画图⽚；在web开发中，要实现这样的gif图⽚，也有很多⽅法；
⽅法⼀：利⽤css3 animation的steps实现spirit精灵动画；
在应⽤ CSS3 渐变/动画时，有个控制时间的属性 <timing-function> 。它的取值中除了常⽤到的以外，还有个让⼈⽐较困惑的 steps() 函数。
steps() 第⼀个参数 number 为指定的间隔数（必须是正整数），即把动画分为 n 步阶段性展⽰，第⼆个参数默认为 end，设置最后⼀步的状态，start 为结束时的状态，end 为开始时的状态。
那么有了这个steps()，我们就可以实现web中常见的Sprite 精灵动画了，见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 class="bird"></div>
</body>
</html>
⽅法⼆：利⽤html5 canvas实现gif图⽚；
利⽤canvas的drawImage把含有帧的图⽚加载到canvas中去，再结合js实现动画，见demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas帧--实现动画</title>
<style>
*{padding:0;margin:0;}
canvas{display:block;background:white}
</style>
canvas动画</head>
<body>
<canvas></canvas>
<script>
var imgPic = new Image();
imgPic.src = '/demo/bird/bird.png';
var canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctx = Context('2d');
drawImg()
}
var i = 0;
var lastTime = new Date().getTime();
var delatime;
var timer = 0;
function 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>
以上两种⽅法实现的前提是，需要有⼀张已绘制帧的图⽚，有了图⽚才可进⾏帧的动画；两种⽅法相对⽐，⽅法⼀很明显更加的简单，⽅法⼆略显复杂！利⽤⽅法⼆可以控制动画的播放、暂停以及帧率；有兴趣的可以尝试下！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。