JavaScript点对点角度计算

5
我们有3个点: 开始结束邮件

description

这个邮件图像会沿着曲线从起点到终点移动,这是通过jQuery animate完成的。

现在下一步是使邮件图像在动画运行时旋转。因此,在起点和终点处,它应该旋转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'));
  }
});

但上述代码不正确,当开始/结束时,角度并没有朝上,我对几何数学的经验非常有限,因此真的很感谢旋转计算方面的帮助。

我不明白为什么在起点和终点的路径没有以90度角离开起点并进入终点的情况下,它为什么应该面向上方。 - Matt Ball
@MattBall 真正的动画确实以90度角开始和结束,但图像在Photoshop中很快就被偏移了。 - randomKek
1
这是你看到的吗?http://jsfiddle.net/R5dRd/ - bfavaretto
4
一个 JSFiddle 会有助于查看哪里出了问题。y 坐标之间的差异应该是 Math.atan2 的第一个参数。此外,看起来您正在基于连接当前位置和终点位置的线段的斜率计算角度(弦)。实际上,你想要的是近似动画曲线的局部斜率(切线)。一个合理的方法是在当前位置和前一步的位置之间进行 atan2 计算。 - acjay
1
看起来,获取当前位置似乎不能产生稳定的结果,因为旋转会影响位置坐标。你需要找到一种补偿的方法。希望我能提供更多帮助,但我得回去解决自己的问题 :) - acjay
显示剩余3条评论
1个回答

4

首先,您需要使用一个以相同“角度”开始和结束的缓动动画。如果您查看不同的缓动选项swingeaseInOutQuadeaseInOutSine是一些有效的选项。

要计算角度的逼近值,您可以查看邮件图标的当前位置和下一个位置(在下一个动画帧中)。为了获得良好的逼近值,您需要“手动”使用缓动函数计算当前位置和下一个位置。这也意味着您需要手动控制动画。

以下是代码片段,您还可以在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', ''); 
  }  
});

这些公式将导致邮件图标始终指向最终点,而不一定切线于其当前路径。 - thelr
2
嗨,Seth。不,它并不总是指向最终点。您可以通过创建更复杂的缓动函数来查看此内容。请参见此JSFiddle - Anders Carstensen
你是对的。我以为你的代码片段与之前提到的代码相同(它总是指向最终点)。这在JSFiddle上完美地运行。 - thelr

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接