CODEWITHSUNDEEP
javascriptkineticjs
Rob
Rob

Reputation: 59

kinetic.js two tweens in the same animation loop

I think there is a bug with tweens in an animation loop.

If you create two tweens in the same loop and play them only the second actually fires and works.

The first doesn't apply to the object and/or doesn't play.

I've tried separate layers, tried putting all the tweens in an array, tried putting objects in an array.

Two tweens created in the same animation loop, just don't work.

Upvotes: 0

Views: 396

Answers (1)

markE
markE

Reputation: 105035

An animation loop executes about 60 times per second unless you throttle it down.

It's important that you don't repeatedly tween.play() inside the animation loop.

You must be sure you tween.play() only once and not repeatedly 60 times per second.

Here's an example of 2 tweens started within an animation loop and then successfully playing.

Note: In the code below the boostersAway variable is used to be sure the tweens are played only once.

Demo: http://jsfiddle.net/m1erickson/E4MUz/

enter image description hereenter image description here

Code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>

<style>
body{padding:20px;}
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:350px;
  height:350px;
}
</style>        
<script>
$(function(){

    var imageURLs=[];  // put the paths to your images here
    var imagesOK=0;
    var imgs=[];
    imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/Shuttle.png");
    imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/ShuttleBoosterRed.png");
    imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/ShuttleBoosterPurple.png");
    loadAllImages(start);

    function loadAllImages(callback){
        for (var i=0; i<imageURLs.length; i++) {
            var img = new Image();
            imgs.push(img);
            img.onload = function(){ 
                imagesOK++; 
                if (imagesOK>=imageURLs.length ) {
                    callback();
                }
            };
            img.onerror=function(){alert("image load failed");} 
            img.crossOrigin="anonymous";
            img.src = imageURLs[i];
        }      
    }

    function start(){

        // the imgs[] array holds fully loaded images
        // the imgs[] are in the same order as imageURLs[]

        shuttle.setImage(imgs[0]);
        boosterLeft.setImage(imgs[1]);
        boosterRight.setImage(imgs[2]);
        layer.draw();
        animation.start();

    }


    var stage = new Kinetic.Stage({
        container: 'container',
        width: 350,
        height: 350
    });
    var layer = new Kinetic.Layer();
    stage.add(layer);


    var boosterLeft= new Kinetic.Image({
        x:stage.getWidth()/2-28,
        y:stage.getHeight()-128,
        width:16,
        height:128,
        image:null,
    });
    layer.add(boosterLeft);

    var boosterRight= new Kinetic.Image({
        x:stage.getWidth()/2+10,
        y:stage.getHeight()-128,
        width:16,
        height:128,
        image:null,
    });
    layer.add(boosterRight);

    var shuttle= new Kinetic.Image({
        x:stage.getWidth()/2-72/2,
        y:stage.getHeight()-122,
        width:72,
        height:122,
        image:null,
    });
    layer.add(shuttle);

    var boostersAway=false;

    var animation = new Kinetic.Animation(function(frame) {
    console.log(boosterLeft.getY());            

        var shuttleY=shuttle.getY();
        shuttle.setY(shuttleY-1);

        if(shuttleY>150){
            boosterLeft.setY(boosterLeft.getY()-1);
            boosterRight.setY(boosterRight.getY()-1);
        } else{
            if(!boostersAway){
                boostersAway=true;
                tweenLeft.play();
                tweenRight.play();
            }
        } 

        if(shuttleY<-122){animation.stop();}

    }, layer);

    var tweenLeft = new Kinetic.Tween({
      node: boosterLeft, 
      duration: 3,
      offsetX:100,
      offsetY: -200,
      rotation: -20*Math.PI/180,
    });

    var tweenRight = new Kinetic.Tween({
      node: boosterRight, 
      duration: 3,
      offsetX:-100,
      offsetY: -200,
      rotation: 20*Math.PI/180,
    });


}); // end $(function(){});

</script>       
</head>

<body>
    <h4>2 Tweens started+playing in an animation loop.<br>
    The red and purple boosters are separate tweens<br>
    The animation moves the main shuttle.</h4>
    <div id="container"></div>
</body>
</html>

Upvotes: 1

Related Questions