5

我们得到 3 分：start、end和mail。

描述

邮件图像从起点和终点沿曲线移动，这是由 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'));
  }
});

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

4

1 回答 1

4

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

要计算角度的近似值，您可以查看邮件图标的当前位置及其下一个位置（在下一个动画帧中）。要获得良好的近似值，您需要使用 easing 函数“手动”计算当前位置和下一个位置。这也意味着您需要手动控制动画。

这是一个代码片段，您也可以在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', ''); 
  }  
});
于 2013-04-04T18:01:15.257 回答