如何将Greensock的CustomEase函数转换为可在CreateJS的Tween系统中使用？

Question

I'm currently working on a project that does not include GSAP (Greensock's JS Tweening library), but since it's super easy to create your own Custom Easing functions with it's visual editor - I was wondering if there is a way to break down the desired ease-function so that it can be reused in a CreateJS Tween?

Example:

var myEase = CustomEase.create("myCustomEase", [
    {s:0,cp:0.413,e:0.672},{s:0.672,cp:0.931,e:1.036},
    {s:1.036,cp:1.141,e:1.036},{s:1.036,cp:0.931,e:0.984},
    {s:0.984,cp:1.03699,e:1.004},{s:1.004,cp:0.971,e:0.988},
    {s:0.988,cp:1.00499,e:1}
]);

So that it turns it into something like:

var myEase = function(t, b, c, d) {
    //Some magic algorithm performed on the 7 bezier/control points above...
}

( Here is what the graph would look like for this particular easing method. )

Answer 1

I took the time to port and optimize the original GSAP-based CustomEase class... but due to license restrictions / legal matters ( basically a grizzly bear that I do not want to poke with a stick... ), posting the ported code would violate it.

However, it's fair for my own use. Therefore, I believe it's only fair that I guide you and point you to the resources that made it possible.

The original code (not directly compatible with CreateJS) can be found here: https://github.com/art0rz/gsap-customease/blob/master/CustomEase.js ( looks like the author was also asked to take down the repo on github - sorry if the rest of this post makes no sense at all! )

Note that CreateJS's easing methods only takes a "time ratio" value (not time, start, end, duration like GSAP's easing method does). That time ratio is really all you need, given it goes from 0.0 (your start value) to 1.0 (your end value).

With a little bit of effort, you can discard those parameters from the ease() method and trim down the final returned expression.

Optimizations:

I took a few extra steps to optimize the above code.

1) In the constructor, you can store the segments.length value directly as this.length in a property of the CustomEase instance to cut down a bit on the amount of accessors / property lookups in the ease() method (where qty is set).

2) There's a few redundant calculations done per Segments that can be eliminated in the ease() method. For instance, the s.cp - ss and se - ss operations can be precalculated and stored in a couple of properties in each Segments (in its constructor).

3) Finally, I'm not sure why it was designed this way, but you can unwrap the function() {...}(); that are returning the constructors for each classes. Perhaps it was used to trap the scope of some variables, but I don't see why it couldn't have wrapped the entire thing instead of encapsulating each one separately.

Need more info? Leave a comment!