| 
  • If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • Get control of your email attachments. Connect all your Gmail accounts and in less than 2 minutes, Dokkio will automatically organize your file attachments. You can also connect Dokkio to Drive, Dropbox, and Slack. Sign up for free.

View
 

animation API

Page history last edited by xuan wang 8 years, 5 months ago

 

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.

 

  • Main JSON Response

 

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".

 

  • Hotspot Object

 

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").

 

  • Animation types

 

 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.

 

 

  • Interpolation types

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.

 

  • Axis object definition:

 

 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.