cubic-bezier, how to get x for y?

Question

My cubic-bezier function is defined by [0.1,0.8,0.2,1] where [x1,y1,x2,y2] .

I am rotating element 720deg in a duration of 1200ms. How to calculate t for every 60 degrees? ie., I need to trigger JavaScript event when the object has turned 60, 120, 180, 240, 300, 360, 420, 480, 540, 600, 660, 720 degrees.

If I am not mistaken, I need to get every x value where y is (60/720), (60/720)*2, (60/720)*3, (60/720)*4, (60/720)*5, (60/720)*6, (60/720)*7, (60/720)*8, (60/720)*9, (60/720)*10, (60/720)*11, (60/720)*12 and then multiply x*duration (1200ms).

I've looked at the http://blog.greweb.fr/2012/02/bezier-curve-based-easing-functions-from-concept-to-implementation/ as well as https://github.com/arian/cubic-bezier implementations.

If everything so far is correct, how do I get the x value for y?

Answer 1

First of all, what you have is not Bezier spline, but an easing curve : the special case of cubic Bezier spline with starting point in (0.0,0.0) and ending point (1.0,1.0) used to produce animations.

Then your animation will look better, if you use equal time intervals rather than equal angle rotation intervals. t is essentially a time parameter, so the curve is given by

y(t) = 3*(1-t)^2*t*y1 + 3*(1-t)*t^2*y2 + t^3.

where t belongs to interval [0.0,1.0] .

Then the actual angle will be

α(t) = 720 * y(T/1200)
     = 720 * (2.4*(1-T/1200)^2*(T/1200) + 3*(1-T/1200)*(T/1200)^2 + (/1200)^3)

where T is time in milliseconds.