I just need animate something, i need create few tween for feew difrent object, example bubbles. So i just want animate bubble per bubble, i mean start animate bubble number two when animation bubble numer one was end. I write somethink like that:
var tweens = [];
for(var i =0; i < bubbleTab.length; i++)
{
var tween = new Kinetic.Tween({
node: bubbleTab[i],
x: invisibleBubbles[i].getX(),
y: invisibleBubbles[i].getY(),
easing: Kinetic.Easings.BounceEaseOut,
onFinish: function(){
tweens[i+1].play();
},
duration: 2
});
tweens.push(tween);
}
or i just replace onFinish: function()
to playNextTween(i)
and write method
function playNextTween(i)
{
tweens[i].play();
}
But still isn't working. I don't know what i can do. I try animate tween in loop but in loop all tween execute in the same time.
Any ideas? I know about GSAP and his TweenTimeline but with KineticJS no one ease from GSAP working
Instead of using
tweens[i+1].play();
Use a variable counter to iterate through your tween array. For example:
var rects = layer.get('Rect');
var rectCount = rects.length;
var tweens = [];
var tweenCounter = 1;
for (var i = 0; i < rectCount; i++) {
var tween = new Kinetic.Tween({
node: rects[i],
duration: 1,
y: 150,
onFinish: function() {
if (tweenCounter !== rectCount) { //Prevent an undefined tween from being played at the end
tweens[tweenCounter].play();
tweenCounter++;
}
}
});
tweens.push(tween);
}
Ok thanks to @projeqht i know how do this with KineticJS but i working on it, and i have better solution with GASP. Cause with GASP i can overlap animation and much more ;) so here is the code:
//Dodawanie animacje kolejnego bombla do timeline
function addAnim(i){
tl.to(bubbleTab[i], 0.5, {kinetic:{scaleX:1, scaleY:1}}, "-=0.45");//-0.45 mean overlap
}
//Dodawanie animacji do timeline
for(var i = 0; i < bubbleTab.length; i++)
{
layer.add(bubbleTab[i])
addAnim(i);
}
tl.play()
It's simple doesn't it? But you must remeber to add kineticJS plugin :D i fo
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.