h5动画效果怎么做，h5常见动画效果实现原理

在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>

以上方法实现的前提是，需要有一张已绘制帧的图片，有了图片才可进行帧的动画；利用该方法可以控制动画的播放、暂停以及帧率

点击展开全文

h5动画效果怎么做，h5常见动画效果实现原理

相关推荐

2019新版网站运营策划方案（3天IP破万的推广方式）

90%的成功企业都在用这样的商业模式！

2019微信公众号吸粉的方法（学点皮毛一天轻松加5000粉丝）

产品运营最好的三大法宝（学会一招用一生）

2019年小县城冷门暴利生意（投资不大但非常赚钱）

2019最实用的推广引流方法（学会了每天固定IP不低于一万）

发表评论