Geek asks and answers

Kinetic animation with jQuery

I am new to KineticJS and I am folded. I want to use a simple animation with opacity, but I found out that it is not as simple as it seems. I read a document on animations with KineticJS (you don't just talk about this tutorial). What I want to know Is there an easy way to animate things using KineticJS like JQuery or JCanvaScript? eg

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

something like that?

If we can not use KineticJS with jQuery to make the animation simple? I found out THIS project , which has a very interesting piece of code:

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

So guys, what do you think? Is it wrong to use this method?

+5
source share
1 answer

: JQuery, , ( , , ).

: KineticJS.

, , , JQuery KineticJS , KineticJS ( Kinetic.Animation , , )

edit: Quick How-To :

, , 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>
+5

More articles:


All Articles