I've recently switched to EaselJs and would like to animate the color of a circle.

The code I've got so far is this:

var shape = new createjs.Shape();
shape.graphics.beginFill(createjs.Graphics.getRGB(255, 0, 0));
shape.graphics.drawCircle(0, 0, 10);
stage.addChild(shape);

var tween = createjs.Tween.get(shape, { loop: true }).
    to({color:"#00FF00" }, 1000);

but that doesn't work. What is the right property to animate?

I've recently switched to EaselJs and would like to animate the color of a circle.

The code I've got so far is this:

var shape = new createjs.Shape();
shape.graphics.beginFill(createjs.Graphics.getRGB(255, 0, 0));
shape.graphics.drawCircle(0, 0, 10);
stage.addChild(shape);

var tween = createjs.Tween.get(shape, { loop: true }).
    to({color:"#00FF00" }, 1000);

but that doesn't work. What is the right property to animate?

• javascript
• html
• canvas
• tween
• easeljs

5 Answers 5

I don't think it's possible to animate the color of a shape like that, afterall the drawing of your shape could include many different colors, how should the Tween know which of those colors to modify? There are two ways that I can think of right know:

Method 1) Use a createjs.ColorFilter, apply it to your shape and then tween the properties of your filter:

var shape = new createjs.Shape();
//making the shape shape white, so we can work with the multiplyers of the filter
shape.graphics.beginFill(createjs.Graphics.getRGB(255, 255, 255));
shape.graphics.drawCircle(0, 0, 10);
stage.addChild(shape);
var filter = new createjs.ColorFilter(1,0,0,1); //green&blue = 0, only red and alpha stay
shape.filters = [filter];

var tween = createjs.Tween.get(filter, { loop: true }).
    to({redMultiplier:0, greenMultiplier:1 }, 1000);

I did not test this, so...let me know it this works. Also note, that filters are only applied/updated when calling cache() or updateCache() on your shape, so you will have to add that to your tick-function.

Method 2) Or you just redraw the shape every frame...but 1) is probably easier.

I was just trying to do the same thing. My solution was to tween custom properties on the shape object and then call an update method on the tween 'change' event. hope it this helps, I'm really new to createjs but so far I really like it!

var s = new createjs.Shape();
s.redOffset      = 157;
s.blueOffset     = 217;
s.greenOffset    = 229;

s.updateColor = function()
{
    var color = createjs.Graphics.getRGB( 
        parseInt(this.redOffset), 
        parseInt(this.greenOffset), 
        parseInt(this.blueOffset), 
        1);

    this.graphics.beginFill( color ).drawRect(0, 0, 300, 300);
}

createjs.Tween.get(this.background).to({ 
    redOffset   : 255,
    greenOffset : 255,
    blueOffset  : 255
},  3000).addEventListener('change', function()
{
    s.updateColor ();
});

Non filter version.

var colorObj = { r:255, g:0, b:0 };
var shape = new createjs.Shape();
var mand = shape.graphics.beginFill(createjs.Graphics.getRGB(colorObj.r, colorObj.g, colorObj.b)).mand;
shape.graphics.drawCircle(60, 60, 10);
stage.addChild(shape);

var tween = createjs.Tween.get(colorObj, { loop: true }).to({ r:255, g:255, b:255 }, 1000);
tween.addEventListener( "change", function( event ) {
    mand.style = createjs.Graphics.getRGB(Math.floor(colorObj.r), Math.floor(colorObj.g), Math.floor(colorObj.b));
});

beginFill(...).mand object is able to update.

fiddle

https://jsfiddle/MasatoMakino/uzLu19xw/

I just read another option for animating colors here: http://munity.createjs./discussions/easeljs/4637-graphics-colour-animation

It makes use of the createjs inject-method. I copied the relevant code from the provided code-example with a little bit of explanation fo my own.

According to the docs:

inject ( callback, data ): Provides a method for injecting arbitrary Context2D (aka Canvas) API calls into a Graphics queue. The specified callback function will be called in sequence with other drawing instructions (...)

With this method you can for example change the native context2d fillstyle so we can change the fill color that easeljs uses to draw on the canvas.

Here we tell createjs about our own setColor function (defined below), this function will thus get automatically executed before every redraw:

var shape = new createjs.Shape();
shape.graphics.beginFill(createjs.Graphics.getRGB(255, 0, 0));
shape.graphics.inject(setColor, data)
shape.graphics.drawCircle(0, 0, 10);
stage.addChild(shape);

The definition of the setColor-function which calls the canvas native fillStyle method:

function setColor(o) {
    // sets the context2D's fillStyle to the current value of data.fill:
    this.fillStyle = o.fill; // "this" will resolve to the canvas's Context2D.
}

And the tick-function which changes the value of the fill:

function tick(evt) {
    count = (count+3)%360;
    // update the value of the data object:
    data.fill = createjs.Graphics.getHSL(count, 100, 50);
    // redraw the stage:
    stage.update();
}

Modifying fill Instructions will do the trick of changing the color. This might help in doing the animation. I dont know the impacts of this, but this works very fine for me. Try this,

        var circle = new createjs.Shape();
        circle.graphics.f('#ffffff').s('#000000').ss(0.7).arc((30 * j),50,10, 0, Math.PI * 2, 1);
        circle.number = j;
        circle.addEventListener('click', function(e) {
            var fillStyle = e.target.graphics._fillInstructions[0].params;
            var currentFillStyle=fillStyle[1]+"";
            for (var i = 0; i < circles.length; i++) {
                var resetFillStyle = circles[i].graphics._fillInstructions[0].params;
                resetFillStyle[1] = "#ffffff";
            }

            if (currentFillStyle == "#00B4EA") {
                fillStyle[1] = "#FFFFFF";
            } else {
                fillStyle[1] = "#00B4EA";
            }
            stage.update();

        })

Hope this helps!