Animations

Move, rotate and scale

Start animation

Code

<canvas id="anim1" height="200" width="400"></canvas>
<script type="text/javascript">
    var c1 = new cajal('anim1');
    c1.add('rect', new cajal.Rect(20, 20, 50,50).options({
    	fill  : 'black',
    	stroke: 'blue',
    	width : 10})).draw();

    var myAnimation = function () {
        this.get('rect').moveBy(0.5,0.5).rotateBy(1).scaleBy(0.01,0.002);
    }
</script><br/>
<a href="#" onclick="c1.animate(myAnimation,'5s'); return false;">Start animation<a>
			

Use easing functions

Start animation

Code

<canvas id="anim2" height="200" width="400"></canvas>
<script type="text/javascript">
var c2 = new cajal('anim2');
var options = {fill: 'black', stroke:'blue', width: 4};
c2.add('rect', new cajal.Rect(20, 20, 15, 15).options(options))
  .add('rect2', new cajal.Rect(20, 50, 15, 15).options(options))
  .add('rect3', new cajal.Rect(20, 80, 15, 15).options(options))
  .add('rect4', new cajal.Rect(20, 110, 15, 15).options(options))
  .add('rect5', new cajal.Rect(20, 140, 15, 15).options(options))
  .draw();
var easing = function (frame, duration) {
    this.get('rect').moveBy(300/duration,0);
    this.get('rect2').moveBy(cajal.Ease.expInOut(300,frame,duration,2),0);
    this.get('rect3').moveBy(cajal.Ease.expInOut(300,frame,duration,3),0);
    this.get('rect4').moveBy(cajal.Ease.expInOut(300,frame,duration,4),0);
    this.get('rect5').moveBy(cajal.Ease.expInOut(300,frame,duration,5),0);
}
</script><br/>
<a href="#" onclick="c1.animate(easing,200); return false;">Start animation<a>
			

Start and stop infinite animations

Start animation | Stop animation

Code

<canvas id="anim3" height="200" width="400"></canvas>
<script type="text/javascript">
var c3 = new cajal('anim3');
c3.add('item', new cajal.Polygon(200, 100, 5, 50).options({
    fill  : 'black',
    stroke: 'blue',
    width : 4
})).draw();
var rotation = function () {
    this.get('item').rotateBy(0.5);
}
</script><br/>
<a href="#" onclick="c3.animate(rotation); return false;">Start animation</a> |
<a href="#" onclick="c3.stop(rotation); return false;">Stop animation</a>