使用幀計時器的Raphaël動畫

我目前從Raphaël開始，我很難弄清楚如何使用帶有計時器的框架以靈活的方式製作動畫。使用幀計時器的Raphaël動畫

使用KineticJS，這非常簡單。所有我需要的是寫類似：

var anim = new Kinetic.Animation(function(frame){ 
    circle.setSomeAttribute(someFunction(frame.time)); 
}, layer); 
anim.start();

這樣，我居然可以把任何東西我想裏面someFunction()，並已超過傳遞給proprety隨着時間的推移值更好的控制。無論如何，我可以輕鬆地與Raphaël做到這一點？

謝謝:)

來源

2012-12-22 TKrugg

從未使用拉斐爾，但有一個快速瀏覽文檔，它似乎拉斐爾有更多的CSS風格的動畫，您定義的動畫，然後開始/停止它的東西。你需要更多的框架第二種東西。也許你應該只是看看更多的js做事的方式，這篇文章可能會幫助你.... https://hacks.mozilla.org/2011/08/animating-with-javascript-from-setinterval-to-requestanimationframe/ – PAEz

RaphaelJS會讓你按百分比分解動畫步驟。例如：

gear.stop().animate({ 
     "0%": { transform: gear.__start }, 
     "20%": { transform: gear.__start + ' r' + gear.__dir + '180'}, 
     "40%": { transform: gear.__start + ' r0'}, 
     "80%": { transform: gear.__start + ' r' + gear.__dir + '180'}, 
     "100%": { transform: gear.__start + ' r0'}, 
    }, 3000);

這將繞過寬鬆AFAIK。無論如何，參見http://jsfiddle.net/Cy8DQ/作爲一個工作示例。

來源

2012-12-22 18:31:04 pp19dd

這是非常有趣的知道。不幸的是，它對這種特殊情況沒有幫助，因爲我對'animate（）'生成的轉換不滿意（它可以選擇最短路徑）。我想要做的實際上是將長度從原始長度的0％改變爲100％。所以只需要改變一個定時器的子路徑就很容易了。 – TKrugg

拉斐爾美麗使用+1，pp19dd –

@TKrugg：放鬆只會讓你控制時間，但影響路徑，你可以這樣做。而不是「20％」：{transform：...}，你可以做「20％」：{path：「...」} - 這將使從第1步到第2步的路徑動畫。 – pp19dd

不能完全確定你問什麼，但你可能只是想定義自己的寬鬆式。

Raphael.easing_formulas.myEasingFormula = function(n) { 
     //n is fraction of time elapsed 
     return myOperationOn(n);  
    };

如果沒有一種烘焙的緩動方法可以滿足您的需求，則很容易製作您自己的。您可以在Raphael here in the source中看到標準緩衝的公式。您只需返回一個新的小數值即可應用於所選元素的轉換。

來源

2012-12-22 18:09:42

正如我在之前的評論中所說的那樣，我不滿意'animate（）'在做什麼，所以不幸的是，改變寬鬆策略將無濟於事。除此之外，這個功能看起來非常有趣。謝謝:) – TKrugg

我相信每個與拉斐爾一起度過的人都有機會找到它的路徑動畫可悲的不足。我在這裏看到了一些很好的解決方案（this是最全面的）。底線，沒有很好的解決方案。

我通常使用這種效用函數（輕鬆轉換爲拉斐爾插件，如果你找到了這樣的包裝更方便）：

function drawpath(canvas, pathstr, duration, attr, callback) 
{ 
    var guide_path = canvas.path(pathstr).attr({ stroke: "none", fill: "none" }); 
    var path = canvas.path(guide_path.getSubpath(0, 1)).attr(attr); 
    var total_length = guide_path.getTotalLength(guide_path); 
    var last_point = guide_path.getPointAtLength(0); 
    var start_time = new Date().getTime(); 
    var interval_length = 50; 
    var result = path;   

    var interval_id = setInterval(function() 
    { 
     var elapsed_time = new Date().getTime() - start_time; 
     var this_length = elapsed_time/duration * total_length; 
     var subpathstr = guide_path.getSubpath(0, this_length);    
     attr.path = subpathstr; 

     path.animate(attr, interval_length); 
     if (elapsed_time >= duration) 
     { 
      clearInterval(interval_id); 
      if (callback != undefined) callback(); 
      guide_path.remove(); 
     }          
    }, interval_length); 
    return result; 
}

您可以使用此逐步「繪製」一條線幾乎是無限的複雜性。 Firefox仍然不夠快，無法實時計算複雜路徑，但Chrome非常棒，而且它仍然是VML友好的。

查看我的一些應用程序here和here。

來源

2012-12-27 22:42:09

使用幀計時器的Raphaël動畫

回答

相關問題