oh!在这停顿!【高阶动画】

2016. 07. 10

一直在想我有什么可以取悦自己,又能取悦其他人的输出,并且还可以保持较高的更新频率。

回归初心,既然把自己定位为游戏人,那么输出游戏就好了,但是游戏是什么,这一直是很难定义的概念。而对于目前的我而言,“web”可能是更容易让人愿意瞅一眼的关键词,所以考虑了一会,决定新开个频道,讲解高阶的动画形式,不过每一篇都讲的很少,一来适应现在主流的快餐阅读形式,另外也可以保持较高的更新频率。

这次先从打击感开始。

停顿在动画中的应用,相当于空白在布局设计中一样重要。

拳皇

【打击感】

简单来说就是角色在受到外力后产生的一段“停顿时间”。而这段“停顿时间”将决定这个外力的“力度”。

将上面这个gif进行分解:

拳皇

一共13帧

拳皇

起手攻击

拳皇

硬直产生

拳皇

拳皇

拳皇

拳皇

硬直结束

拳皇

拳皇

打击开始

拳皇

打击停顿

拳皇

停顿结束

拳皇

拳皇

拳皇

试试把停顿部分去掉,看看效果:

拳皇

为了对比,将加入打击停顿的gif放在一起

拳皇

【力度】是不是很不一样?

不过仅仅加入停顿就能让动画产生打击感吗?

不是

实际效果顶多就像这样

无停顿

拳皇

停顿

拳皇

​ 这个是用web写的简单示例,gif截图是以0.1s为时间进行截屏,效果比web代码实际运行结果要糟糕一些,不过也没差。

可以直接去示例页查看效果

demo

打击感并不是只是停顿,所以下篇会继续分析打击感。

新开两个栏目,这个是高阶动画解析,另一个是游戏回忆录,为了更新频率以及现在的快餐阅读文化,每篇的内容都会尽可能少说一点-__,-。

动画游戏 web前端