动画拉斐尔对象

Question

我是 raphael.js 的新手，我正在尝试制作拉斐尔元素的动画。例如，我使用 paper.path() 绘制了一个箭头。

var arrow = paper.path("M10,10L100,100");
arrow.attr({
    "stroke-width": 5,
    "stroke-dasharray": "-.",
    "arrow-end": "classic-wide-long"
});

如何使箭头的颜色在绘制时看起来像闪烁？

Answer 1

使用.animate()。例如，

arrow.animate({
    "25%": {stroke: "pink", easing: "bounce"},
    "50%": {stroke: "red", easing: "bounce"},
    "75%": {stroke: "pink", easing: "bounce"},
    "100%": {stroke: "red", easing: "bounce"}
},2500);

其中百分比是达到指定持续时间（在本例中为 2500 毫秒）的帧步长。

动画拉斐尔对象

Animate raphael objects

html

javascript

path

raphael