【问题标题】:Ease Out Cubic - Function Arguments ExplanationEase Out Cubic - 函数参数解释
【发布时间】:2012-04-16 09:53:22
【问题描述】:

在这个很棒的web page 上,我发现了一个缓动算法列表,可以为我的网页添加漂亮的视觉吸引力。

尽管我发现那里简要提到了函数参数(见下文),但该算法的行为并不如我所愿。能否请我解释一下应该在下面提到的函数的参数中输入哪些值/范围?

参数列表:

  • t: 当前时间 - 这里应该是值 0...1,还是当前帧的实数?
  • b: 起始值 - 我假设,被移动对象的起始 X 或 Y 坐标
  • c:值的变化 - 这里可以一直是所有帧的第 1 位吗?
  • d: duration - 总共的帧数?

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

应该将这些值递增地添加到从函数获得的最后一个值,还是应该将它们添加到初始 0 位置?

【问题讨论】:

标签: javascript algorithm math animation


【解决方案1】:

你说得对,d 是持续时间,t 是当前时间。因此,t 应该是从0d

c 是一个总变化,应该等于end value - start value

  • 对于t = 0,我们有c*(-1 + 1) + bb
  • 对于t = d,我们有c*(0 + 1) + bb + c

任何 fps 的功能都是相同的,取决于您多久更新一次位置和调用该函数。

【讨论】:

  • +1,您好,感谢您的回复。当我回到家时,我会尝试使用新信息的公式。 b(start value) 也可以是负数吗? 比如说,如果我想将对象从屏幕移出,即从 -50y 到 250y。我不确定这个公式是否也能以这种方式工作。
  • 是的。仅当您将 t 从 0 更改为某个负值时,它才会按照预期的方式工作。
  • 我可以确认,在正确理解函数参数之后,二维对象的行为就像它们真正应该轻松实现的那样。因此,我将您的答案确定为已接受的答案
猜你喜欢
  • 2019-05-18
  • 2014-06-01
  • 2014-08-13
  • 2012-03-11
  • 1970-01-01
  • 1970-01-01
  • 2017-04-07
  • 2012-08-25
  • 2020-07-22
相关资源
最近更新 更多