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:
- Add an Animation table to the database
- Create a getPoiAnimations function in the php code to retrieve all animations applied to a POI
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:
- onCreate event, moves in from left to right, the 3d Vision POI comes from left side of the post card and stops in the center.
- onFocus event, changes in size constantly and bounces, the 3d Vision POI will become bigger and come back to its normal size repeatedly.
- onClick event, walks to the left top corner of the post card with rotation, the 3d Vision POI will go to the left top corner of the postcard while rotating around the z axis.
The animation entries look like:
Modify PHP code to support animations
- Create a function getPoiAnimations() to retrieve animations associated with a POI from Animation table.
In this function, we will:
- retrieve all animations which have the same poiID as the POI that is passed through.
- Based on the "event" field that each animation belongs to, put $animation object in the right event array.
- For each animation, convert each parameter into right format and store them in $animation object.
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
- In function getHotspots, add one line (in bold) to return animations applied to a POI
... ... // 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!!