如何使用RaphaelJS创建动画序列

Question

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

Answer 1

首先，正如你所指出的那样，你没有使用HTML5 Canvas，raphael实际上使用的是SVG。使用raphaelJS创建动画实际上非常简单。您可以根据需要调整线路。

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

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

属性就是你动画的内容，例如：颜色

值是您要将其更改为例如“红色”

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

缓动描述了动画的本质，首先使用“＆lt;＆gt;”它可以像您期望的那样执行简单的动画。缓和'反弹'会使动画很好地反弹。这里有不同宽松的例子：http://raphaeljs.com/easing.html

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

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