canDo.js-Transform-Rotate

by dtex

HTML

<script src="http://dtex.github.io/canDo.js/js/canDo.min.js"></script>
<script src="http://dtex.github.io/canDo.js/js/jsLogo.js"></script>
<canvas id="demo" width="320" height="320">This text is displayed if your browser does not support HTML5 Canvas.</canvas>

JavaScript

var rotate = CanDo('demo', {
    frameRate: 30,
    duration: 4000,
    events: {
        mouseover: function () {rotate.play({speed:1});},
        mouseout: function () {rotate.play({speed:-1});}
    },
    paint: function() {
        this.identity();
        this.clearRect(0, 0, 320, 320);
        this.translate(160, 160);
        this.canDo('rotate', [
            {
            params: [-1],
            cuePoint: 0},
        {
            params: [1],
            cuePoint: 0.5,
            easing: 'easeInOutQuad'},
        {
            params: [-1],
            cuePoint: 1,
            easing: 'easeInOutQuad'}
        ]);
        this.translate(-105, -105);
        drawJSLogo(this);
    }
});