在Tweenjs（Createjs）中使用bounceOut缓动效果更改路径(Change path with bounceOut ease effect in Tweenjs (Createjs))

在Tweenjs（Createjs）中使用bounceOut缓动效果更改路径(Change path with bounceOut ease effect in Tweenjs (Createjs))

我想制作一个带有圆圈的动画，它从左上角开始，然后向下到画布的底部并弹到右下角。 如果你无法想象我的问题，你可以看一个例子

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

（第三个演示）

我发现了一个使用easy动画div的代码，但就是这样。 它直线甚至艰难我改变轻松效果bounceOut，这是代码

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

http://jsfiddle.net/TeVZ6/

我知道我必须改变“到”功能的路径，但我不知道我该怎么做以实现“弯曲，弹跳”的路径

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

有什么建议吗？

I would like to make an animation with a circle where it cames from top left, and going down to the bottom of canvas and bouncing to the right bottom. If you can't imagine my question, you can see an example at

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

(third demo)

I found a code that animated a div using ease, but that's it. It goes to straight line even tough i change the ease effect to bounceOut, here is the code

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

http://jsfiddle.net/TeVZ6/

i know that i have to change the path in "to" function, but I don't know what should I do to achieve "curving, bouncing" path

I can't seem to find any tutorial regarding this

Any suggestion?

最满意答案

你所描述的在y位置上有一个弹跳缓和，在x位置上有一个缓和。 如果要在2维中移动，但具有不同的缓动，则需要两个单独的补间。

@ inverse的答案对于弹跳缓解是正确的，但是将它改为反弹，而在x上添加第二个缓动将给你我认为你正在寻找的效果：

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

这是一个更新的小提琴

What you are describing has a bounce-out ease on the y-position, and an ease-out on the x-position. If you want to move in 2 dimensions, but have different eases, you need two separate tweens.

@inverse's answer is correct about the bounce ease, but changing it to bounce on they y instead, and adding a second ease on the x will give you the effect I think you are looking for:

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

Here is an updated fiddle