EaseJS Tween Color

by Gary Metzker

HTML

<script src="http://code.createjs.com/createjs-2013.12.12.min.js"></script>

<canvas id='canvas' width="600px" height="300px" style="background-color:black;"></canvas>

JavaScript

var stage = new createjs.Stage('canvas');

var circle =  new createjs.Shape();

var color1 = {
    r: 164,
    g: 228,
    b: 2,
    a: .5
};
var color1b = {
    r: 164,
    g: 228,
    b: 2,
    a: 1
};
var color2 = {
    r: 255,
    g: 0,
    b: 0,
    a: .5
};
var color2b = {
    r: 255,
    g: 0,
    b: 0,
    a: 1
};

circle.fillColor = JSON.parse(JSON.stringify(color2));
circle.strokeColor = JSON.parse(JSON.stringify(color2b));

circle.graphics
    .beginStroke('#FFFFFF')
    .beginFill('#FF0000')
    .inject(setColor, circle)
    .drawCircle(0, 0, 30);

circle.x = 100;
circle.y = 100;
circle.isSelected = false;

circle.on('click', onClick);
                

stage.addChild(circle);
stage.update();

 stage.enableMouseOver(10);

createjs.Ticker.addEventListener("tick", tick);
createjs.Ticker.setFPS(30);

   
function tick() {
    stage.update();
}

function onClick() {
    this.isSelected = !this.isSelected;
    
    if(this.isSelected) {
         createjs.Tween.get(this, {override: true}).to({scaleX: 2, scaleY: 2}, 250);
         createjs.Tween.get(this.fillColor, {override: true}).to(color1, 300);
         createjs.Tween.get(this.strokeColor, {override: true}).to(color1b, 300);
    } else {
        createjs.Tween.get(this, {override: true}).to({scaleX: 1, scaleY: 1}, 250);
        createjs.Tween.get(this.fillColor, {override: true}).to(color2, 300);
        createjs.Tween.get(this.strokeColor, {override: true}).to(color2b, 300);
    }
    

}

 function setColor(o) {
     
     if(o.fillColor !== undefined && o.fillColor !== null) {
         this.fillStyle = toRgbaString(o.fillColor); // "this" will resolve to the canvas's Context2D.
     }
     if(o.strokeColor !== undefined && o.strokeColor !== null) {
         this.strokeStyle = toRgbaString(o.strokeColor);
     }
 }

function toRgbaString(c) {
    
    return createjs.Graphics.getRGB(Math.round(c.r), Math.round(c.g), Math.round(c.b), c.a);
}