canDo.js-Transform-Transform

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 setTransform = CanDo('demo', {
    frameRate: 30,
    duration: 3000,
    events: {
        mouseover: function () {setTransform.play({speed:1});},
        mouseout: function () {setTransform.play({speed:-1});}
    },
    paint: function() {
        //this.identity();
        this.clearRect(-2, -2, 324, 324);
        this.canDo('transform', [
            {
            params: [1, 0, 0, 1, 0, 0],
            cuePoint: 0},
        {
            params: [1, 0.005, 0.005, 1, 0, 0],
            cuePoint: 0.5,
            easing: 'easeInOutQuad'},
        {
            params: [1, -0.0098, -0.0098, 1, 0, 0],
            cuePoint: 1,
            easing: 'easeInOutQuad'}
        ]);
        drawJSLogo(this);
    }
});