CODEWITHSUNDEEP
javascriptmath
Gajus
Gajus

Reputation: 73968

cubic-bezier, how to get x for y?

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?

Upvotes: 2

Views: 1103

Answers (1)

divanov
divanov

Reputation: 6339

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.

Upvotes: 1

Related Questions