Pieces of Christmas -- part2

In Pieces of Christmas part1 I talked about how to generate random snowflakes. For this post, I'll do a bit on how we generate the christmas icons from 132 polygons and transition between them. (Pieces of Christmas is here)

Each of the christmas shapes (we have 4: the holly, reindeer, snowflake, and robin) are built from 132 triangles on an svg with with viewBox dimensions of 1000 x 1000. The coordinates of the corners of the triangles are then parsed by a php script into a json file-- so basically what we are working on is an array of points defining each triangle, which Snap handles easily.

**In our code the points data is stored as an object with


  var polygonInfo = {"poly1": {
     "points": [x1,y1, x2, y2, x3, y3],
      "fill": someColor},
   "poly2": ...}

and the corresponding polygon drawn in the DOM also has ids of poly1, poly2...

The effect in transition is that each polygon start to move to it's new position, then the next and so on until the 132 polygons are in their new homes. To stagger the polygon animation can be done by looping through the polygons with a setInterval. Snap comes with some default easings which can be called with mina.[easing]. I used mina.easeinout since it seems to have the most natural effect. Of course, to be really smooth you'd probably have to define your own easing function.

The full transition is done with the following function:


/**
   * 
   * @param pointDataObj object as per polygonInfo above
   * @param callback: function to call when you have formed 
   *   the new icon
   * @returns {number} this is the setInterval ID just 
   * in case you need to cancel it
   */
function itemTransition(pointDataObj, callback) {
    var points,
      i = 1; //for interating through the polygons

    var delay = setInterval(function() {
      //getting the info from the input about the new position
      //and fill the polygon has to move to
      var points = pointDataObj["poly"+i]["points"];
      var fill = pointDataObj["poly"+i]["fill"];
      //Snap select the polygon
      var piece = Snap("#poly" + (i).toString());

      //animate the polygon to opacity 1-- 
      //since if it's in the snowflake configuration it
      //may have opacity <1
      piece.animate({ opacity: 1 }, 1500, mina.linear);
      //also animate the polygon to it's new position and new color,
      // animation to take 1000ms using the easing function         
      //mina.easeinout
      piece.animate({
        "points": points.toString(),
        "fill": fill
      }, 1000, mina.easeinout); 

      //last polygon-- stop the looping
      if (i == 132) {
        clearInterval(delay);
        // this puts the shimmer effect on each of the christmas shapes
        // I will explain this in another post...
        setTimeout(function() {
          shimmer()
        }, 1500);
        // all done now- do callback, whatever that is
        if(callback) callback();
      }
      // don't forget to increment i otherwise you are moving
      // only 1 polygon forever ;)
      i++;
    // and we are staggering the start if the movement of the polygon
    // by 10ms each
    }, 10);

    return delay;
  }