까다로운 raphael svg animation

Question

나는 원래 도넛을 사용하여 this jsfiddle에서 '도넛'차트를 만들었습니다.

내 필요에 맞게이 스크립트를 수정했으며 현재 this이 렌더링되었습니다.

내 목표는 각 슬라이스에 동시에 애니메이션을 적용하는 것입니다. 예를 들어 파란 조각을 60 %까지 자라게하십시오; 빨간색 슬라이스는 40 %로 줄어 듭니다.

기존의 슬라이스를 제거하고 새 값을 조정 된 값 (예 : 51, 49)으로 재 렌더링하여 슬라이스를 다시 그릴 수있었습니다. 그러나 여기서 문제는 순간적이라는 것입니다. 내 질문은

,

(A) 나는 물체 (방법)을 다시 그릴 필요없이이 애니메이션을 할 수 있습니까? (b) 그렇지 않은 경우 다시 그리기 로직을 ​​사용하여이 효과를 어떻게 애니메이트 할 수 있습니까?

Answer 1

예. 원형 차트가있는 Raphael 데모 페이지에서이 작업을 수행하는 예가 있습니다. Growing Pie 데모를 참조하십시오.

경로를 생성하는 코드를 독립 실행 형 함수로 분리해야 나중에 새 경로를 반환 할 수 있습니다. animate()를 사용하려면 customAttributesobject에 함수를 정의해야합니다. path 속성을 가진 객체를 (최소한) 슬라이스의 새 경로로 설정해야합니다.

레이블이 있으므로 중심을 기준으로 원형 조각이 확장/축소되도록 코드를 수정하여 레이블을 가운데로 이동했기 때문에 레이블을 이동할 필요가 없도록 할 수 있습니다 슬라이스의 "축"에

업데이트

여기 차트와 같은 더를 제외하고, 거의, 드미트리의 성장 파이 데모와 같은 간단한 예제와 JSFiddle입니다. setValue() 메서드를 내보내 슬라이스 크기를 변경하고 페이지가로드 될 때 호출합니다. customAttributes 추가에 대해서도 his blog post을 참조하십시오.

위의 마지막 단락에서 나는 마크를 조금 벗어났습니다. 차트가 라벨이있는 차트가 아닙니다. 나는 그들을 섞었다. 또한 슬라이스를 중심으로 유지하는 것이 더 어려울 수 있으므로 결국 그렇게하지 않았습니다. animate() 함수는 각 세그먼트를 원의 새로운 시작 및 끝점으로 설정하고 Raphael은 중간 점을 계산합니다. 보시다시피 배열에 여러 개의 인수를 전달할 수 있습니다.

this.customAttributes.slice = function(a0, a1) { /*...*/ } 
// ... 
chart.push(paper.path().attr({slice:[0, Math.PI/2 ]}) 

Answer 2

내가 iPod에 있기 때문에 모든 바이올린을 볼 수는 없지만 쓸 필요가있는 함수 안에 애니메이션 호출이 있어야하는 것 같습니다. 안에있는 함수를 호출하는 콜백 매개 변수를 사용하십시오. 재귀 적으로 호출되는 함수를 코드화하여 모든 작업이 완료되면 결국 완료됩니다. 함수를 호출 할 때마다 지정한 경과 된 시간이 끝날 때마다 호출됩니다 ...