스냅 svg 미터 차트 애니메이션

Question

미터 차트의 운동 애니메이션을 보려고합니다. 그러나 화음을 찍는 동안 화음의 뾰족한 끝은 타원의 둘레를 벗어납니다. 이 fiddle은 제가 직면 한 문제를 설명합니다.

예상 출력 : 애니메이션을 적용하는 중에 뾰족한 끝 부분이 타원 안에 잘 들어 있어야합니다.

여기서는 snap.svg 라이브러리를 사용하여 코드를 움직입니다. 나는이 애니메이션을 달성하기 위해 노력하고이를 통해

코드는 다음과 같습니다

var snapper = Snap("svg"); 

Snap.animate([-230],[0], 
function(val){ 
    snapper.select("#meter").attr({ 
     "transform":"scale(1 1) rotate(" + val[0] + " 242.5 208)" 
    }); 
},10000,mina.linear); 

어떤 도움에 감사드립니다.

미리 감사드립니다.

Answer 1

이것은 완전한 대답은 아니지만 문제를 조사하는 것입니다.

먼저 표준화 된 값 (회전하려는 중심을 0,0으로 지정)을 사용하여 바늘을 그린 다음 translate를 사용하여 그래픽을 디스플레이 중앙으로 이동해야합니다. 이렇게하면 회전하기가 더 쉽습니다. 예를 들어 :

이제

<use xlink:href="#meter" transform="translate(241.88,198.1)" /> 

는 기원 0,0과 관련하여 확장 할 수 화면을 이동하지 않습니다

<defs> 
<g id="meter"> 
     <line x1="4.24" y1="-9.195" x2="194.35" y2="25.935"/> 
     <line x1="0" y1="9.195" x2="194.35" y2="25.935"/> 
     <line x1="0" y1="9.195" x2="-9.89" y2="-1.555"/> 
     <line x1="4.24" y1="-9.195" x2="-9.89" y2="-1.555"/> 
</g> 
</defs> 

그런 다음 당신은 당신이 그것을 회전 할 장소에 그리기 . scale 인수 변환으로 @Ian에 의해 제안

또한 중심을 추가 동일한 결과를 얻을 수는 좌표

scale(1 1 241.88 198.1) 

다른 문제는 더 복잡하다. 바늘의 길이는 곡선의 각 점에 대한 반경이어야합니다. 반지름이있는 경우 비율에 비례하여 크기를 조절합니다. 반경은 각도의 함수로 계산할 수 있지만, 호가 아닌 베 지어 곡선을 사용하므로 사소한 공식이 아닙니다. 확실하지는 않지만 아크에 베 지어를 근사하는 함수를 가진 SVG 라이브러리가 있다고 생각합니다. 그 문제 (특정 각도에 대한 베 지어 곡선에서 반경 좌표를 얻는 방법)를 별도의 질문 (여기 또는 수학 스택 교환에서)으로 제기 할 수 있습니다.

다음은 근사값 (90 도만 적용)이며 사인 및 로그 함수를 기반으로 한 보정을 사용합니다. 정확한 것을 필요로하지 않으면 그것은 당신을 위해 일할 수도 있습니다. 필자는 SVG를 단순화하고 필수적인 부분 만 보관했습니다.

var snapper = Snap("svg"); 
Snap.animate([-100,0.72,0.89],[-10,1,1], 
    function(val) { 
     var dim = val[1]; 
     var corr = (Math.sin(2*(val[0]+10)*Math.PI/180))*Math.log(val[2]); 

     snapper.select("#meter").attr({ 
     "transform":"scale("+(dim-corr)+" "+(dim-corr)+") rotate(" + val[0] + " 0 0)" 
     }); 
    }, 10000, mina.linear); 

여기에서 확인하십시오 : JSFiddle. 이를 시작점으로 사용하고 문제에 적응 시키십시오.