Kinetic JS图像分层和动画问题

Question

我正在尝试将我的多个图像层分别旋转并设置为动画。 问题是当我在其中一张图像上调用动画旋转功能时，调试器说图像没有旋转功能。 这是我所得到的

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();

Answer 1

您正在使用哪个版本的KineticJS？ 最新版本不推荐使用rotateDeg ，而只是简单地使rotate使用度数而不是弧度。

此外，要在加载图像之前创建并启动动画。 这就是为什么当您尝试旋转logoCross未定义它的原因。 将其putOnStage ，它应该可以工作。

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();
}