CSS3人行走动作图解和动画实现

对于人类而言，行走是一种很自然的想要前进并防止跌倒的一组动作重复。大部分人1岁就学会了走路，但至此以后的几十年间，或许我们从来没留意过自己行走姿势。

当我们需要用计算机来模拟人类这个最简单的动作时，通过观察和分析，我们可以把步行简化为下面这样的一个过程：

（1）中分：（也称作：contact 接触点）这是我们人为设定的一个步长过程的开始。在这个时刻，角色的两脚都接触地面。身体前倾，双臂自然摆动，每只胳膊的摆动都与相对应的腿的运动很协调，以保持平衡和推力。

（2）下降：在这个阶段，角色的两腿微曲，身体重心下降，速度变快，释放能量。后脚跟抬起。双臂自然摆动，角色的胳膊这时在最远点，然后开始向反方向摆动。

（3）上升：（也称作：pass pos经过点）在这个过程中，角色的前腿伸直，重心转移到前腿上。身体重心上升。身体前倾，有即将向前摔倒的趋势。后脚离开地面，并向前迈出。步行的时候会很自然的保留能量，所以角色的脚会尽可能的抬的很低。双臂继续摆动。

（4）高点：在这个时刻，角色的身体和重心最高，支持重心的腿伸直（即上阶段的前腿）。原先的后腿会继续向前迈出，在身体前倾即将失去平衡的一瞬间，该脚脚跟着地，身体保持平衡。当身体上升的时候，速度就会慢下来，角色正在积累势能。

（5）中分：重新回到接触点，是一步过程的结束。此时我们的脚向下滑动，脚后跟儿会先轻轻的落在地面上，使身体保持平衡不至于摔倒。当这个过程结束时，双脚着地，身体和重心再次恢复到（1）的状态，但姿势左右相反。结束的那一时刻同时也是下一步的开始，与上一步不同的是：接下来的一步会迈出另一条腿。

（6）前面的5个阶段已经完成了一次行走，图中这个最后阶段是一次新的开始，另一条腿迈步的下降阶段。

当然上面是行走过程的简化，在我们走路的时候，我们的小腿为我们提供动力，小腿用力和身体控制力的不同，也会导致行走姿势的不同。因此每个人的行走动作并不完全相同，普通人走路和模特步就存在很大的差异，在制作动画的时候需要按实际情况来调节。

我们可以使用HTML5/CSS3中的transform来制作人类行走的模拟动画，原理就是按照上面的过程分解来设定每个keyframe，

把人体分解成body、leg、hand，然后分别给定在每个动画帧中的各部位的具体位置，需要仔细调整来达到自然行走的效果。

以下是一个在线实例，你可以自己试试看：

http://wow.techbrood.com/fiddle/14294

你可以把方块替换成图片，就可以完成真人行走的模拟。