KineticJS animation with JQuery

Question

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

something like this?

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?

Answer 1

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

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

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 :

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>