I have just finished a bezier timing algorithm, and I’ll give a small description here.

I will be using the bezier values a linear stepping value in a loop… layman’s terms: a counter that counts up evenly, 0,1,2,3 or 0,2,4,6, etc.

There are methods to do this in the iPhone SDK but I already wrote half of the code, and it wasn’t much effort to complete. Plus, I looked up the CAMediaTimingFunction class, and it seemed too complicated just for what I wanted (just an in-and-out structure).

So all I did is this: create a 100-element array.

.. and it gets a bit complicated, so here’s the code to build the array:

float t; int i; CGPoint bpoints[1000]; CGPoint bypoints[100]; for (i = 0; i < 1000; i++) { t = i / 1000.0f; bpoints[i].x = (1-t)*(1-t)*(1-t)* 0 + 3*(1-t)*(1-t)*t*0.5 + 3*(1-t)*t*t* 0.5 + t*t*t*1.0; bpoints[i].y = (1-t)*(1-t)*(1-t)* 0 + 3*(1-t)*(1-t)*t*0.05 + 3*(1-t)*t*t* 0.95 + t*t*t*1.0; } for ( transitionTimeStep =0; transitionTimeStep < 100; transitionTimeStep++) { float closest = 1.1; int closestI = -1; // Find the index in bpoints where .x is the closest to the transitionTimestep percent for (int x = 0; x < 1000; x++) { if ( fabs( bpoints[x].x - ( transitionTimeStep /100.0f)) < closest) { closest = fabs( bpoints[x].x - ( transitionTimeStep /100.0f)); closestI = x; } } bypoints[transitionTimeStep] = bpoints[closestI].y; }

The first loop creates a high-resolution set of points on a quadratic bezier curve (see Wikipedia’s page for Bezier curves) where the 4 points are between 0.0 and 1.0. The points (0,1,2,3) have the following x,y coordinates:

- 0,0
- 0.5, 0.05
- 0.5, 0.95
- 1.0, 1.0

If a person even multiplied these values by 100 and then used a program like Adobe Illustrator, the curve would look something vaguely like a capitol letter S. Rather, it’s actually more like a forward-slash / and little curves at the top and bottom .

So I collect the high-resolution points of the line, and then loop through my time-step array. For every element in the time-step array, I examine every x-coordinate value of the bpoints array. If the value is closest to the current time-step index value, then I save the bpoints array y-coordinate value.

Yes, this seems very complicated now, but when I was doing it, it seemed very easy. I guess sometimes I just get on a roll and create complicated stuff.

Also, I know there are better ways to do this, but I only want a look-up table and when I see it in live operation before typing this post, it works beautifully.

An important note! The bpoint array is VERY important. It is not good to simply create an exact-resolution array and fill it with values. I did that at first, and found that there were too many indexes being dropped, that when the timing animation was run, there was a lot of choppy movement, like if the smooth slope of the curve was suddenly turned into a staircase of jagged edges.

So, creating the higher-resolution array first and then scanning it for the closest x value was the logical solution. Perhaps I could have done it with a 200 element array, but I didn’t try it.

The process only takes a split-second, and it’s only done once at the beginning of the program.

That’s all, take care everyone.