JavaScript noktası açısı hesaplama işaret etmek

Question

Biz 3 puanı aldı:, uç ve posta başlamak .

posta görüntü, bu animasyon jQuery ile yapılır, başlangıç ​​ve bitiş noktasından eğri çizgi oluşturacak şekilde hareket eder.

Şimdi sıradaki adım, animasyon çalışırken posta görüntüsünün döndürülmesidir. Böylece başlangıç ​​noktası ve bitiş noktasında 0 derece döndürülebilir, ancak animasyon yaparken, animasyonun yoluna doğru dönmelidir. Çok az var, bitti/başladığında

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

Ama yukarıdaki kodu doğru değil, açı yukarı yüz vermez:

denedim ne (resme bakın) geometri matematik deneyimi, bu yüzden döner hesaplamalar için yardım gerçekten takdir ediyorum.

Answer 1

İlk önce, aynı "açı" ile başlayan ve biten bir hareketlendirme animasyonunu kullanmanız gerekir. Farklı easing options'a bakarsanız, swing, easeInOutQuad ve easeInOutSine geçerli seçeneklerden bazılarıdır.

Açıyla ilgili bir yaklaşımı hesaplamak için, posta simgesinin geçerli konumuna ve bir sonraki konumuna (bir sonraki animasyon çerçevesinde) bakabilirsiniz. İyi bir yaklaşım elde etmek için, hareket fonksiyonunu kullanarak mevcut ve sonraki pozisyonu "manuel" olarak hesaplamanız gerekir. Bu ayrıca animasyonu manuel olarak kontrol etmeniz gerektiği anlamına gelir.

İşte bir kod parçacığı ve ayrıca JSFiddle'da da görebilirsiniz.

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