使用 JQuery 进行 KineticJS 动画

我是 KineticJS 的新手，我很困惑。我想使用一个不透明的简单动画，但我发现它并不像看起来那么“简单”。我读过有关的文档使用 KineticJS 制作动画 http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-animate-position-tutorial/（本教程你不会说简单）。我想知道 有没有一种简单的方法可以像 JQuery 或 JCanvaScript 一样使用 KineticJS 制作动画？例如

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

像这样的东西？

如果没有，我们可以使用 KineticJS 和 JQuery 来使动画变得简单吗？我发现THIS http://jsfiddle.net/T9RfA/2/项目有一段非常有趣的代码：

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

那么大家觉得怎么样？使用这种方法有bug吗？

如果您只需要执行不透明动画：您应该坚持使用 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>