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
你可以把方块替换成图片,就可以完成真人行走的模拟。
最新评论
- 相关文章
OpenGL/WebGL顶点坐标变换过程简介
世界坐标是按照笛卡尔坐标系定义出来的绝对坐标系,下面的各种坐标系都建立在世界坐标的基础上。对象坐标系对象被应用于任何...
增强现实引擎ARToolKit工作原理简介
ARToolkit是一个基于CV(计算机视觉)和Marker(标识)的开源增强现实引擎。其具备如下功能特性:A. 鲁棒跟踪,包括基于标记的跟踪与基于特征的跟踪;
HTML5 And Canvas 2D Specs Are Now Feature Complete, First HTML 5.1 Working Draft Published
We’ve been writing about HTML5 for quite a while, but, until today, the actual HTML5 specs and standards were still moving targets. Now, however, the...
常见面试题JS语言中四种函数调用方式实例讲解
JS的语言世界中函数(function)是一等公民,函数的调用有多种方法。普通调用这个是最常见和直接的方式:function
Web界面编程状态变化和JS开发框架(React/Angular/Ember)
UI编程中的一个关键课题就是界面组件化(可复用)以及组件状态管理。稍早一些的windows程序员可能接触过MFC,其界面编程中有一个DDX(DoDataExchange)的机制,...
CSS3弹性布局内容对齐(justify-content)属性使用详解
内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐。该操作发生在弹性长度以及自动边距被确定后。 它用来在存...
如何使用CSS3合成模式(blend-mode)和滤镜(filter)实现彩色蜡笔(时光机)照片特效
在之前的文章中我们已经详细讲解过CSS3滤镜(filter,也可称之为过滤器)的工作方式,本文将实现一个当下流行的时光机相片特效实例来说明其实际用途。
我们...Three.js 对象局部坐标转换为世界坐标
在Three.js中进行顶点几何计算时,一个需要注意的地方是,需要统一坐标系。比如你通过Three.js提供的API创建了一个球体网孔对象,那么默认情况下,各网孔顶点的...
三维向量的简单运算和实用意义
在WebGL的实际应用中我们广泛使用向量的几何运算来计算角度、距离,判断点线、点面之间的关系,比如物体之间的碰撞检测。本文简要介绍三维计算机图形学中常用的...
WebVR简介和常用资源链接
什么是WebVR这是一个实验性的JavaScript API,提供了在用户网页浏览器中访问虚拟现实设备的统一接口。当前主流VR设备如Oculus Rift DK2、谷歌的CardBoard、三星...
CSS3图片混合(Blend)效果及其参考计算公式一览表
在Photoshop软件中,混合是将两个图层的色彩值进行合成,从而创造出大量的效果。在这些效果的背后实际是一些简单的数学公式在起作用。下面所介绍的公式仅适用于R...
如何实现SVG clipPath自适应被裁剪对象
CSS3中引入的clip-path(裁剪路径)属性是一个很强大的特性。
clip-path的含义如下图所示,好比剪纸一样,你用剪刀沿着某条路径把目标对象(图像或元素)裁...HTML网页布局:静态、自适应、流式、响应式
静态布局(Static Layout)即传统Web设计,对于PC设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分;对于移动设备,单独设计一个布...
如何使用CSS3实现一个平滑的3D文本标题
要实现3D文本,基本上有3种方法:1. 使用CSS3的投影滤镜(filter: drop-shadow)2. 使用3d建模和CSS3 3d变换来实现(最真实)3. 使用CSS3 text-shadow属性来实现...
如何使用CSS3实现书页(书本)卷角效果
我们有时候想在页面显示一个公告或用户提示信息。一个常用设计是使用书签形状。我们可以给书签添加卷角效果,以使其更为逼真。所谓的“卷角”实际上可以用小角度...
更多...