Question

Hey guys just got a simple circle which i have drawn and was wondering how do i get it to change colors automatically. So for example it will start of black then go orange then yellow and then red etc.

This is what i have got so far. Just some simple code which is a circle and is black and will move up of the screen after 1 second.

        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)); 

Thanks for the help

Answer 1

To animate your black circle to white you can simply add fill to you animation

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" );
        });
});

Demo here