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 ![:slight_smile: :slight_smile:](//community.openfl.org/images/emoji/twitter/slight_smile.png?v=5)
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: :slight_smile:](//community.openfl.org/images/emoji/twitter/slight_smile.png?v=5)
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… ![:wink: :wink:](//community.openfl.org/images/emoji/twitter/wink.png?v=5)