如何使用 RaphaelJS 创建动画序列答案

【问题标题】：How to create an animation sequence using RaphaelJS如何使用 RaphaelJS 创建动画序列
【发布时间】：2012-02-25 18:22:51
【问题描述】：

所以这是我的问题我正在使用 RaphaelJS 在 HTML5 画布中构建动画，问题是我不太明白如何创建动画事件以及如何触发它们。该文档不是很有帮助。谢谢

【问题讨论】：

RaphaelJS 根据浏览器以 SVG/VML 输出矢量图，这与具有完全不同的绘图方法的 canvas api 无关。 Raphael 使用 'eve' 库进行事件处理，但仅支持鼠标和触摸事件：请参阅 reference

【解决方案1】：

首先指出您没有使用 HTML5 Canvas，raphael 实际上使用的是 SVG。用 raphaelJS 创建动画其实很简单。您可以根据自己的需要调整下面的行。

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

raphaelObject 是您尝试制作动画的对象，例如你之前制作的形状

attribute 是您正在制作动画的内容，例如颜色

value 是您将其更改为的内容，例如“红”

时间是动画需要多长时间（毫秒）

easing 描述了动画的性质，首先使用“”来执行您可能期望的简单动画。缓动“反弹”使动画很好地反弹。此处不同缓动的示例：http://raphaeljs.com/easing.html

这是一个示例，我们通过将对象“图标”旋转 90 度并将其颜色更改为红色来为其设置动画。动画将花费 300 毫秒，并具有精美的弹跳效果。

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

【讨论】：