如何使用RaphaelJS創建動畫序列

Question

所以這裏是我的問題 我使用RaphaelJS在HTML5畫布中構建動畫，事情是我不太明白如何創建動畫事件，我如何創建動畫事件觸發它們。文檔不是很有幫助。謝謝

Answer 1

首先，正如你指出你不使用HTML5畫布，拉斐爾實際上使用SVG。使用raphaelJS創建動畫實際上非常簡單。您可以將波紋管適應您的需求。

raphaelObject.animate({ attribute: value } , time , easing); 

的raphaelObject是你試圖例如動畫是什麼你早些時候所作

屬性的形狀是要例如動畫是什麼顏色

值是你正在改變它，例如， 「紅」

時間是動畫需要多長時間（毫秒）

寬鬆介紹動畫的性質，開始使用「<>」執行一個簡單的動畫，你可能會期望。緩解「反彈」會導致動畫反彈。這裏有不同的方法示例：http://raphaeljs.com/easing.html

下面是一個例子，我們通過旋轉90度並將其顏色更改爲紅色來激活對象「圖標」。動畫將需要300毫秒，並將有一個奇特的反彈效果。

icon.stop().animate({ 
      transform: "r90", 
      fill: "red" 
     }, 300 , 'bounce');