애니메이션 RaphaelJS로 스케일링

Question

RaphaelJS와 함께 작동하도록 스케일링 애니메이션을 얻으려고하고 있지만 운이 없습니다. 이 내 코드는 모습입니다 같은 :

paper.animate ({ 규모 : 2 });

하지만 애니메이션이 작동하지 않습니다. 이것은 RaphaelJS를 사용하여 스케일 효과를 애니메이션하는 올바른 방법입니까, 아니면 수동으로 애니메이션을 적용해야합니까 (JavaScript 간격 등을 사용하여 ...)?

- EDIT -

실수로, 나는 요소를 언급하고있었습니다.

elementFromPaper.animate ({ 스케일 : 2 });

Answer 1

Paper은 Raphael의 요소 컨테이너이며, animate 메서드가 없습니다.
원, 직사각형 등의 요소에만 animate 메서드가 있습니다.
컨테이너의 크기를 변경하려면 setSize을 사용할 수 있습니다 (그러나 컨테이너의 모든 요소를 ​​조정할 수는 없습니다).

편집 : 확대 또는 축소와 같은 효과를 얻으려면 setViewBox 방법을 사용할 수 있습니다.

EDIT2 : scale 규모로 애니메이션화하는 here

에서 설명 된대로, 당신은 일반 transform 매개 변수를 사용하여 속성 요소의 목록에 없습니다.

ele.animate({transform: 's2'}) // here `s2` means a 2x scale 

나는 당신을 위해 간단한 데모를 썼다 : http://jsfiddle.net/qiao/EhCyd/1/ 캔버스 위치에 유일한 고유 상호 작용 방법 setViewBox를 통해 이루어집니다

Answer 2

은, 그러나 그것은 캔버스 위치 또는 줌 레벨로 전환을 애니메이션하지 않습니다 . 애니메이션을 얻으려면 멋진 javascript 애니메이션 메서드 window.requestAnimationFrame을 사용하여 원하는 viewBox 상태로 부드럽게 전환 할 수 있습니다. 모든

우선, 모든 브라우저 방법을 초기화 :

window.requestAnimFrame = (function(){ 
    return window.requestAnimationFrame || 
     window.webkitRequestAnimationFrame || 
     window.mozRequestAnimationFrame || 
     window.oRequestAnimationFrame  || 
     window.msRequestAnimationFrame  || 
     function(callback){ 
      window.setTimeout(callback, 1000/60); 
     }; 
})(); 

여기

var viewBoxX = 0; 
var viewBoxY = 0; 

//@param direction 'up', 'down', 'right' or 'left' 
function pan(direction) { 
    var start = Date.now(); 

    function step(timestamp) { 
     var progress = timestamp - start; 
     var x = viewBoxX, 
      y = viewBoxY; 

     if(direction == 'up') { 
      y = viewBoxY - progress * 0.7; 
     } 
     else if (direction == 'down') { 
      y = viewBoxY + progress * 0.7; 
     } 
     else if(direction == 'right') { 
      x = viewBoxX + progress * 0.7; 
     } 
     else { 
      x = viewBoxX - progress * 0.7; 
     } 

     //Now we set the view box at the modified x and y coordinates 
     //Replace 100,100 with the size of your canvas 
     paper.setViewBox(x, y, 100, 100); 
     if (progress < 400) { 
      window.requestAnimFrame(step); 
     } 
     else { 
      viewBoxX = x; 
      viewBoxY = y; 
     } 
    } 
    window.requestAnimFrame(step); 
}