循環拉斐爾動畫沒有FPS問題？

Question

我只是用Raphaels javascript和得到這個代碼點點試驗：

window.onload = function(){ 
buildAnimation(); 
} 

var buildAnimation = function() { 
    var p = Raphael(50,50,1050,1050); 
    p.rect(50,50,1050,1050).attr({fill : "white",stroke : "none"}); 
    p.rect(50,50,150,150).animate({fill: "#FF5555", stroke: "#000", "stroke-width": 80, "stroke-opacity": 0.5}, 2000); 
} 

如果我添加，buildAnimation後約3個迴路的.animate後，我變得很糟糕fps的問題，它最終減緩和崩潰。

有沒有更好的方法來做到這一點？

Answer 1

不知道這是否是最好的方式，但一個可能的解決方案將使用回調（不知何故原生SVG動畫循環感覺更直觀，但不確定是否有任何動畫循環在拉斐爾）。

不太確定你是否多次調用buildAnimation，但感覺像raphael元素的任何構建應該在一個函數中完成，然後從另一個函數調用動畫會更好。儘量避免重複創建元素。

var p = Raphael(50,50,1050,1050); 
var myRect = p.rect(50,50,100,100).attr({fill : "white",stroke : "none"}); 

var anim = Raphael.animation({fill: "#FF5555", stroke: "#000", "stroke-width": 80, "stroke-opacity": 0.5}, 2000, 'linear', animEnd); 
var animFinish = Raphael.animation({ fill: "white", stroke: "none", 'stroke-width': 1 }, 'linear', animStart); 

function animEnd() { 
    myRect.animate(animFinish); 
}; 

function animStart() { 
    myRect.animate(anim); 
} 

animStart(); 

的jsfiddle這裏http://jsfiddle.net/k8tX7/2/