header_v0.7.2

常用运动曲线及缓动

136天前发布

原创文章 / 多领域 / 观点
意派 原创,如需商业用途或转载请与意派联系,谢谢配合。

图文并茂地介绍,读后对如何选用Epub360动画效果也许不再困惑。

3aad58c78da6a801219c77131d19.jpg


经常有派友问,Epub360编辑器里的动画效果是什么意思,说实话,那么长一串还全是英文,确实让人一头雾水。那么看了下面这篇常用的运动曲线及缓动介绍,我们也许不再困惑。


Epub360编辑器动画效果截图


注:以下内容摘自 heyu:《动效设计基础(一):运动曲线与缓动》


为什么要动效?


动效是元素的位移、姿态、大小和可见度等随时间的变化。这里我们以位移为例来学习下动效。为什么需要动效呢?比如这里,我希望让方块到右边的位置上,如果没有动效,我可以把它“传送”过去,就像这样:  



显然,这样的技术在现实生活中是不存在的(也许有一天能实现),所以看起来会很不自然。这就需要有一个运动的过程,动效设计就是在设计这个过程:



这样就好多了。但这样的动效该如何表达呢?做过开发的同学都知道,可以用公式,绝大部分的动效用牛顿运动方程都是可以表达的。当然运动方程也可以做成图表,这里我们就用图表的方式来表达运动,这就是运动曲线。最常用的曲线是“位移 – 时间”曲线:横轴表示时间,纵轴表示在一个方向上的位移。(出于简化考虑,这里我们只考虑在一个维度上的运动,在三维空间中的运动可以分解成单个维度)。 


以下内容摘自 大熊:《如何让你的动画更自然——运动曲线探究与应用》


世界上是有很多大神的,他们已经研究出一系列常用的动画曲线了,如下图所示。




对此做一下简单的介绍:


* In和Out:大多数In曲线是从慢到快,可以结合汽车开始跑起来的场景来理解;大多数Out曲线是从快到慢,可以结合汽车慢慢停下来的场景来理解。通常元素飞入时用Out动画,飞出时用In动画,而元素切换时可以用inOut动画(如banner里的图片切换)。如果细心留意一下,你会发现其实Out曲线就是In曲线从右到左运动的轨迹,他们是中心对称的。


* Quad : x^2,是一条二次方曲线

* Cubic : x^3,是一条三次方曲线

* Quart : x^4,是一条四次方曲线

* Quint: x^5,是一条五次方曲线

* Sine :sin(x^(pi/2))

* Expo:2^(10(x-1)),是一个开始非常慢,中后期非常快的曲线

* Circ:顾名思义就是弧(1/4圆,如果选择了InOut就是两个外切的1/4圆)

* Bounce:这是个模拟小球落地的反弹曲线

* elastic:这是个模拟弹簧运动的曲线,就是我们前面研究想得出的曲线


这么多曲线,可能大家一看就晕了。我个人理解,用得比较多的应该是其中的几个:


1.Quad – x^2:这条二次方曲线,就是匀变速直线运动曲线,大家应该还记得初中背得滚瓜烂熟的s=0.5 * a * t²吧。


缓动-减速运动(Ease out)


有了匀变速运动曲线,很多现实中的运动都可以模拟了,如匀加速运动、摩擦力匀减速运动。如果再组合使用曲线,就能模拟出更多运动了,例如y轴使用二次曲线,x轴使用线性曲线,就模拟出一个平抛动画了。


缓动-加速运动(Ease in)


2. Cubic – x^3:这是条三次方曲线,大家还记得初中物理哪儿用到这条曲线吗?。。。。对了,就是变加速直线运动。


3.elastic曲线:这个就是前面在研究的弹簧曲线。实现了和ios的spring动画相似的效果。



4.Bounce曲线:模拟小球落地效果的曲线。




除此以外,通过用sin曲线设置物体的透明度,可以实现呼吸灯效果。



以下内容来自小派:


怎么样?对于动效构思和在Epub360里选用何种动画有一定概念了吧!另,对于大多数动效,直接用Epub360里内置动效就可以轻松解决!:)



最后留个小作业:Epub360动画和动效有什么区别呢?


2

    文章信息

    意见反馈
    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功