動畫縮放與RaphaelJS

Question

我想要縮放動畫與RaphaelJS一起工作，但我沒有運氣。這是我的代碼如下所示：

paper.animate（{ 規模：2 }）;

但動畫不起作用。這是使用RaphaelJS動畫效果的正確方法，還是需要手動動畫的東西（使用JavaScript間隔等等）？

- 編輯 -

我的錯誤，我指的是一個元素。

elementFromPaper.animate（{ scale：2 }）;

Answer 1

Paper是拉斐爾元素的容器，它根本沒有animate方法。
只有圓形，矩形等元素有animate方法。
如果要更改容器的大小，可以使用setSize（但這不會縮放容器中的任何元素）。

編輯：如果你想達到像放大或縮小的效果，你可以使用setViewBox方法。

EDIT2：scale不在元素的屬性，如here

上市要帶刻度動畫，您可以使用通用的transform參數列表。

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

我寫了一個簡單的演示給你：http://jsfiddle.net/qiao/EhCyd/1/

Answer 2

與畫布工作崗位，唯一的原生交互是通過方法setViewBox完成，但它不動畫到畫布位置或縮放級別的過渡。要實現動畫，您可以使用漂亮的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); 
}