在 Tweenjs (Createjs) 中使用 bounceOut 缓动效果更改路径

Question

我想制作一个带有圆圈的动画，它从左上角开始，向下移动到 canvas 的底部，然后弹跳到右下角。如果您无法想象我的问题，您可以在

查看示例

http://www.createjs.com/demos/tweenjs/tween_sparktable

（第三个演示）

我找到了一个使用简单的动画 div 的代码，仅此而已。它甚至很难走直线我将缓动效果更改为 bounceOut，这是代码

createjs.Tween.get(gg).to({x:400}, 1000);
createjs.Ticker.addEventListener("tick", stage);

http://jsfiddle.net/TeVZ6/

我知道我必须改变 "to" 函数中的路径，但我不知道我应该怎么做才能实现 "curving, bouncing" 路径

我似乎找不到任何关于此的教程

有什么建议吗？

Answer 1

您需要为 Tween.to 中的第三个参数传入所需的缓动函数，如下所示：

createjs.Tween.get(gg).to({x:400}, 1000, createjs.Ease.bounceOut);

Answer 2

您所描述的在 y 位置上有一个反弹缓动，在 x 位置上有一个缓动。如果你想在二维中移动，但有不同的缓动，你需要两个单独的补间。

@inverse 关于反弹缓动的回答是正确的，但是将其更改为在 y 上反弹，并在 x 上添加第二个缓动会给你带来我认为你正在寻找的效果：

createjs.Tween.get(gg).to({x:400}, 1000, createjs.Ease.quadOut);
createjs.Tween.get(gg).to({y:400}, 1000, createjs.Ease.bounceOut);

这是一个updated fiddle