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

iefreer 发表于 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(0) negative(0) views6043 comments0
私信 收藏 分享
分享到

发送私信

最新评论

请先 登录 再评论.
相关文章
  • 3D场景中多相机拍摄的原理和意义

    一般而言,3D场景的渲染只需要一个相机,不过借助多相机可以获取一些单相机无法达到的特效。比如突显特定对象并模糊背景。
    3D相机渲染的基本原理是依靠颜色...

  • html5跨平台实战-第一周-水平测验-新闻列表页面

    这是一个DIV+CSS布局页面的一个实例,主要介绍POSITION定位、导航UL LI的制作、利用浮动原理对页面分栏、分列的页面布局。新闻页面的效果图

  • 踏得网精选2016年度10大最佳HTML5动画

    踏得网精选2016年度最酷最新的HTML5动画集,评选标准为:创意新颖度+实现技术难度+趣味程度。使用一些在线H5生成工具的作品,因其主要使用图片和CSS3套路动画,...

  • WebAssembly工作原理和JavaScript语言性能对比分析

    本文简单说明WebAssembly(简称wasm)工作原理和高性能的原由(和JavaScript相比)。不过需要提醒的是Wasm并非设计来完全替代JS,而是对JS的一个强大补充,JS中...

  • JavaScript语言多编程范式简介

    和C++等语言类似,JS支持多范式(paradigms)编程。我们常常混合这些范式来完成一些大型Web项目。JS支持3种编程范式:命令式、面向对象和函数式。命令式(Imperative JavaScript)命令式就是简单的从上而下完成任务,流水账过程式编码风格:function

  • 使用HTML5 Canvas实现的界面元素截屏功能

    如果网站出现问题,常常需要截图来提交反馈,这个功能很实用。使用HTML5的Canvas可以实现这个目标。我们首先引入

  • Three.js入门教程5 - 10个必须知道的编程技巧

    作者为Google的Paul,关于如何写出好的WebGL代码的文章。和很多开发者一样,我通过实践学习,但同时我也向其他更有经验的开发者们学习。在过去的几个月中,我在c...

  • WebGL入门教程1 - 3D绘图基础知识

    现代浏览器努力使得Web用户体验更为丰富,而WebGL正处于这样的技术生态系统的中心位置。其应用范围覆盖在线游戏、大数据可视化、计算机辅助设计、虚拟现实以及数...

  • 更多...