先看下效果，然后再说如何实现，最终效果如下：
我们知道动画其实是不同的图片循环替换，造成视觉上图片在动。
我们制作这个动画的素材如下：
从右至左，就是一个人的行走的所有动作，抬腿，迈步,脚落下，另一只脚迈步，然后循环如此。
我们将图中的五个动作图截出来，循环播放，效果就如下：
可以看出，这是一个原地踏步的动作，如果给图片加上位移，就是行走的效果。
这里讲一个知识点:Css spirit。
我们刚刚已经讲了，动画是5个动作的合成，应该有5张图片，现在我们将5张图片放在一张图片里，需要时截取图片的部分，就可以获取所需实际图片了。
这么做的原因是：
在实际的web应用中，页面上可能有上百张甚至好几百张图片，如果每张图片都是单独的，就需要建立几百个http连接，每个连接的建立都需要耗费一定时间，几个个连接的时间浪费是非常大的。我们可以把多张图片合成到一张大的图片中，然后通过CSS中的背景定位等技术，把背景定位到实际的图片位置，就可以得到所需图片了（canvas也可以利用这种思想）。这样可以节省大量的连接建立时间。是前端优化的一部分。
当然，现在我们使用各种工具构建前端工程，打包时会将很多小图标直接转成BASE64编码。
(例如，webpack, 使用url-loader插件，设置limit，打包时，将所有小于limit的图片进行BASE64编码)。
源码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>walk</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<canvas width="500" height="400" id="canvas" style="margin-top: 200px;">
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
