javascript - 如何使用 RaphaelJS 创建动画序列

Question

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

Answer 1

首先，正如您所指出的那样，您没有使用 HTML5 Canvas，拉斐尔实际上使用的是 SVG。用 raphaelJS 创建动画其实很简单。您可以根据需要调整以下行。

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

raphaelObject是您要设置动画的对象，例如您之前制作的形状

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

value是您将其更改为的值，例如“red”

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

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

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

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