使用JQuery的KineticJS动画

Question

我是KineticJS的新手，我很忙。 我想使用具有不透明度的简单动画，但是我发现似乎没有那么“简单”。 我阅读了有关KineticJS动画的文档（关于本教程，您不会说得那么简单）。 我想知道什么有一种简单的方法可以使KineticJS像JQuery或JCanvaScript一样对事物进行动画处理？ 例如

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>