Wikitude ARchitect v2.0 API Documentation

Wikitude ARchitect > AR > AnimatedImageDrawable

Class AnimatedImageDrawable - extends ImageDrawable

AnimatedImageDrawable allows to created animated images using sprite sheets.

A sprite sheet is an image file which contains all key frame images required for the animation. The key frame image size (width and height) is passed at creation time and must be equal for all key frame images. Key frame images will be managed in an array, starting with entry 0. The key frame image array will be filled from left to right, row by row. Any partly filled key frames at the edge of the sprites sheet will be ignored. The default anchor settings for an AnimatedImageDrawable are as follows:
On creation, setup parameters can be passed to customize the properties of the AnimatedImageDrawable.

//create a new AnimatedImageDrawable from an ImageResource and pass some setup parameters
var animatedImageDrawable = new AR.AnimatedImageDrawable(imageResource, 5, 40, 50 {
enabled : false,
offsetX : 1,
rotation : 190
// start playing the Animation, with keyframes 0-4, each keyframe is shown 10 miliseconds, and the animation is looped 10 times
animatedImageDrawable.animate([0, 1, 2, 3, 4], 10, 10);


AnimatedImageDrawable ( imageResource , height , keyFrameWidth , keyFrameHeight , options )
imageResource <ImageResource> The imageResource representing the sprite sheet which is used for the AnimatedImageDrawable.
height <float> The height of the AnimatedImageDrawable, in SDUs. The width is set at creation time, width is calculated according to the aspect ratio of the underlying key frame images.
keyFrameWidth <int> The width of the key frame images in the sprite sheet, in pixels.
keyFrameHeight <int> The height of the key frame images in the sprite sheet, in pixels.
options <object> Setup-Parameters to customize additional object properties.

Accepted options-properties are
  • keyFrame
  • : The start keyframe. If not specified, the value defaults to 0.
  • enabled
  • horizontalAnchor
  • verticalAnchor
  • offsetX
  • offsetY
  • zOrder
  • rotation
  • scale
  • opacity
  • onClick
  • onFinish
  • roll
  • tilt
  • heading

Properties inherited from ImageDrawable:

Properties inherited from ARchitectObject:



void animate ( keyFramePos , duration , loopTimes )
Starts the animation based on the key frames provided.
keyFramePos <Array(int)> The keyframes that will be played one by one. The numbers in the array will be clamped to the available keyframes in the key frame image array.
duration <int> The duration of each keyframe in milliseconds.
loopTimes <int> Defines how often the animation should be played in a row. A negative value indicates an infinite looping.
The parameter is optional and defaults to 1.
Returns: void


void onFinish ( )
The trigger will fire when the AnimatedImageDrawable finishes.

The trigger is null by default, and will thus result in no action executed when the trigger fires. A developer can add custom functionality by assigning a custom function to onFinish.
Returns: void


void setKeyFrame ( keyFramePos )
Stops any animation and sets the content of the AnimatedImageDrawable to a still image that is at position keyFrameNr in the key frame image array. The keyFramePos will be clamped to valid positions in the key frame image array in case the number exceeds the available frames.
keyFramePos <int> The position of the key frame in the array.
Returns: void

Methods inherited from Drawable2D:

Methods inherited from ARchitectObject:

Methods inherited from Drawable:

Copyright © 2013 Wikitude GmbH. All rights reserved.