在web开发中，GIF动画效果是经常可以看到，例如普遍的loading加载、角色飞奔的gif图片这些，那么这些都是怎么达到的呢？
实际上完成的原理非常简单，简单点来说，这些所谓的动画全是一帧一帧的图片经过一段时间的间距作出偏移而来的；例如，大家在PS里边制做GIF动画，首先要把每一帧所需的图片制做出去，然后根据导出来的形式把GIF图片保存下来；相信会PS的同学，都能够熟练的制作一个最基本的GIF动画图片；在web开发中，为了实现那样的gif图片，也有许多方式；在这里给读者提供一个思路，便是利用html5 canvas完成动画效果。
利用canvas的drawImage把带有帧的图片载入到canvas中来，再结合js完成动画
<!DOCTYPE html>
<html lang=\"en\"><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>
以上方法完成的前提是，必须有一张已制作帧的图片，拥有图片才可以开展帧的动画；利用此方法可以控制动画的播放视频、中止及其帧数
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
