Kineticjs - transitionTo

by TekVanDo

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.2.min.js"></script>
<div id="container"></div>

CSS

body {
          margin: 0px;
          padding: 0px;
      }

JavaScript

var boxW = 50;
    var boxH = 50;
    var greedX = 3;
    var greedY = 3;
    var stage = new Kinetic.Stage({
        container: 'container',
        width: 878,
        height: 400
    });
    var layer = new Kinetic.Layer();
    createGreed();
    stage.add(layer);

    function animatePoligon(poligon) {
        var tween = new Kinetic.Tween({
            node: poligon,
            points: [50, 100, 500, 100, 450, 300, 100, 300, 50, 100],
            duration: 1,
            easing: Kinetic.Easings.EaseInOut
        });
        tween.play();
    }
    function poligonToDefault(poligon){
        var tween = new Kinetic.Tween({
            node: poligon,
            points: poligon.pointsDefault,
            duration: 1,
            easing: Kinetic.Easings.EaseInOut
        });
        tween.play();
    }

    function createGreed() {
        var startX = 0;
        var startY = 0;
        var polyCollecter = [];
        for (i = 0; i < greedY; i++) {
            polyCollecter[i] = [];
            startX = 0;
            for (j = 0; j < greedX; j++) {
                polyCollecter[i][j] = new Kinetic.Line({
                    points: [
                    startX, startY,
                    startX + boxW, startY,
                    startX + boxW, startY + boxH,
                    startX, startY + boxH, ],
                    fill: '#00D2FF',
                    stroke: 'black',
                    strokeWidth: 5,
                    closed: true
                });
                polyCollecter[i][j].pointsDefault = polyCollecter[i][j].attrs.points;
                layer.add(polyCollecter[i][j]);
                startX += boxW;

                polyCollecter[i][j].on('mouseover touchstart', function (evt) {
                    animatePoligon(this);
                });
                polyCollecter[i][j].on('mouseout touchend', function (evt) {
                    poligonToDefault(this);
                });
            }
            startY += boxH;
        }
    }