javascript - 拉斐尔如何改变颜色

Question

嘿，伙计们，我刚刚画了一个简单的圆圈，想知道如何让它自动改变颜色。因此，例如，它将从黑色开始，然后变为橙色，然后变为黄色，然后变为红色等。

这就是我到目前为止所得到的。只是一些简单的代码，它是一个黑色的圆圈，会在 1 秒后向上移动屏幕。

        var ball1 = paper.circle(700,170,30);
        ball1.attr({ fill: "black"});
        var anim = Raphael.animation({cy: 10 , cx: 700}, 10000)
        ball1.animate(anim.delay(1000)); 

谢谢您的帮助

Answer 1

要将黑色圆圈设置为白色，您只需为动画添加填充

var paper = Raphael( 0, 0, 1000, 1000 );
var ball1 = paper.circle(700,170,30);
ball1.attr({ fill: "black"});

ball1.animate({ cy: 10 , cx: 700 }, 10000 );
ball1.animate({ fill: "yellow" }, 3000, "linear", function( ) {
        ball1.animate({ fill: "orange" }, 3000, "linear", function( ) {
            ball1.animate({ fill: "red" }, 3000, "linear" );
        });
});

演示在这里