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>