Custom cubic bezier easing with Actuate

#1

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.

#2

Actuate has a MotionPath class to help with this :slight_smile:

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 :slight_smile:

#3

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.

#4

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… :wink: