Layar Developer Documentation

Back to layar.com

Add animations to a layer

In API v5.0, we introduced animations to Layar Platform. This animation API includes the option for interactive objects to perform animation effects predetermined in the layer. This allows developers to create even better augmented reality experiences by bringing their 3D objects to life and engaging the user. In this tutorial, we will explain how to add animations to your layer. Again, we will only focus on the part which is related to animations. If you do not understand how other features are implemented, please have a look at previous tutorials.

According to the animation API, animations can be used on layer level and POI level. Developers can choose to include several predefined simple appearance animations. What's more exciting is that they can define complex animation effects using the comprehensive version of the API. For instance, various animations can be defined for different interactive events on a POI. In this tutorial, we will focus on explaining how to enable a layer to use the fully customizable animation API on POI level.

We followed the two steps below to enable animations:  

Create Animation table

In the database, we create another table called "Animation".

CREATE TABLE IF NOT EXISTS `Animation` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `poiID` varchar(255) CHARACTER SET utf8 DEFAULT NULL,
  `event` enum('onCreate','onUpdate','onFocus','onClick','onDelete') CHARACTER SET utf8 NOT NULL,
  `type` enum('scale','translate','rotate') CHARACTER SET utf8 NOT NULL,
  `length` int(11) NOT NULL,
  `delay` int(11) DEFAULT '0',
  `interpolation` enum('linear','accelerateDecelerate','accelerate','decelerate','bounce','cycle','anticipateOvershoot','anticipate','overshoot') CHARACTER SET utf8 DEFAULT 'linear',
  `interpolationParam` decimal(10,2) DEFAULT NULL,
  `persist` tinyint(1) DEFAULT '0',
  `repeat` tinyint(1) DEFAULT '0',
  `from` decimal(10,2) DEFAULT NULL,
  `to` decimal(10,2) DEFAULT NULL,
  `axis_x` decimal(10,2) DEFAULT NULL,
  `axis_y` decimal(10,2) DEFAULT NULL,
  `axis_z` decimal(10,2) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=10 ;

Note that we added "poiID" which is the id of the POI (defined in POI table) that a particular animation is associated with. "Event" field specifies when this animation should be triggered. There are five events, onCreate, onUpdate, onFocus, onClick and onDelete.

In this layer, we will return one 3d Vision POI bound to a post card as an example. It has the following animations:

The animation entries look like:

Modify PHP code to support animations

In this function, we will:

function getPoiAnimations($db , $poi) {
  // Define an empty $animationsDict object.
  $animationsDict = NULL;

  /* Retrieve all animations associated with this POI from Animation table */
  // A new table called 'Animation' is created to store animations, each
  // animation has a field called 'poiID' which shows the POI id that this
  // animation belongs to.
  // The SQL statement returns animations which have the same poiID as the id of
  // the POI($poiID).
  $sql_animations = $db->prepare('
                                  SELECT *
                                    FROM Animation
                                   WHERE poiID = :id ');
  // Binds the named parameter marker ':id' to the specified parameter value
  // $poiID.                 
  $sql_animations->bindParam(':id', $poi['id'], PDO::PARAM_STR);
  // Use PDO::execute() to execute the prepared statement $sql_animations.
  $sql_animations->execute();
  // Fetch all the poi animations.
  $rawAnimations = $sql_animations->fetchAll(PDO::FETCH_ASSOC);

  /* Process the $rawAnimations result */
  // if $rawAnimations array is not empty.
  if ($rawAnimations) {
    // Put each animation information into $animationsDict array.
    foreach ($rawAnimations as $rawAnimation) {
      $animation['type'] = $rawAnimation['type'];
      $animation['length'] = changetoInt($rawAnimation['length']);
      $animation['delay'] = changetoInt($rawAnimation['delay']);
      $animation['interpolation'] = $rawAnimation['interpolation'];
      $animation['interpolationParam'] = changetoFloat($rawAnimation['interpolationParam']);
      $animation['persist'] = changetoBool($rawAnimation['persist']);
      $animation['repeat'] = changetoBool($rawAnimation['repeat']);
      $animation['from'] = changetoFloat($rawAnimation['from']);
      $animation['to'] = changetoFloat($rawAnimation['to']);
      $animation['axis']['x'] = changetoFloat($rawAnimation['axis_x']);
      $animation['axis']['y'] = changetoFloat($rawAnimation['axis_y']);
      $animation['axis']['z'] = changetoFloat($rawAnimation['axis_z']);
      /* Gather animations based on Event type */
      $event = $rawAnimation['event'];
      if(is_array($animationsDict) && array_key_exists($event, $animationsDict)) {
        $count = count($animationsDict[$event]);
        $animationsDict[$event][$count] = $animation;
      }
      else
        $animationsDict[$event][0] = $animation;
    }// foreach
  }//if
  return $animationsDict;
}//getPoiAnimations


...
...
// Get transform object information if transformID is not null
      if(count($rawPoi['transformID']) != 0)
        $poi['transform'] = getTransform($db, $rawPoi['transformID']);
      // Get animations object information
      $poi['animations'] = getPoiAnimations($db, $rawPoi);
      // Put the poi into the $hotspots array.
      $hotspots[$i] = $poi;
...
...

This is everything you need to do to add animations to your layer. The attached Sample Code also provides a complete version which supports layer level animations. It is quite often a challenge to come up with amazing animations. You probably need to try out different parameters, combinations of animations and events. Start playing with it and surprise us with your awesome animations!!