Javascript指向点角度计算

Question

我们得到3分:开始,结束和邮件.

邮件图像从起点和终点沿曲线移动,这是由jQuery动画完成的.

现在,下一步是在动画运行时使邮件图像旋转.因此,在起点和终点,它将旋转0度,但在动画时,它应该面向动画的路径旋转.(见图)

我尝试过的:

的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'));
  }
});

但是上面的代码不正确,开始/结束时角度没有面朝上,我对几何数学的经验很少,所以我非常感谢旋转计算的帮助.

Answer 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', ''); 
  }  
});