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
你可以把方块替换成图片,就可以完成真人行走的模拟。
最新评论
- 相关文章
CentOS6 Apache2.2用域名配置多虚拟机
在CentOS下使用域名配置多虚拟机的步骤如下:
1. 使用Blender2.7给平面模型添加纹理贴图
在blender中给模型添加纹理,需要有2个步骤:首先在对象属性栏中给该对象添加材料和纹理建立纹理映射添加材料和纹理这是常见操作,略过步骤。但是仅仅这样操作,...
NodeJS、Java和PHP性能考量和若干参考结论
首先需要说明的是,严格而言NodeJS和Java、PHP并非对等概念,NodeJS是基于JS的一个应用程序,而Java/PHP是语言。我们这里实际指的是分别使用node、java和php来实...
通过实例深入理解HTML5/CSS3/SVG/WebGL的技术本质
Three.js 对象局部坐标转换为世界坐标
在Three.js中进行顶点几何计算时,一个需要注意的地方是,需要统一坐标系。比如你通过Three.js提供的API创建了一个球体网孔对象,那么默认情况下,各网孔顶点的...
WebVR简介和常用资源链接
什么是WebVR这是一个实验性的JavaScript API,提供了在用户网页浏览器中访问虚拟现实设备的统一接口。当前主流VR设备如Oculus Rift DK2、谷歌的CardBoard、三星...
Three.js入门教程4 - 创建粒子系统动画
嗨,又见面了。这么说我们已经开始学习Three.js了,如果你还没有看过之前三篇教程,建议你先读完。如果你已经读完前面的教程了,你可能会想做一些关于粒子的东西。让我们直面这个话题吧,每个人都爱粒子效果。不管你是否知道,你可以很轻易地创建它们。
如何使用WebGL实现空气高温热变形动画特效
我们在炎炎夏日,或者在火堆旁,经常会观察到热源周围空气的不稳定波动现象。本文将讲解如何通过WebGL来实现这个特效。该效果可用于热变形、波浪、水面波光等场...
如何实现SVG clipPath自适应被裁剪对象
CSS3中引入的clip-path(裁剪路径)属性是一个很强大的特性。
clip-path的含义如下图所示,好比剪纸一样,你用剪刀沿着某条路径把目标对象(图像或元素)裁...IE各版本CSS Hack(兼容性处理)语法速查表
为了兼容IE各个版本,需要在CSS中添加额外的代码,比如以前常用的_width。之所以工作,是因为浏览器会忽略不能解析的样式规则,因此举个例子来说,把_width写在w...
jQuery Ribbles - 基于WebGL的水面涟漪动效插件
使用jQuery
inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移
在表单修改界面中常会使用一个标签、一个内容加一个修改按钮来组成单行界面,如图1所示。那么在表单总长度受限的情况下,当中间的邮箱名称过长时,会遮盖到旁边...
使用纯CSS3实现一个3D旋转的书本
有一些前沿的电商网站已经开始使用3D模型来展示商品并支持在线定制,而其中图书的展示是最为简单的一种,无需复杂的建模过程,使用图片和CSS3的一些变换即可实现...
在PHP网页程序中执行Sass/Compass命令
我们需要在wow云开发平台支持sass/compass等预编译样式语言,为此我们首先尝试了scssphp扩展,但是在支持最新语法上,经常会出现异常。所以我们采用了代理的方式...
更多...