微商加人方法和技巧,h5动画效果怎么做，h5常见动画效果实现原理

虚拟资源中心 • 2020年6月21日 03:55 • 网友投稿 • 阅读 252

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