Take the 2-minute tour ×

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?

share|improve this question
A cubic bezier curve is not defined by four numbers, but rather four points (unless [0,0] and [1,1] are implied) –  Jan Dvorak Jan 22 '13 at 17:56
It is defined by two points, which I have given as [x1, y1] and [x2, y2]. [0,0] and [1,1] as you have pointed out are implied. –  Gajus Kuizinas Jan 22 '13 at 17:58
So, you want the inverse for a cubic function defined by four points? –  Jan Dvorak Jan 22 '13 at 17:58
@JanDvorak It sounds like it. –  Gajus Kuizinas Jan 22 '13 at 17:59
Finding the cubic's coefficients from the keys should be easy. To find a zero of a cubic function, you can use an exact formula or Newton's iterative algorithm. –  Jan Dvorak Jan 22 '13 at 18:03

1 Answer 1

up vote 1 down vote accepted

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.

share|improve this answer

Your Answer


