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
你可以把方块替换成图片,就可以完成真人行走的模拟。
最新评论
- 相关文章
ARCore基本概念和工作原理简介
谷歌的WebAROnARCore项目基于Android手机提供的ARCore增强现实引擎,要了解WebAROnARCore,需要先了解ARCore的工作原理。基本上ARCore做了两件事,首先跟踪手机...
html5跨平台实战-第一周-水平测验-新闻列表页面
这是一个DIV+CSS布局页面的一个实例,主要介绍POSITION定位、导航UL LI的制作、利用浮动原理对页面分栏、分列的页面布局。新闻页面的效果图
CentOS6 Apache2.2用域名配置多虚拟机
在CentOS下使用域名配置多虚拟机的步骤如下:
1. 使用如何使用BabylonJS加载OBJ或STL模型
BabylonJS(也就是babylon.js,这是一个和three.js类似的WebGL开发框架),更多的用在游戏领域。
本文说明和演示如何使用babylon.js来加载一个标准3d模型文...创建非矩形网页页面元素的常用技术和实例代码
非矩形设计正在变成一种时尚,比如波浪形、菱形、三角形等:而随着技术发展,这种设计在技术实现上也变得更容易。本文以最简单的三角形为例,演示使用5种方法来...
WebGL、Asm.js和WebAssembly概念简介
随着HTML技术的发展,网页要解决的问题已经远不止是简单的文本信息,而包括了更多的高性能图像处理和3D渲染方面。这正是要引入WebGL、Asm.js和WebAssembly这些技...
React JSX语法简介
JSX是一种类似XML的标签语法,用来简化代码,我们可以不使用JSX,但了解并使用也没什么坏处:)在React中,JSX是一个使用 React.createElement() API的快捷方式...
JavaScript事件模型图解
在JavaScript中用户交互的核心部分就是事件处理。本文为对事件模型和处理机制的总体性描述。Event是什么?
event是用户操作网页时发生的交互动作,比如clic...前端开发框架技术选型:Angular2 VS React VS jQuery
Angular和React是主流的2个前端开发框架,但是严格来说两者并非对等的概念。Angular是一个基于MVC(或者MVVM)的框架,包含model(模型)/view(视图)/controll...
通过实例深入理解HTML5/CSS3/SVG/WebGL的技术本质
jQuery Ribbles - 基于WebGL的水面涟漪动效插件
使用jQuery
D3.js读取外部json数据
D3.js是一个很好的数据可视化工具,支持从web服务读取json数据,或者从外部文件如.json, .csv文件中直接读取。由于部分服务比如flickrs上的图文数据服务需要VPN...
Three.js 3D打印数据模型文件(.STL)加载
3D打印是当下和未来10年产品技术主流方向之一,影响深远。对于电子商务类的3D打印网站,一个主要功能是把商品以3D的方式呈现出来,也就是3D数据可视化技术。HTML...
如何使用CSS3实现书页(书本)卷角效果
我们有时候想在页面显示一个公告或用户提示信息。一个常用设计是使用书签形状。我们可以给书签添加卷角效果,以使其更为逼真。所谓的“卷角”实际上可以用小角度...
SVG过滤器feColorMatrix矩阵变换效果用法详解
在计算机图形学(数学)中,矩阵乘法可用于把空间向量进行几何变换。我们可以把颜色的值(RGBA)表示成一个四维空间向量:color = (r, g, b, a);那么就可以应用...
更多...