canDo.js-Transform-Translate

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 translate = CanDo('demo', {
    frameRate: 60,
    duration: 3000,
    events: {
        mouseover: function () {translate.play({speed:1});},
        mouseout: function () {translate.play({speed:-1});}
    },
    paint: function() {
        this.identity();
        this.clearRect(0, 0, 320, 320);
        this.canDo('translate', [
            {
            params: [0, 0],
            cuePoint: 0},
        {
            params: [110, 110],
            cuePoint: 0.5,
            easing: 'easeInOutQuad'},
        {
            params: [0, 0],
            cuePoint: 1,
            easing: 'easeInOutQuad'}
        ]);
        drawJSLogo(this);
    }
});