通過SVG路徑獲取動畫div中的旋轉量

Question

從我的last post幫助通過SVG路徑動畫div。通過我的路徑成功和div「#car」動畫。

現在的問題是如何根據曲線旋轉/轉換div？也就是說，如果它通過索道移動需要根據線的曲線旋轉div。

HTML部分

<div class="movepath"> 

     <div class="car" id="car"></div> 


<svg id="canvas" width="1000px" class="content" xmlns="http://www.w3.org/2000/svg" height="370px"> 
<style type="text/css"><![CDATA[ 
    .lineC { 
     fill:#fff;stroke:#000; 
    } 
]]></style> 


</svg> 

    </div> 

CSS部分

.movepath { 
width:"1000px"; 
height:350px; 
position:relative; 
float:left; 
} 

.car { 
width:100px; 
height:50px; 
background-color:red; 
position:absolute; 
left:0;top:0; 
} 

JS部分

$(document).ready(function(){ 

    timer=setInterval('rotateIt()',20); 

    var width=getDocWidth(); 
    $('#canvas').width(width+'px'); 
    $('.carpath').width(width+'px'); 


    var shape = document.createElementNS(svgNS, "path"); 

    var points = 'M0 10 Q -27 10, 95 80 T'+width+' 40'; 
    shape.setAttributeNS(null, "d", points); 
    shape.setAttributeNS(null, "class", "lineC"); 
    shape.setAttributeNS(null, "id", 'road'); 
    document.getElementById("canvas").appendChild(shape); 

}); 

function rotateIt(){ 

    rot += 10; 
    left+=1; 
    $('.right_t').css(prefix, 'rotate(' + rot + 'deg)'); 
    $('.left_t').css(prefix, 'rotate(' + rot + 'deg)'); 

    var length=$('#road')[0].getTotalLength() * i; 
    var point = $('#road')[0].getPointAtLength(length); 


    $('#car').css('left',point.x+'px'); 
    $('#car').css('top',(point.y-62)+'px'); 
    i+=.0005; 
} 

任何一個可以請給我一個旋轉 「#car」 的想法根據路徑？

Answer 1

你需要計算沿曲線兩點之間的角度（比如，你的「車」的下緣），該公式將是這樣的：

function getAngle(p1, p2) { 
    var deltaY = p2.y - p1.y; 
    var deltaX = p2.x - p1.x; 
    return Math.atan2(deltaY, deltaX) * 180/Math.PI 
} 

這裏是一個粗略的工作示例您代碼：

http://jsfiddle.net/5CB4u/

Answer 2

發現了一個偉大的工具來輕鬆地解決這個問題。

這可能是你的朋友。

https://github.com/yairEO/pathAnimator