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

techbrood 发表于 2017-01-15 22:59:39

标签: css3, walk, animation

- +

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

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

walk_cycle.jpg

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

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

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

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

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

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

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

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

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

以下是一个在线实例,你可以自己试试看:

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

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

possitive(1) views13934 comments0

发送私信

最新评论

请先 登录 再评论.
相关文章
  • 微信公众号在线生成二维码带参数怎么搞?

    带参数二维码是微信公众号渠道二维码的一种实现
    微信的带参数二维码有两种,一种是临时二维码,一种是永久二维码,但是永久二维码的生成是有个数限制的,微...

  • 2019年NodeJS框架Koa和Express选型比较

    Koa和Express都是NodeJS的主流应用开发框架。
    Express是一个完整的nodejs应用框架。Koa是由Express团队开发的,但是它有不同的关注点。Koa致力于核心中间件...

  • 创建非矩形网页页面元素的常用技术和实例代码

    非矩形设计正在变成一种时尚,比如波浪形、菱形、三角形等:而随着技术发展,这种设计在技术实现上也变得更容易。本文以最简单的三角形为例,演示使用5种方法来...

  • 使用CSS3 box-decoration-break特性实现多行文本样式

    当文章中的长文本被自动断行为多行文本时,其样式可能会出乎我们的设计。本文介绍如何使用CSS3中的box-decoration-break特性来处理多行元素样式。
    按照规范...

  • HTML5、Hybrid APP、Native APP对比和技术选型

    HTML5和Native APP都很容易理解。为了获得HTML5的移植性和移动本地应用的高性能,搞出来一些混合APP的解决方案。比如Apache的Cordova(也就是以前的PhoneGap),...

  • Three.js入门教程4 - 创建粒子系统动画

    嗨,又见面了。这么说我们已经开始学习Three.js了,如果你还没有看过之前三篇教程,建议你先读完。如果你已经读完前面的教程了,你可能会想做一些关于粒子的东西。让我们直面这个话题吧,每个人都爱粒子效果。不管你是否知道,你可以很轻易地创建它们。

  • Three.js入门教程1 - 基础知识和创建一个红色球体

    [ TECHBROOD注:Three.js是一个主流的开源WebGL库,WebGL允许使用JavaScript直接操作GPU,在网页上实现3D效果。
    Google的工程师Paul在网站aerotwist.com上...

  • HTML网页布局:静态、自适应、流式、响应式

    静态布局(Static Layout)即传统Web设计,对于PC设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分;对于移动设备,单独设计一个布...

  • Processing.js和P5.js的功能简介和区别

    什么是ProcessingProcessing是关于数字艺术的编程语言,支持跨平台,语言本身是一个类Java语言,程序文件的后缀为.pde。
    什么是Processing.js为了能让Proce...

  • div 、section 、article的区别和使用场景

    div 、section 、article的区别和使用场景
    主要区别,以及适用场合如下:
    1、div在html早期版本就支持了,section和article是html5提出的两个雨衣话标...

  • 如何使用CSS3/SCSS实现逼真的车窗雨滴效果

    在天气预报类的Web移动应用中,常常需要实现屏幕的雨滴效果,表示阴雨天气。感觉上比较神奇,其实想通了,这个效果的实现只需要一点物理知识和CSS3的简单变换。实现一个小雨滴首先雨滴是一个个小的椭圆形元素:.raindrop

  • 更多...