SVG-Linie über Endpunkt mit Snap.svg animieren

Question

Ich habe den folgenden Code, der, wenn Sie auf den grauen Halbkreis klicken, gibt es zwei Animationen, die passieren, bin ich sehr nah an meinem beabsichtigten Ergebnis, jedoch animiert die Linie Pfadanimation über ein Punkt, aber dieser Punkt scheint sich am Ende zu bewegen, ich möchte, dass er sich um seinen Endpunkt dreht, so dass ich nicht aus dem Kreis herausspringe, in dem der Endpunkt liegt.

Es ist viel klarer in der jsfiddle zu sehen, was Ich spreche über und das Problem zur Hand.

** Sie haben den grauen Kreis klicken, um die Animation **

console.clear(); 
 

 
var loop = "M31,201.1C16.6,118.8,69.1,40.5,150.7,26c32.5-5.8,64.5-1.6,93.7,14.5c59.1,32.6,88.4,94,77.1,159.1"; 
 
var pin = "M180.4,193.3c-1.8,0-3.5-0.9-4.4-2.6c-1.3-2.4-0.5-5.5,2-6.8L309.8,111c2.4-1.3,5.5-0.5,6.8, 2c1.3,2.4,0.5,5.5-2,6.8l-131.8,72.9C182.1,193.1,181.2,193.3,180.4,193.3z"; 
 
var circle_svg = "M-224.1,227.9c-5.1,5.1-5.1,13.4,0,18.5s13.4,5.1,18.5,0s5.1-13.4,0-18.5C-210.8,222.8-219,222.8-224.1,227.9z"; 
 

 
var loopLength = Snap.path.getTotalLength(loop); 
 

 
console.log(loopLength); 
 

 
var s = Snap(); 
 

 
circle = s.path({ 
 
    path: loop, 
 
    fill: "gray", 
 
    stroke: "#c00", 
 
    strokeWidth: 0, 
 
    strokeLinecap: "round" 
 
}); 
 

 
var g = s.gradient("l(0, 0, 1, 1)#80DFFE-#0CA5EE-#07A3EE"); 
 

 
circleOutline = s.path({ 
 
    path: Snap.path.getSubpath(loop, 0, 0), 
 
    stroke: g, 
 
    fillOpacity: 0, 
 
    strokeWidth: 0, 
 
    strokeLinecap: "round" 
 
}); 
 

 

 

 
circle_middle = s.path({ 
 
    path: circle_svg, 
 
    stroke: "#000000", 
 
    fill: "#ffffff", 
 
    strokeWidth: 5, 
 

 

 
}); 
 

 
pin_line = s.path({ 
 
    path: pin, 
 
    fill: "#000000" 
 

 
}); 
 

 
// +"t"+[translateX,translateY] 
 

 

 
circle_middle.attr({ 
 
    transform: "t" + [400, -65] 
 
}); 
 
pin_line.attr({ 
 
    transform: 'r-170,180,180' 
 
}); 
 
circle.click(function(e) { 
 

 
    Snap.animate(0, loopLength, 
 
    function(step) { //step function 
 

 
     circleOutline.attr({ 
 
     path: Snap.path.getSubpath(loop, 0, step), 
 
     strokeWidth: 25 
 
     }); 
 

 
    }, // end of step function 
 
    800 //duration 
 

 
); //Snap.animate 
 

 
    pin_line.animate({ 
 
    transform: 'r30,180,180', 
 
    translate: '20, 20, 85, 85' 
 
    }, 1000); 
 

 

 
}); //click the circle

svg { 
 
    height: 300px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>

Answer 1

So gibt in der Tat Ausgabe eine Ausrichtung war zu aktivieren, und ich versuchte, dass in Illustrator zu beheben, dann kam zu deinem Beispiel zurück und erkannte, wie einige dieser Transformationen im JS tatsächlich funktionierten, und war in der Lage, sie so anzupassen, dass sie endlich korrekt aussahen. Aber als ich versuchte, die Transformationen mit deinen Pfaden anzupassen, konnte ich es nicht richtig machen, auch wenn t (translations) neben Rotationen auf die pin_line angewendet wird. Es ist also entweder eine Kombination der Pfade, die durch eine Feinabstimmung dieser Rotationspunkte ersetzt werden müssen, oder es ist einfach so, dass ich nicht ganz verstehe, wie man den snapsvg-Code bearbeitet. :) Auf jeden Fall habe ich eine Geige arbeiten, die einige meiner neuen Pfadkoordinaten in Illustrator und einige Änderungen an der JS enthält: https://jsfiddle.net/14e107mt/4/ Zusätzlich zu den Pfaden ändert es die Übersetzung der circle_middle Übersetzung (da es ist ausgerichtet ist nun dort befindet), und ändert die Dreh pin_line

pin_line.attr({ transform: 'r-170 176 172' }); 

und

pin_line.animate({ transform: 'r30 176 172' }, 1000); 

anstelle von 180 180 zu

Koordinaten.