Kineticjs Animation With Jquery

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 wit

Solution 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 = newKinetic.Animation({
    func: function(frame) {
        if (frame.time >= duration) {
            anim.stop() ;
        } else {
            yourShape.setOpacity(frame.time / duration) ;
        }
    },
    node: layer
});

anim.start();
</script>