带有 JQuery 的 KineticJS 动画

Question

我是 KineticJS 的新手，而且我很累。我想使用一个不透明的简单动画，但我发现并没有看起来那么“简单”。我阅读了有关animations with KineticJS 的文档（您不会对本教程说简单）。我想知道的有没有一种简单的方法可以用 KineticJS 像 JQuery 或 JCanvaScript 那样制作动画？例如

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>