punkt Javascript by wskazać obliczenie kąta

Question

Mamy 3 punkty: rozpocząć, końcowy i pocztę.

Poczta obraz przesuwa się w zakrzywionej linii od punktu początkowego i końcowego, odbywa się to poprzez jQuery animowania.

Kolejnym krokiem jest sprawienie, aby obraz poczty obracał się podczas działania animacji. Tak więc w punkcie początkowym i końcowym byłby obrócony o 0 stopni, ale podczas animowania powinien obracać się w kierunku ścieżki animacji. (Patrz zdjęcie)

Co próbowałem:

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

Ale powyższy kod nie jest prawidłowy, kąt nie stawić czoła kiedy rozpoczął/zakończył, mam bardzo mało doświadczenie z matematyką geometrii, więc naprawdę doceniam pomoc w obliczeniach rotacyjnych.

Answer 1

Po pierwsze, należy użyć animacji łagodzenia, która rozpoczyna się i kończy na tym samym "kącie". Jeśli spojrzeć na różne easing options, swing, easeInOutQuad i easeInOutSine, to niektóre z poprawnych opcji.

Aby obliczyć przybliżenie kąta, można sprawdzić aktualną pozycję ikony poczty i jej następną pozycję (w następnej ramce animacji). Aby uzyskać dobre przybliżenie, musisz "ręcznie" obliczyć aktualną i następną pozycję za pomocą funkcji łagodzenia. Oznacza to również, że musisz ręcznie sterować animacją.

Oto fragment kodu, który można również zobaczyć na stronie 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', ''); 
    } 
});