Javascript 如何在TweenJS中实现弹道缓和效果

也许是一个简单的例子，我正在沿着一条弯曲的路径设置动画，并希望在二人组的前半部分应用一个缓和的轮廓，然后在后半部分应用缓和的轮廓。那么一个快-慢-快的轮廓，就像一个球被抛到了空中，如果这有意义的话

清单中列出的宽松选项包含一些与我所寻找的几乎相反的选项；比如cubicInOut。使用前面的（糟糕的）描述，这将是缓慢的

当然，我可以通过使用不同的缓和方法来链接两个对象来实现这一点，但这看起来并不干净，并且在顶部有一个暂停，这需要为这个应用程序解决

一个例子显示了cubicInOut在顶部，并使用cubicOut链接了tweens，然后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();
}

用这个例子

只是想知道是否有一种更干净的方法来实现这一点，而不需要在曲线的顶点处进行链接，也不需要暂停？一个宽松的等式似乎是最简单的，但我不确定如何实现它。如有任何想法，将不胜感激

非常感谢,

BAP.

文件中说：

Ease类提供了一组用于的easing函数 特温斯。它不使用标准的4参数签名。 相反，它使用单个参数来指示当前线性参数 吐温的比率（0:1）

在GitHub上的问题/文章的指导下，有一种方法可以定义自定义函数。只需继续创建您的，而不是将其转换为线性

您将获得这种贝塞尔函数：

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

---

在

上查看，这几乎就是我想要的。生成函数的一个很好的小工具。谢谢skobaljic！