CODEWITHSUNDEEP
javascriptkineticjs
Josh.S
Josh.S

Reputation: 127

Kinetic JS Image layering and Animation issue

I'm trying to rotate and animate my multiple image layers seperatly ontop of each other. The problem is when I call the animate rotate function on one of the images, my debugger says the image has no function rotate. Here is what I have got

var stage = new Kinetic.Stage({
    container: 'container',
    width: 300,
    height: 300
  });
  var layer1 = new Kinetic.Layer();
  var layer2 = new Kinetic.Layer();
  var layer3 = new Kinetic.Layer();
  var layer4 = new Kinetic.Layer();

  var logo4 = new Image();
  var logo3 = new Image();
  var logo2 = new Image();
  var logo1 = new Image();

  var logoRing, logoCross, logoCentreRings, logoCentre;

  var loadCount = 0;
 logo4.onload = function() {
     loadCount ++;
     if(loadCount == 4&& !loaded){
         loaded = true;
         putOnStage();
     }
 };

 logo3.onload = function() {
     loadCount ++;
     if(loadCount == 4&& !loaded){
         loaded = true;
         putOnStage();
     }
 };

 logo2.onload = function() {
     loadCount ++;
     if(loadCount == 4&& !loaded){
         loaded = true;
         putOnStage();
     }
 };

 logo1.onload = function() {
     loadCount ++;
     if(loadCount == 4 && !loaded){
         loaded = true;
         putOnStage();
     }
 };
 var loaded = false;


  logo4.src = "logo_ring.png";
  logo3.src = "logo_cross.png";
  logo2.src = "logo_centre_rings.png";
  logo1.src = "logo_centre.png";
  var logoPosX = 0;
  var logoPosY = 0;
  var logoWidth = 300;
  var logoHeight = 300;

  function putOnStage(){


       logoRing = new Kinetic.Image({
          x: 0,
          y: 0,
          image: logo4,
          width: logoWidth,
          height: logoHeight
        });
      layer4.add(logoRing);
      stage.add(layer4);


         logoCross = new Kinetic.Image({
          x: 0,
          y: 0,
          image: logo3,
          width: logoWidth,
          height: logoHeight
        });
      layer3.add(logoCross);
      stage.add(layer3);

         logoCentreRings = new Kinetic.Image({
          x: 0,
          y: 0,
          image: logo2,
          width: logoWidth,
          height: logoHeight
        });
      layer2.add(logoCentreRings);
      stage.add(layer2);


         logoCentre = new Kinetic.Image({
          x: 0,
          y: 0,
          image: logo1,
          width: logoWidth,
          height: logoHeight
        });
      layer1.add(logoCentre);
      stage.add(layer1);
  }
    var angularSpeed = 360 / 4;
    var rotateCentreRings = new Kinetic.Animation(function(frame) {
      var angleDiff = frame.timeDiff * angularSpeed / 1000;
      logoCross.rotate(angleDiff);
    }, layer2);

    rotateCentreRings.start();

Upvotes: 1

Views: 80

Answers (1)

Greg
Greg

Reputation: 2173

Which version of KineticJS are you using? Latest version deprecated rotateDeg in favour of simply making rotate use degrees instead of radians.

Additionally, you are creating and starting the animation before the images are loaded. This is why logoCross is undefined when you try to rotate it. Move that inside of putOnStage and it should work.

function putOnStage(){


     logoRing = new Kinetic.Image({
        x: 0,
        y: 0,
        image: logo4,
        width: logoWidth,
        height: logoHeight
      });
    layer4.add(logoRing);
    stage.add(layer4);


       logoCross = new Kinetic.Image({
        x: 0,
        y: 0,
        image: logo3,
        width: logoWidth,
        height: logoHeight
      });
    layer3.add(logoCross);
    stage.add(layer3);

       logoCentreRings = new Kinetic.Image({
        x: 0,
        y: 0,
        image: logo2,
        width: logoWidth,
        height: logoHeight
      });
    layer2.add(logoCentreRings);
    stage.add(layer2);


       logoCentre = new Kinetic.Image({
        x: 0,
        y: 0,
        image: logo1,
        width: logoWidth,
        height: logoHeight
      });
    layer1.add(logoCentre);
    stage.add(layer1);
    var angularSpeed = 360 / 4;
  var rotateCentreRings = new Kinetic.Animation(function(frame) {
    var angleDiff = frame.timeDiff * angularSpeed / 1000;
    logoCross.rotate(angleDiff);
  }, layer2);

  rotateCentreRings.start();
}

Upvotes: 1

Related Questions