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