objective-c - 缓入缓出功能

Question

我想要一个等同于 UIViewAnimationCurveEaseInOut 的缓动函数，但没有看到 Apple 将其公开为一个函数。

我试过了 the easeInOutQuad function posted here没有成功。该函数的我的 Objective-C 版本是:

-(float) getEaseInOutValueWithElapsedMillis: (float) t startValue: (float) b endValue: (float) c andTotalMillis: (float) d {
   float   value =0.0f;

   if ((t/=d/2.0f) <1.0f)
      value =c/2.0f*t*t + b;
   else
      value =-c/2.0f * ((--t)*(t-2.0f) - 1.0f) + b;

   debug(@"t=%f b=%f c=%f d=%f value=%f", t, b, c, d, value);
   return value;
}

记录的结果是:

当开始值小于结束值时:

t=0.066467 b=110.000000 c=225.000000 d=500.000000 value=110.497017
t=0.133133 b=110.000000 c=225.000000 d=500.000000 value=111.993996
t=0.199799 b=110.000000 c=225.000000 d=500.000000 value=114.490944
...
t=0.999786 b=110.000000 c=225.000000 d=500.000000 value=222.451935
t=0.066452 b=110.000000 c=225.000000 d=500.000000 value=236.954926
t=0.133118 b=110.000000 c=225.000000 d=500.000000 value=250.457932
... (note that value shot right past c)
t=0.866440 b=110.000000 c=225.000000 d=500.000000 value=332.993195
t=0.933105 b=110.000000 c=225.000000 d=500.000000 value=334.496582
t=0.999771 b=110.000000 c=225.000000 d=500.000000 value=335.000000

100% 的值最终为 b +c，而不是 c。

当开始值大于结束值时:

t=0.047389 b=225.000000 c=110.000000 d=700.000000 value=225.123520
t=0.095008 b=225.000000 c=110.000000 d=700.000000 value=225.496460
...
t=0.904504 b=225.000000 c=110.000000 d=700.000000 value=334.498413
t=0.952122 b=225.000000 c=110.000000 d=700.000000 value=334.873932
t=0.999740 b=225.000000 c=110.000000 d=700.000000 value=335.000000

同样，100% 的值最终为 b +c，而不是 c。

也许我弄错了代码。如何实现适当的缓入缓出？

Answer 1

I'm wanting an easing function equivalent to UIViewAnimationCurveEaseInOut, but don't see that Apple exposes that as a function.

Apple 通过 [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseInEaseOut] 公开了 CAMediaTimingFunction，您可以调用 getControlPointAtIndex:values: 来获取控制点。您将了解到它是一个具有控制点 (0, 0)、(0.42, 0)、(0.58, 1)、(1, 1) 的三次方贝塞尔曲线。

这为您提供了一个贝塞尔函数 f(n)，它绘制了 value 的二维图表，沿着 y，相对于 time，沿着X。因此，要获得正确的值，只需求解 n，其中 x = time 并读取该值。

具体来说，在这个函数中:

f.x(n) = (1-n)^3 * 0 + 3(1-n)^2 * n * 0.42 + 3(1-n) * n^2 * 0.58 + n^3 * 1
       = 3(1-n)^2 * n * 0.42 + 3(1-n) * n^2 * 0.58 + n^3
       = 1.26(1 - 2n + n^2) * n + 1.74 (1 - n) * n^2 + n^3
       = 1.26n - 2.52n^2 + 1.26n^3 + 1.74n^2 - 1.74n^3 + n^3
       = 1.26n - 0.78n^2 + 0.52n^3

(免责声明:即兴写出；请检查)

要获得时间 0.5 的值，求解 n:

0.5 = 1.26n - 0.78n^2 + 0.52n^3

然后将其插入等效的 f.y(n)。 There's a formula to solve a cubic但是涉及到这个有点复杂，所以(i)阅读维基百科文章并使用公式；或者 (ii) 编写一个数值求解器，例如通过二进制搜索。这个特殊的立方体表现得非常好，每次只有一个解。