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

Question

我目前正在开发一个不包含 GSAP（Greensock 的 JS Tweening 库）的项目，但是由于使用它的可视化编辑器创建您自己的自定义缓动函数非常容易 - 我想知道是否有办法分解所需的缓动函数，以便它可以在 CreateJS Tween 中重复使用？

示例：

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}
]);

所以它变成了这样的东西：

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

(这是此特定缓动方法的图形。)

Answer 1

我花时间移植和优化了原来基于 GSAP 的 CustomEase class...但是由于许可限制/法律问题（基本上是一只灰熊我不想用棍子戳...)，post移植代码会违反它。

不过，这对我自己的使用来说是公平的。因此，我相信我指导您并向您指出使之成为可能的资源是公平的。

原始代码（不直接兼容CreateJS）可以在这里找到： ~~https://github.com/art0rz/gsap-customease/blob/master/CustomEase.js~~（ 看起来作者也被要求在 github 上删除 repo - 对不起，如果剩下的 post 完全没有意义！)

请注意，CreateJS 的缓动方法仅采用 "time ratio" 值（不像 GSAP 的缓动方法那样 time, start, end, duration）。这个时间比率真的是你所需要的，因为它从 0.0（你的起始值）到 1.0（你的最终值）。

稍加努力，您可以从 ease() 方法和 trim 最终返回的表达式中丢弃这些参数。

优化：

我采取了一些额外的步骤来优化上面的代码。

1) 在构造函数中，您可以将 segments.length 值直接存储为 CustomEase 实例的属性中的 this.length 以减少访问器的数量 / 属性在 ease() 方法中查找（其中设置了 qty）。

2) 每个 Segments 都有一些冗余计算可以在 ease() 方法中消除。例如，s.cp - s.s 和 s.e - s.s 操作可以预先计算并存储在每个 Segments 的几个属性中（在其构造函数中）。

3) 最后，我不确定为什么要这样设计，但是您可以打开 function() {...}(); 的包装，它为每个 classes 返回构造函数。也许它用于捕获某些变量的范围，但我不明白为什么它不能包装整个变量而不是单独封装每个变量。

需要更多信息？发表评论！

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

How to convert Greensock's CustomEase functions to be usable in CreateJS's Tween system?

createjs

tween

easing

gsap

easing-functions