RaphaelJS HTML5 库：沿圆圈发光动画答案

【问题标题】：RaphaelJS HTML5 Library: glow animate along the circleRaphaelJS HTML5 库：沿圆圈发光动画
【发布时间】：2012-10-04 09:30:50
【问题描述】：

我有一个可以移动它的圆圈，我怎样才能使发光效果跟随那个圆圈。

circle = paper.circle(x, y, 5);
glowSet = circle.glow({
    'fill': true,
    'color': '#bbb'
});   

// ...
// I animate the circle later on using

circle.animate({
    cx: coordX,
    cy: coordY
});

我已经尝试过在整个场景中使用动画

glowSet.animate({
    x: coordX,
    y: coordY
});

我尝试在集合上使用 forEach 应用到每个项目

glowSet.forEach(function(item) {
    item.animate({
        x: coordX,
        y: coordY
    });
});

【问题讨论】：

请将代码添加到 jsfiddle.net

标签： javascript jquery html raphael vector-graphics

【解决方案1】：

发光集和圆保持独立。您应该能够通过简单地将它们组合成一个集合来实现您想要的效果，如下所示：

circle = paper.circle(x, y, 5);
glowSet = paper.set(circle, circle.glow({
    'fill': true,
    'color': '#bbb'
}));

然后将您的动画应用到glowSet。

【讨论】：