Ring

Explosion ring

by stot

HTML

<script src="https://code.createjs.com/createjs-2014.12.12.min.js"></script>
<canvas id="canvas" width="400" height="200"></canvas>
<div id="object">A</div>

CSS

#object {
    position:absolute;
    color:white;
    top:65px;
    left:95px;
    font-weight:bold;
    font-size:40px;
    background:#000;
}
canvas {
    border:1px solid gold;
    background: #f3c5bd;
background: -moz-linear-gradient(top,  #f3c5bd 0%, #e86c57 50%, #ea2803 51%, #ff6600 75%, #c72200 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3c5bd), color-stop(50%,#e86c57), color-stop(51%,#ea2803), color-stop(75%,#ff6600), color-stop(100%,#c72200));
background: -webkit-linear-gradient(top,  #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%);
background: -o-linear-gradient(top,  #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%);
background: -ms-linear-gradient(top,  #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%);
background: linear-gradient(to bottom,  #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3c5bd', endColorstr='#c72200',GradientType=0 );

}

JavaScript

var stage = new createjs.Stage("canvas");
createjs.Ticker.addEventListener("tick", tick);

var ringBorderWidth = 20;
var ringSize = 150;
var animationDuration = 720;

// create explosion ring
var ring = new createjs.Shape();
ring.alpha = 0.5;
ring.graphics.setStrokeStyle(10);
ring.graphics.beginStroke("#ffffff").drawEllipse(100, 100, 50,25);
			
// add to stage
stage.addChild(ring);

// create tween
countTween = createjs.Tween.get(ring,{loop:true})
.to({        w: 0,h:0,alpha:0.75})
.to({        w: ringSize,h:ringSize/3.5,alpha:0}, animationDuration,createjs.Ease.quadOut);
countTween.on("change", function (evt, data) {
    ring.graphics
    .clear()
    .beginStroke("#fff")
    .setStrokeStyle((ring.h<ringBorderWidth)?ring.h:ringBorderWidth)
    .drawEllipse(100-ring.w/2, 100-ring.h/2, ring.w,ring.h);
});




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