Javascript指向点角度计算

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

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

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

我尝试过的：

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

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

最佳答案

首先,您需要使用以相同“角度”开始和结束的缓动动画.如果你看一下不同的easing options,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 - 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,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,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',''); 
  }  
});

Javascript指向点角度计算

猜你在找的JavaScript相关文章