什么是缓动功能?


15

我找到了这个很酷的游戏开发网站,并且提供了一系列轻松功能:

在此处输入图片说明

尽管该站点包含了它们的用途描述,但它却使我感到头疼。什么是缓动函数?它们的作用是什么?

更新资料

我从Phaser.io的源代码中找到了一个更好的函数示例。这些功能比这里建议的答案要简单得多。它们仅采用一个参数k。作为答案的一部分,我想知道如何使用它们。


2
一个重要的相关术语是补间。另请参见此视频youtube.com/watch?v=Fy0aCDmgnxg,在其中您可以看到补间和缓动功能的影响是多么巨大!
Roy T.

Answers:


13

缓动功能通常(但非必须)用于动画/运动运动中的插值。您可能听说过线性插值(lerp)。假设您将一个笑脸从屏幕的一个角落拖到另一个角落(根据您的图像)。这意味着笑脸将以稳定的速度从A点移动到B点。如果将其应用于肢体运动,它看起来会非常机器人化且不自然-机器人使用的执行器/伺服器会以这种方式执行。显然,人的肢体以非常不同的方式运动。自然界中看到的大多数运动将具有有趣的运动曲线,而不是线性插值中看到的稳定不变的速度。

输入宽松。缓动意味着速度不是恒定的。这实现的是看起来更加现实。看着人,看着不同的动物,看着风中的植物,甚至在阵风的日子里降雨也将改变方向。当您将球抛向空中并再次降下时,请观察球的速度。弹拨时观看吉他弦的运动。这些运动中的每一种都有描述速度的不同曲线。

我建议您在线使用GreenSock的GSAP,以了解不同类型的缓动曲线在运动方面会产生什么。将特定的命名曲线映射到您想要的那种运动是需要花费时间和练习的事情之一。但是,一旦掌握了基础知识,就会有很多乐趣。

PS正如我所说,缓动不仅用于动画。它可以用于声音平移,在逻辑/模型级别实现骨骼运动,或者您可以想到的其他任何可能需要随时间进行特定平滑变化的功能。


1
btw缓动是GreenSock链接中的第二张幻灯片。使用幻灯片上的下拉菜单测试不同的缓动功能。
轰动2014年

8

缓动函数使您可以使用称为“缓动函数”的东西在给定的时间间隔内将一个值插入另一个值。这些函数旨在获取值,并在间隔中的任何给定点上,在特定时间点输出值。

可以通过看一下代码片段来最好地解释一下:

// simple linear tweening - no easing, no acceleration


Math.linearTween = function (t, b, c, d) {
    return c*t/d + b;
};

@t是补间的当前时间(或位置)。可以是秒或帧,步长,秒,毫秒等,只要是与总时间相同的单位

@b是属性的起始值。

@c是属性的开始值和目标值之间的更改。

@d是补间的总时间。

谢谢,http://upshots.org/actionscript/jsas-understanding-easing

这是线性缓动函数的定义。随时间以“ t”表示,我们得到的只是线性图。

好的,很酷。我们可以用它们做什么?

任何时候只要有开始和结束的想法并想为其设置动画,就可以使用“补间”或“缓动功能”。

例如,这是我刚拍摄的《愤怒的小鸟》的GIF:

在此处输入图片说明

注意菜单滑到屏幕上的某个点,但它停止得很慢吗?这是由于缓动功能可以轻松实现。您可以在网上看到所有内容。如果这是线性缓和,则整个过程都是相同的。

音乐?

当然!如果我们获取当前音轨值的值,并在例如1秒钟的总t内将其插值在0与0之间,则我们的音量将在1秒钟内逐渐消失。

边界物体

还有一些允许弹跳的功能(请参阅:http : //easings.net/#easeOutBounce),可以在没有任何物理系统的情况下在子画面上产生这样的效果:

在此处输入图片说明

您可以通过搜索补间在网上找到更多信息。


@tieTYT我为您添加了解释。您在寻找什么样的用法示例?
沃恩·希茨

查看我的更新。如果您可以解释如何使用仅k作为参数的函数,我将接受此答案。谢谢
Daniel Kaplan 2014年

这些函数不仅取k。开始的函数使用这些函数,然后将其传递给更复杂的函数。您只是对相位器的实施感兴趣吗?
沃恩·希茨

看来他们都把k我带走了。否则,您在哪里看到?
Daniel Kaplan

所有缓动功能(也许“摇动”风格的补间除外)至少需要三个参数。时间(通常为0与1之间的比率),起始值和终止值。有时,时间会分为两个参数,例如当前时间和缓解时间。如果已经定义了开始和结束值(取决于缓动系统/库),则可能只需要打发时间,但是我自己都不熟悉。例如,如果我希望以75%的方式在10到30之间的值(3秒转换为4秒的时间),则需要传递10和30以及75%的时间(时间/持续时间)。
Doug.McFarlane 2014年

2

缓动功能用于在一段时间内从起始编号更改为结束编号的值。

您可以使用该值为游戏中对象的属性设置动画,例如位置,旋转,比例,更改颜色以及使用该值的其他属性。

不同的缓动功能确定动画的“感觉”,或者确定值如何随时间变化。

在您发布的网站上,该图显示了值从开始到结束随时间变化的情况,因此这并不意味着您要设置动画的对象将遵循图中的球的路径。


哦,所以现在您更改了答案以反映我的意思!很高兴看到您正在学习。
工程师

这个答案似乎更像是参考而非指南。我需要一些例子来更好地理解
Daniel Kaplan 2014年

@NickWiggill不,直到现在我都没有看到你的答案。
2014年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.