使用JQuery的KineticJS动画 [英] KineticJS animation with JQuery

问题描述

我是KineticJS的新手，我已经堆叠了。我想使用一个不透明的简单动画，但我发现它看起来没那么简单。我阅读了有关使用KineticJS的动画的文档（您不会简单地说这个教程）。我想知道有没有一个简单的方法来使用像JQuery或JCanvaScript这样的KineticJS来制作动画？例如

I am new in KineticJS and I am stacked. I want to use a simple animation with opacity but I found out that there is not so "simple" as it seems. I read the doc about animations with KineticJS (you won't say simple about this tutorial). What I want to know Is there a simple method to animate things with KineticJS like JQuery or JCanvaScript has? for example

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

是这样的？

如果有的话是不是我们可以使用KineticJS和JQuery来制作简单的动画？我发现这个项目有一段非常有趣的代码：

If there is not can we use KineticJS with JQuery to make animations simple? I found out THIS project that has very interesting piece of code:

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

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

so guys what do you think? Is it buggy to use this method?

推荐答案

如果你只需要做不透明动画：你应该坚持使用JQuery隐藏为动画完成的计算（以及你指出的是一个很好的解决方案）。

If you just have to do your opacity animation : you should stick to JQuery which will hide the computations done for the animation (and what you were pointed to is a good solution).

如果你想要更多控制你的动画：使用KineticJS。

If you want more controls over your animation : go with KineticJS.

通过，我认为你会有更多的问题试图同时使用JQuery动画和KineticJS图层，而不是只使用KineticJS（而Kinetic.Animation很简单一次你已经明白了如何玩它了）

Through, I think you will have more issues trying to use JQuery animations and KineticJS layers at the same time rather than using only KineticJS (and Kinetic.Animation is pretty simple once you have understand how to play with it)

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

edit: Quick How-To for animations :

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

So, as you may have seen, in Kinetic, you do not give the final position like in JQuery : you have an access to a function which is called at each frame of the animation and all the logic have to be placed in it :

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

这篇关于使用JQuery的KineticJS动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！