Flip image at end of curve kinetic js

Question

I am following How to animate object on curve path in Kineticjs for animate object in curve in kinetic js. but I want to rotate image when end of curve is reached I tried by .rotate() in jquery but it disturbs the curved path animation

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

Thanks in advance

Answer 1

I find an easy solution instead of rotating image I tried by replacing with its mirror image at ends of curve and its working for me

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