使用JQuery的KineticJS动画

Question

我是KineticJS的新手,我已经堆积了.我想使用一个不透明的简单动画,但我发现它看起来没那么"简单".我用KineticJS阅读了关于动画的文档(你不会对本教程说简单).我想知道的是有一个简单的方法来使用像JQuery或JCanvaScript这样的KineticJS来制作动画吗？例如

this.animate({
   opacity:0,
   x: 50
}, 500);

这样的事情？

如果没有,我们可以使用KineticJS和JQuery来制作简单的动画吗？我发现这个 项目有非常有趣的代码:

$(logo.getCanvas()).animate({
            opacity: 1,
            top: "+=50px"
        }, 1000);

所以大家你觉得怎么样？使用这种方法有问题吗？

Answer 1

如果你只需要做你的不透明度动画:你应该坚持使用JQuery,这将隐藏为动画完成的计算(以及你所指出的是一个很好的解决方案).

如果你想对动画进行更多控制:请使用KineticJS.

通过,我认为你会有更多的问题试图同时使用JQuery动画和KineticJS图层,而不是只使用KineticJS(一旦你理解了如何玩它,Kinetic.Animation非常简单)

编辑:动画的快速操作方法:

所以,正如您可能已经看到的那样,在Kinetic中,您没有像JQuery那样给出最终位置:您可以访问在动画的每个帧处调用的函数,并且所有逻辑都必须放在其中:

<script>
// you should have an object yourShape containing your KineticJS object.

var duration = 1000 ; // we set it to last 1s 
var anim = new Kinetic.Animation({
    func: function(frame) {
        if (frame.time >= duration) {
            anim.stop() ;
        } else {
            yourShape.setOpacity(frame.time / duration) ;
        }
    },
    node: layer
});

anim.start();
</script>