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

时间:2016-02-05 02:08:43

标签: javascript html animation createjs tween.js

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

看到一个例子

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/

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

我似乎找不到任何有关此内容的教程

有什么建议吗?

2 个答案:

答案 0 :(得分:0)

您需要为Tween.to中的第3个参数传递所需的缓动函数,如下所示:

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

答案 1 :(得分:0)

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

@ 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