complex canvas animations

by not important

HTML

<script src="https://code.createjs.com/easeljs-0.8.0.min.js"></script>
<script src="https://code.createjs.com/tweenjs-0.6.0.min.js"></script>
<canvas id="canvas" width="320" height="480"></canvas>

CSS

canvas {
    background-color: #efefef;
}

CoffeeScript

class Pulser
    constructor: (@width,@height,@targetColor,@originalColor) ->
        [red,green,blue,alpha] = @originalColor
        @currentColor = {red,green,blue,alpha}
        @shadowBlur = {size: 0}
        @graphics = new createjs.Graphics
        @el = new createjs.Shape @graphics
        @el.regX = @width / 2
        @el.regY = @height / 2
        @setGraphics()
        @setScaleTween()
        @setColorTween()
        @setShadowTween()
        @setTimeline()
        createjs.Ticker.addEventListener 'tick', @setGraphics.bind(this)

    setTimeline: ->
        @timeline = new createjs.Timeline [@scaleTween, @colorTween, @shadowTween], {}, {loop: true}

    setColorTween: ->
        @colorTween = createjs.Tween.get @currentColor
        [red,green,blue,alpha] = @targetColor
        @colorTween = @colorTween.to {red,green,blue,alpha}, 200
        [red,green,blue,alpha] = @originalColor
        @colorTween = @colorTween.to {red,green,blue,alpha}, 1000

    setScaleTween: ->
        @scaleTween = createjs.Tween.get(@el).to({scaleX: 1.4, scaleY: 1.4}, 200).to({scaleX: 1, scaleY: 1}, 1000)

    setShadowTween: ->
        @shadowTween = createjs.Tween.get(@shadowBlur).to({size: 20}, 200).to({size: 0}, 1000)

    setGraphics: ->
        {red,green,blue,alpha} = @currentColor
        red = red | 0
        green = green | 0
        blue = blue | 0
        alpha = alpha | 0
        color = "rgba(#{red},#{green},#{blue},#{alpha})"
        @graphics.c().f(color).dr(0,0,@width,@height).cp().ef()
        @el.shadow = new createjs.Shadow color, 0, 0, @shadowBlur.size

stageEl = new createjs.Stage 'canvas'
pulser = new Pulser 40, 20, [255,0,0,255], [136,0,0,255]
pulser.el.x = pulser.el.y = 120
stageEl.addChild pulser.el

createjs.Ticker.setFPS 60
createjs.Ticker.addEventListener 'tick', ->
    stageEl.update()