尽管该站点包含了它们的用途描述,但它却使我感到头疼。什么是缓动函数?它们的作用是什么?
更新资料
我从Phaser.io的源代码中找到了一个更好的函数示例。这些功能比这里建议的答案要简单得多。它们仅采用一个参数k
。作为答案的一部分,我想知道如何使用它们。
尽管该站点包含了它们的用途描述,但它却使我感到头疼。什么是缓动函数?它们的作用是什么?
我从Phaser.io的源代码中找到了一个更好的函数示例。这些功能比这里建议的答案要简单得多。它们仅采用一个参数k
。作为答案的一部分,我想知道如何使用它们。
Answers:
缓动功能通常(但非必须)用于动画/运动运动中的插值。您可能听说过线性插值(lerp)。假设您将一个笑脸从屏幕的一个角落拖到另一个角落(根据您的图像)。这意味着笑脸将以稳定的速度从A点移动到B点。如果将其应用于肢体运动,它看起来会非常机器人化且不自然-机器人使用的执行器/伺服器会以这种方式执行。显然,人的肢体以非常不同的方式运动。自然界中看到的大多数运动将具有有趣的运动曲线,而不是线性插值中看到的稳定不变的速度。
输入宽松。缓动意味着速度不是恒定的。这实现的是看起来更加现实。看着人,看着不同的动物,看着风中的植物,甚至在阵风的日子里降雨也将改变方向。当您将球抛向空中并再次降下时,请观察球的速度。弹拨时观看吉他弦的运动。这些运动中的每一种都有描述速度的不同曲线。
我建议您在线使用GreenSock的GSAP,以了解不同类型的缓动曲线在运动方面会产生什么。将特定的命名曲线映射到您想要的那种运动是需要花费时间和练习的事情之一。但是,一旦掌握了基础知识,就会有很多乐趣。
PS正如我所说,缓动不仅用于动画。它可以用于声音平移,在逻辑/模型级别实现骨骼运动,或者您可以想到的其他任何可能需要随时间进行特定平滑变化的功能。
缓动函数使您可以使用称为“缓动函数”的东西在给定的时间间隔内将一个值插入另一个值。这些函数旨在获取值,并在间隔中的任何给定点上,在特定时间点输出值。
可以通过看一下代码片段来最好地解释一下:
// 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),可以在没有任何物理系统的情况下在子画面上产生这样的效果:
您可以通过搜索补间在网上找到更多信息。
k
作为参数的函数,我将接受此答案。谢谢
k
我带走了。否则,您在哪里看到?
缓动功能用于在一段时间内从起始编号更改为结束编号的值。
您可以使用该值为游戏中对象的属性设置动画,例如位置,旋转,比例,更改颜色以及使用该值的其他属性。
不同的缓动功能确定动画的“感觉”,或者确定值如何随时间变化。
在您发布的网站上,该图显示了值从开始到结束随时间变化的情况,因此这并不意味着您要设置动画的对象将遵循图中的球的路径。