# Custom cubic bezier easing with Actuate

Me again.

I’d like to ease a tween with my own bezier curve, like this one for instance:
http://cubic-bezier.com/#.37,-0.53,.4,1.3

I’m a bit too dim to work out how to translate a normal abcd bezier curve to the Actuate IEasing way of things, ie:

``````function calculate (k:Float):Float;
function ease (t:Float, b:Float, c:Float, d:Float):Float;
``````

But it would be ideal if you didn’t need an easing class at all, and had something like:

`Actuate.tween(...).easeBezier(0.37, -0.53, 0.4, 1.3)`

That would be fantastic, but I’ve had a look in the source files and turned up empty, and I don’t now how to implement it myself.

I know you’ve got 6 children and a life to live, Josh, but helping me right now is far more important, frankly.

Actuate has a `MotionPath` class to help with this You may be able to use something like:

``````var path = new MotionPath ();
path.bezier (37, -53, 40, 130);

Actuate.motionPath (sprite, 1, { x: path.x, y: path.y });
``````

… then you should be able to use an easing for animating over your motion path. You can chain multiple bezier or line segments in your path as well I’m aware of MotionPath but unless I’m mistaken it’s function is quite different to what I want.
I specifically want to tween a set of property values with a cubic bezier definition functioning as the ease, so for instance:

Actuate.tween(object, 1.0, {x: 100}).easeBezier(0.37, -0.53, 0.4, 1.3)

The object would move from left to right, but according to the time curve of a bezier.

So:

Actuate.tween(object, 1.0, {x: 100}).easeBezier(0, 0, 1, 1)

Would quite pointlessly do no easing at all, because the bezier I defined has no curve. The object would just move linearly.

It’s not a path that I want to curve, but the easing motion itself.

you just have to define a new class that implements IEasing but takes the arguments you want in is constructor. No?

Something like:

``````MyBezier implements IEasing {

private var _a:Float;
private var _b:Float;
private var _c:Float;
private var _d:Float;

public function new (a:Float, b:Float, c:Float, d:Float) {
_a = a;
_b = b;
_c = c;
_d = d;
}

function calculate (k:Float):Float
{
compute it according to your bezier curve parameters _a, _b, _c and _d
....
}

function ease (t:Float, b:Float, c:Float, d:Float):Float
{
compute it according to your bezier curve parameters _a, _b, _c and _d
........
}
}
``````

And then use it with:
`Actuate.tween(object, 1.0, {x: 100}).ease(new MyBezier(0.37, -0.53, 0.4, 1.3))`

for your information, parametters of the two functions are:
k = the easing progress, or how far along the duration of the tween we are. Allowed values are in the range [0, 1].
t = the current time of the tween.
b = the beginning value of the property.
c = the change between the beginning and destination value of the property.
d = the total time of the tween.

I am not sure Actuate actually use the ease(t, a, b, c) function anywhere though. So only making the correct compute(k) function for your MyBezier class might just work… 