Geek asks and answers

Javascript points to point angle calculation

We got 3 points: start , end and mail .

description

The email image moves in a curved line from the start and end points, this is done using jQuery animation.

Now the next step is to make the mail image rotate during the animation. Thus, at the start and end point, it will rotate 0 degrees, but during animation, it should rotate, referring to the animation path. (see image)

What I tried:

Jsfiddle

// Init dom elements
var $start = $('#start');
var $end = $('#end');
var $mail = $('#mail');

// Get position coordinates
var startPos = $start.position();
var endPos = $end.Position();

// Angle calculation
var getAngle = function(currX, currY, endX, endY) {
  var angle = Math.atan2(currX - endX, currY - endY) * (180 / Math.PI);

  if (angle < 0) {
    angle = Math.abs(angle);
  } else {
    angle = 360 - angle;
  }

  return angle;
};

// Mail angle
var getMailAngle = function() {
  var currPos = $mail.position();
  var endPos = $end.position();
  return getAngle(currPos.left, currPos.top, endPos.left, endPos.top);
};

// Animate
$mail.animate({top: endPos.top, left: endPos.left}, {
  specialEasing: {left: "easeInSine", top: "linear"},

  // Executed each "animation" frame, so we rotate here.
  step: function() {
    var angle = getMailAngle();
    $(this).css('transform', 'rotate(' + angle + 'deg'));
  }
});

But the code above is incorrect, when starting / ending the angle is not turned up, I have very little experience in geometry mathematics, so I really appreciate the help for rotating calculations.

+5
1

-, , "". , swing, easeInOutQuad easeInOutSine - .

, ( ). , "" , . , .

, JSFiddle.

// Init dom elements
var $start = $('#start');
var $end = $('#end');
var $mail = $('#mail');

// Get position coordinates
var startPos = $start.offset();
var endPos = $end.offset();

// Angle calculation
var getAngle = function(currX, currY, endX, endY) {
  var angle = Math.atan2(currX - endX, currY - endY) * (180 / Math.PI);

  if (angle < 0) {
    angle = Math.abs(angle);
  } else {
    angle = 360 - angle;
  }

  return angle;
};

// Animate
var maxframe = 1000;
$({frame: 0}).animate({frame: maxframe}, {
    easing: "linear",
    duration: 1000,

  // Executed each "animation" frame, so we rotate here.
  step: function() {
      var easing = $.easing.easeInOutQuad;
      var left = easing(0, this.frame, startPos.left, endPos.left - startPos.left, maxframe);
      var leftNext = easing(0, this.frame+1, startPos.left, endPos.left - startPos.left, maxframe);

      var top = startPos.top + (endPos.top - startPos.top) * this.frame / maxframe;
      var topNext = startPos.top + (endPos.top - startPos.top) * (this.frame + 1) / maxframe;

      var angle = getAngle(left, top, leftNext, topNext);     
      $mail.offset({left: left, top: top});
      $mail.css('transform', 'rotate(' + angle + 'deg)');
  },

  // Set the final position
  complete: function() {
      $mail.offset($end.offset());
      $mail.css('transform', ''); 
  }  
});
+4

More articles:


All Articles