canDo.js-Transform-SetTransform

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="setTransform" width="320" height="320">This text is displayed if your browser does not support HTML5 Canvas.</canvas>

JavaScript

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