Ease of use

Question

I want the easing function to be equivalent to UIViewAnimationCurveEaseInOut, but I don't see that Apple provides this as a function.

I tried the easeInOutQuad function posted here without success. My version of Objective-C of this function:

-(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=%fb=%fc=%fd=%f value=%f", t, b, c, d, value); return value; } 

And recorded results:

When the initial value is less than the final 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 

And 100% of the value ends as b + c, not c.

When the initial value is greater than the final value:

 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 

Again, a 100% value ends as b + c, not c.

Perhaps I distorted the code. How can I achieve the correct ease of use?

Answer 1

A little late, but here it is, quickly.

Run it as shown on the playgrounds:

 import UIKit var sValue: CGFloat = 0 var eValue: CGFloat = 100 var tDuration: CGFloat = 100 var eTime: CGFloat = 0 var currentValue: CGFloat = 0 func easeInOutQuad (percentComplete: CGFloat, elapsedTimeMs: CGFloat, startValue: CGFloat, endValue: CGFloat, totalDuration: CGFloat) -> CGFloat { var newElapsedTimeMs = elapsedTimeMs newElapsedTimeMs /= totalDuration/2 if newElapsedTimeMs < 1 { return endValue/2*newElapsedTimeMs*newElapsedTimeMs + startValue } newElapsedTimeMs = newElapsedTimeMs - 1 return -endValue/2 * ((newElapsedTimeMs)*(newElapsedTimeMs-2) - 1) + startValue } for i in eTime...tDuration { currentValue = easeInOutQuad(0, CGFloat(i), sValue, eValue, tDuration) } 

Answer 2

I want the easing function to be equivalent to UIViewAnimationCurveEaseInOut, but I don’t see that Apple is revealing this as a function.

Apple provides a CAMediaTimingFunction via [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseInEaseOut] , which you can call getControlPointAtIndex:values: to get breakpoints. You will find out that this is cubic bezier with control points (0, 0), (0.42, 0), (0.58, 1), (1, 1).

This gives you the Bezier function f(n) , which displays as a 2d value chart along y, versus time , along x. Therefore, to get the correct value, just solve for n where x = time and read the value.

In particular, in this function:

 fx(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 

(disclaimer: not issued immediately, please check)

To get the value at time 0.5, solve for n in:

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

Then connect it to the equivalent of fy(n) . There is a formula for solving cubic , but getting into it is slightly related, therefore (i) read the Wikipedia article and use the formula; or (ii) write a numerical solver, for example. by binary search. This particular cube behaves very well, having only one solution at a time.