如何在 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 issue/article on GitHub, there is a way to define your custom function. Just go on and create your 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上查看。

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

How to acheive ballistic easing effect in TweenJS

javascript

easeljs

createjs

easing