Question

我跟踪How to animate object on curve path in Kineticjs动态js曲线中的动画对象。但我希望在达到曲线结束时旋转图像我在jquery中尝试使用.rotate（），但它扰乱了曲线路径动画

// create animation along quadratic curve
var animation = new Kinetic.Animation(function (frame) {
if (T==150) {
  var pos = getQuadraticBezierXYatT(110, qControl, 85, T/150);
  pos.x += boneOffset.x;
  pos.y += boneOffset.y;
  bone.setPosition(pos);

}else{
  var pos = getQuadraticBezierXYatT(qStart, qControl, qEnd, T / 150);
  pos.x += boneOffset.x;
  pos.y += boneOffset.y;
  bone.setPosition(pos);
};

  T += TDirection;
  if (T < 0 || T > 150) {
      TDirection *= -1;
      T += TDirection
      bone.rotate(180)
  }

}, layer);

提前致谢

Answer 1

我找到了一个简单的解决方案，而不是旋转图像我尝试通过在曲线的末端替换它的镜像并为我工作

 // load 2 images
     var loaded = 0;
     var boneImg = new Image();
     boneImg.onload = function () {
    loaded++;
    if (loaded == 2) {
        start();
    }
   }
  boneImg.src = "<%=asset_path 'flight-orange.png'%>";
  // create Kinetic.Images
  function start() {
  var pos = getQuadraticBezierXYatT(qStart, qControl, qEnd, 0.00);
  bone = new Kinetic.Image({
      x: pos.x + boneOffset.x,
      y: pos.y + boneOffset.y,
      id: 'bone',
      image: boneImg,
      width: boneImg.width * boneScale,
      height: boneImg.height * boneScale,
  });
  layer.add(bone);
  dog = new Kinetic.Image({
      x: 30,
      y: 15,
      image: dogImg,
      width: 300,
      height: 90
  });
  layer.add(dog);
  layer.draw();

  animation.start();
 }
 var imageObj = new Image({id: 'bone'});
 imageObj.src = "<%=asset_path 'mirror_flight.png'%>";
   var flight = new Image({id: 'flight'});
  flight.src = "<%=asset_path 'flight.png'%>";
  // create animation along quadratic curve
  var animation = new Kinetic.Animation(function (frame) {

  var pos = getQuadraticBezierXYatT(qStart, qControl, qEnd, T / 150);
  pos.x += boneOffset.x;
  pos.y += boneOffset.y;
  bone.setPosition(pos);

  T += TDirection;
  if (T < 0 || T > 150) {
      TDirection *= -1;
      T += TDirection
      if (T==150) {
        layer.get('#bone')[0].setImage(imageObj);
      } else if(T==0){
        layer.get('#bone')[0].setImage(flight);
      };
  }

  }, layer);

在曲线动力学结束时翻转图像

1 个答案: