如何使用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');