的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

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