javascript - TweenJS中如何实现弹道缓动效果

Question

也许是一个简单的问题，我正在沿着弯曲的路径制作动画，并希望应用一个缓动配置文件，该缓动配置文件在补间的前半部分缓出，在后半部分缓入。那么快-慢-快的轮廓，就像一个球被扔到空中一样，这是否有意义？

TweenJS Spark Table 中列出的缓动选项包含一些与我正在寻找的内容几乎相反的内容；例如，像cubicInOut。使用之前的(糟糕的)描述，这将是慢-快-慢。

我当然可以通过使用不同的缓动链接补间来实现此目的，但这看起来不太干净，并且顶部有一个暂停，需要为此应用程序解决。

一个示例，显示顶部的cubicInOut，以及使用cubicOut的链接补间，然后使用底部的cubicIn来实现接近我想要的效果。

var stage = new createjs.Stage("canvas");
createjs.Ticker.addEventListener("tick", tick);
createjs.MotionGuidePlugin.install();

var shape1 = new createjs.Shape();
shape1.graphics.f("#000000").dc(0,0,10);

var shape2 = shape1.clone();

var path1 = new createjs.Shape();
path1.graphics.beginStroke("#ff0000").mt(0,100).qt(200,0,400,100);

var path2 = path1.clone();
path2.y = 100;
stage.addChild(path1, path2, shape1, shape2);

createjs.Tween.get(shape1).to({guide:{ path:[0,100, 200,0, 400,100] }},2000, createjs.Ease.cubicInOut);

createjs.Tween.get(shape2).to({guide:{ path:[0,200, 100,150, 200,150] }},1000, createjs.Ease.cubicOut).call(function(){
    createjs.Tween.get(shape2).to({guide:{ path:[200,150, 300,150, 400,200] }},1000, createjs.Ease.cubicIn);
});

function tick(event) {
    stage.update();
}

Fiddle以这个例子为例。

只是想知道是否有一种更简洁的方法来实现此目的，而不需要链接补间，并且无需在曲线顶点处暂停？宽松方程似乎是最简单的，但我不确定如何实现它。任何想法将不胜感激。

非常感谢，

巴普斯。

Answer 1

TweenJS API文档说:

The Ease class provides a collection of easing functions for use with TweenJS. It does not use the standard 4 param easing signature. Instead it uses a single param which indicates the current linear ratio (0 to 1) of the tween.

指导Custom Easing Functions GitHub 上的问题/文章，有一种方法可以定义自定义函数。继续创建您的 Bezier easing function ，然后将其转换为线性。

你会得到这样的贝塞尔函数:

function(t:Number, b:Number, c:Number, d:Number):Number {
    var ts:Number=(t/=d)*t;
    var tc:Number=ts*t;
    return b+c*(0.699999999999999*tc*ts + -1.75*ts*ts + 3.9*tc + -4.1*ts + 2.25*t);
}

你的 TweenJS 缓动将是:

var myEasing = function( k ) {
    var t = (k*100);
    var d = 100;
    var ts=(t/=d)*t;
    var tc=ts*t;
    return (0.699999999999999*tc*ts + -1.75*ts*ts + 3.9*tc + -4.1*ts + 2.25*t);
};

在您的代码中，您将这样使用它:

createjs.Tween.get(shape2).to({guide:{ path:[0,200, 200,100, 400,200] }},2000, myEasing);

查看updated Fiddle 。