使用JQuery实现KineticJS动画

Question

我是KineticJS的新手，我是新手。我想使用不透明的简单动画，但我发现并没有看起来那么“简单”。我读过关于animations with KineticJS的文档(您不会说本教程很简单)。我想知道的是，有没有像JQuery或JCanvaScript那样用KineticJS制作动画的简单方法？例如

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

像这样的东西？

如果没有，我们可以在JQuery中使用KineticJS来简化动画吗？我发现了一个THIS项目，里面有一段非常有趣的代码：

$(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>