Please NOTE that this documentation will not be updated anymore. Please see our new Developer Documentation Site for the latest updates! The content of this page can be found here.
|
In getPOIs API v5.0, we added the following features:
- Animation API - can be used to define a collection of pre-defined animations on the POI icons in the camera view. For Geo POIs, animations are applied to all icons, including normal 1d icon, 2d objects and 3d objects. For Vision POIs, only 2d images and 3d objects.
- Share intent and actions - A share intent action which can be used to open up a "Share" dialog which posts a POI or layer to social networks like Facebook and Twitter.
- User interaction dialog - It is possible to pop up a notification as a result of a getPOI response using the new showDialog parameter.
Animation API
Since Layar 5.0 client, Layar reality browser supports a collection of pre-defined animations on the POI objects in the AR view. These animations are linked to certain events, such as a POI being clicked, receiving focus or being updated.
Key
|
Optional/
Mandatory
|
Value
|
Example
|
Explanation
|
animations
|
Optional |
string or json dictionary
|
See below
|
Defines the default animation for all POIs in the response.
Individual objects may override this by defining their own "animations".
|
Key
|
Optional /
Mandatory
|
Value
|
Example
|
Explanation
|
animations
|
Optional |
string or json dictionary
|
See below
|
Defines the animation for this specific POI. If defined, it overrides the default animations definition on layer level. |
Simple appearance animations:
There are two ways to use animations API: using Layar's simple appearance animations or defining your own animations. With the simple appearance animations all that is required is a single keyword: drop, grow or spin. Using this keyword as the value for the animations property is all that is necessary to define a meaningful appearance animation (i.e. when a POI is loaded). These are the descriptions of the simple appearance animations:
Key |
Example |
Description |
drop |
"animations":"drop" |
The POI drops from the sky |
grow |
"animations":"grow" |
The POI appears growing from nothing into its actual size |
spin |
"animations":"spin" |
The POI spins like a top when it appears, then slows down until it stops |
Full API animation:
Alternatively, Layar provides a fully customizable animations API. It is possible to precisely configure animation behavior when creating, updating and deleting POIs and when they receive focus or become clicked. The full animation API is defined below.
- Animation events object definition:
Key |
Value |
Example |
Description |
onCreate |
array of animation objects |
See below |
Triggered when the object is first loaded in the AR view. Can be used to make an appearance animation for the POIs, like growing, fading in, etc. |
onUpdate |
array of animation objects |
See below |
Triggered when a POI is updated in the POI response. This can be used to animate a transition to the new POI state. |
onDelete |
array of animation objects |
See below |
Triggered when a POI is removed from the AR view. ("deletedHotspots" - trigger this animation, this parameter is defined in API v4.0) |
onFocus |
array of animation objects |
See below |
Triggered when a POI gets focus. This can be used to highlight the focus, for example by making it grow in size or pulsate. |
onClick |
array of animation objects |
See below |
Triggered when the user taps on the POI. For 3D POIs, the entire model's bounding box captures the tap. |
NOTE: Clearing a set of animations for an event can be done by setting the respective event to null or an empty array [ ]. When updating POIs, the new value for animations will be used to determine the onUpdate animation.
- Animation object definition:
Key |
Optional/Mandatory |
Value |
Example |
Description |
type * |
Mandatory |
string |
"type": "translate"
|
The animation type, e.g. rotation, scale, translation, etc. For a full list of supported animations and their supported parameters, check the animation type list.
|
length * |
Mandatory |
integer |
"length": 5000
|
Animation duration in milliseconds |
delay |
Optional |
integer |
"delay": 50
|
Delay in milliseconds before starting the animation. This is the duration between "from" status and "to" status. In this example, the animation will be applied to "from", and stays at "from" status for 50 milliseconds, then applies to "to" status. Default is 0ms.
|
interpolation |
Optional |
string |
"interpolation": "accelerate"
|
The interpolation to use in the animation. See interpolation types. Default is "linear" |
interpolationParam |
Optional
|
decimal |
"interpolationParam": 1.0
|
Parameter for the interpolation algorithm. See interpolation types.
|
persist |
Optional |
boolean |
"persist": true
|
Apply the end state of the animation to the POI state, e.g. a translation animation updates the actual POI location. Default is false.
|
repeat |
Optional |
boolean |
"repeat": false
|
Specifies whether the animation is repeated in a loop. Not allowed to set to "true" for onDelete and onUpdate animations. When used for onCreate, the animation repeats the entire lifetime of the POI. When used for onFocus/onClick, the animation repeats until the POI loses focus. Default is false.
|
from |
Optional
|
decimal |
"from": 0.0
|
Depends on animation type. Default is to let the animation use the currently set POI state, except for onUpdate animations where the previous value for the POI is used. |
to |
Optional |
decimal |
"to": 360.0
|
Depends on animation type. Default is to let the animation use the currently set POI state. |
axis |
Optional |
json dictionary |
"axis": { "y": 0, "x": 0, "z": 1 }
|
Axis that this animation resolves around (definition below). The exact meaning of the axis parameter depends on animation type |
NOTE: When using the onUpdate event to trigger animations, it is easy to create transitions by leaving out the "from" and "to" parameters. The Layar client will default these by filling in the old and new values for the updated POI. This works for rotation (using the "angle" parameter of the object), scale (using the "scale" parameter) and translate (using "lat", "lon", "transform.translate" and "alt").
Type |
Description |
From/to meaning |
From/to default |
Meaning of "axis" parameter |
Default value for axis |
rotate |
Animate the rotation around a specific axis. Rotation follows the right-hand rule |
Angle of rotation in degrees |
- |
Axis around which the rotation occurs |
x=0, y=0, z=1 |
scale |
Animate the scale of the POI. This can also be used to let buildings grow out of the ground by limiting the scale to the z-axis. |
Scaling factor. A negative scaling factor means the object is mirrored |
- |
Ratio of how much the scale factor affects each primary axis |
x=1, y=1, z=1 |
translate |
Animate movement of a POI. |
Scale multiplier for the translation |
from=0, to=1 |
Translation vector in meters |
x=0, y=0, z=0
|
NOTE: Rotate and translate animations are performed relative to the global coordinate system. This means that the order of rotation and translation are not relevant. A translation of { "x": 10, "y": 0, "z": 0 } relocates the POI 10 meters eastwards, even if it was preceded by a rotation of 90 degrees over an { "x": 0, "y": 0, "z": 1 } axis. Scale transformations are relative the the POI's coordinate system so that rotating an object with a non-uniform scaling vector does not morph the object during rotation.
The interpolation types available in Layar are based on the interpolation types available in the Android SDK.
Type of interpolation |
Description |
Meaning of interpolationParam value |
linear |
The rate of change of the animation is constant, i.e. stays the same for the entire duration of the animation. |
- |
accelerateDecelerate |
The rate of change of the animation starts slow but accelerates until halfway the animation, after when it decelerates back to slow. |
- |
accelerate |
The rate of change of the animation starts out slowly and and then speeds up |
factor Degree to which the animation should be eased. Setting the factor value to 1.0f produces a v = t^2 parabola characteristic. Increasing this value above 1.0f exaggerates the ease-in effect (i.e. the effect starts slower and ends faster)
|
decelerate |
The rate of change of the animation starts out quickly and and then slows down |
factor Degree to which the animation should be eased. Setting the factor value to 1.0f produces a v = - t^2 parabola characteristic. Increasing this value above 1.0f exaggerates the ease-out effect (i.e. the effect starts faster and ends slower) |
bounce |
An interpolator where the change 'bounces' at the end, i.e. the animation is slightly reversed when it reaches it's final state and then applied again. |
- |
cycle |
Repeats the animation for a specified number of cycles. The rate of change follows a sinusoidal pattern. |
cycles Number of cycles in the interpolation |
anticipateOvershoot |
The animation starts out 'in reverse', then accelerates in the specified direction, then decelerates, overshoots the target value, reverse again and finally goes to the specified value. |
tension Amount of anticipation/overshoot. When tension equals 0.0f, there is no anticipation/overshoot and the interpolator becomes an acceleration/deceleration interpolator. |
anticipate |
The animation starts out 'in reverse' then accelerates in the specified direction towards the specified "to" value. |
tension Amount of anticipation. When tension equals 0.0f, there is no anticipation and the animation is the same as that of an acceleration interpolator. |
overshoot |
The animation starts out fast, overshoots the specified "to" value then reverses to reach the specified "to" value |
tension Amount of overshoot. When tension equals 0.0f, there is no overshoot and the animation is the same as that of a deceleration interpolator. |
Key |
Optional/Mandatory |
Value |
Example |
Description |
x * |
Mandatory |
decimal |
"x": 0
|
X component of the axis or vector |
y * |
Mandatory |
decimal |
"y": 0
|
Y component of the axis or vector |
z * |
Mandatory |
decimal |
"z": 1
|
Z component of the axis or vector |
Layar's coordinate system is organized as follows:
- The positive X axis points east
- The positive Y axis points north
- The positive Z axis points up (away from the Earth's core)
For Vision POIs, the coordinate system looks like:
Animation API Example (API v6.0):
{
"layer": "animationex01",
"hotspots": [
{
"id": 0,
"anchor": {
"geolocation": {
"lat": 52.3729,
"lon": 4.9357
}
},
"text": {
"title": "bamboo",
"description": "some description",
"footnote": "powered by Layar"
},
"object": {
"url": "http://example.com/full_model.l3d",
"contentType": "model/vnd.layar.l3d",
"reducedURL": "http://example.com/reduced_model.l3d",
"size": 2
},
"transform": {
"rotate": {
"rel": false,
"axis": {
"x": 0,
"y": 0,
"z": 1
},
"angle": 0
},
"translate": {
"x": 0,
"y": -0.075,
"z": 0
},
"scale": 0.01
},
"animations": { // "animations" on a POI level. This overwrites the "animations" parameter defined on the layer level.
"onClick": [ // "onClick" event triggers the following animation.
// The object size is scaled by a decimal factor from 0 to 2 on X, Y and Z axises.
{
"interpolation": "overshoot",
"to": 2,
"length": 2000,
"from": 0,
"delay": 0,
"repeat": false,
"type": "scale",
"axis": {
"y": 1,
"x": 1,
"z": 1
},
"persist": true
},
// The object is relocated 60m northwards ( Y axis)
{
"interpolation": "accelerateDecelerate",
"to": 60,
"length": 1000,
"from": 0,
"delay": 500,
"repeat": false,
"type": "translate",
"axis": {
"y": 1,
"x": 0,
"z": 0
},
"persist": true
}
]
}
}
],
"animations": { // Layer level animations.
"onCreate": [ // The object size is scaled by a decimal factor from 0 to 2 on X, Y and Z axises.
{
"interpolation": "decelerate",
"interpolationParam": 1.0,
"to": 2,
"length": 10000,
"from": 0,
"delay": 0,
"repeat": false,
"type": "scale",
"axis": {
"y": 1,
"x": 1,
"z": 1
},
"persist": true
}
],
"onUpdate": [ // When the layer is updated, translate the POI from its current location to its new position (for instance, lat, lon).
{
"length": 2000,
"type": "translate"
}
],
"onDelete": [ // When the POI is deleted, its size will be scaled from 1 to 0 on all X, Y, Z axises.
{
"to": 0,
"length": 10000,
"from": 1,
"type": "scale",
"axis": {
"y": 1,
"x": 1,
"z": 1
},
"persist": true
}
],
"onFocus": [ // Rotate the object around its Z-axis repeatedly.
{
"to": 360,
"length": 5000,
"from": 0,
"repeat": true,
"type": "rotate"
}
],
"onClick": [ // Launch the object along Z-axis from 0m to 100m.
{
"axis": {
"y": 0,
"x": 0,
"z": 5
},
"interpolation": "accelerate",
"length": 5000,
"to": 20,
"interpolationParam": 1,
"from": 0,
"type": "translate",
"repeat": false
}
]
},
"refreshInterval": 10,
"fullRefresh": false,
"errorCode": 0,
"errorString": "OK"
}
Comments (0)
You don't have permission to comment on this page.