Wikitude ARchitect v2.0 API Documentation

Property Animations allow constant changes to a numeric value/property of an object, dependent on start-value, end-value and the duration of the animation.

Animations can be seen as functions defining the progress of the change on the value. The Animation can be parametrized via easing curves.

//We want to animate a GeoLocation to move 100 meters up in altitude
// over a period of 10 seconds to simulate an elevator
var elevatorAnimation = new AR.PropertyAnimation(
  geoLocation1, //the object geoLocation1 holds the animated property
  "altitude", //the property altitude will be animated
  500, //the start value of the animation is 500 meters
  600, //the resulting value of the animation is 600 meters
  10000, //the duration of the elevator climb is 10 seconds (10000 miliseconds)
  {type: AR.CONST.EASING_CURVE_TYPE.EASE_IN_OUT_QUAD}, //easing curve to simulate acceleration and deceleration
  {onFinish : beepSound.play} //when finished, play a beep sound that elevator doors will now open
);

Easing Curves describe in which way a PropertyAnimation will change the animated property's value from the start- to the end-value. A good description of various Easing Curves, including the ones supported by the Wikitude ARchitect, is described here.

The following Easing Curve types are defined (see AR.CONST.EASING_CURVE_TYPE):

Constant	String Representation
LINEAR	linear
EASE_IN_QUAD	easeInQuad
EASE_OUT_QUAD	easeOutQuad
EASE_IN_OUT_QUAD	easeInOutQuad
EASE_OUT_IN_QUAD	easeOutInQuad
EASE_IN_CUBIC	easeInCubic
EASE_OUT_CUBIC	easeOutCubic
EASE_IN_OUT_CUBIC	easeInOutCubic
EASE_OUT_IN_CUBIC	easeOutInCubic
EASE_IN_QUAT	easeInQuat
EASE_OUT_QUAT	easeOutQuat
EASE_IN_OUT_QUAT	easeInOutQuat
EASE_OUT_IN_QUAT	easeOutInQuat
EASE_IN_QUINT	easeInQuint
EASE_OUT_QUINT	easeOutQuint
EASE_IN_OUT_QUINT	easeInOutQuint
EASE_OUT_IN_QUINT	easeOutInQuint
EASE_IN_ELASTIC	easeInElastic
EASE_OUT_ELASTIC	easeOutElastic
EASE_IN_OUT_ELASTIC	easeInOutElastic
EASE_OUT_IN_ELASTIC	easeOutInElastic
EASE_IN_BACK	easeInBack
EASE_OUT_BACK	easeOutBack
EASE_IN_OUT_BACK	easeInOutBack
EASE_OUT_IN_BACK	easeOutInBack
EASE_IN_SINE	easeInSine
EASE_OUT_SINE	easeOutSine
EASE_IN_OUT_SINE	easeInOutSine
EASE_OUT_IN_SINE	easeOutInSine
EASE_IN_EXPO	easeInExpo
EASE_OUT_EXPO	easeOutExpo
EASE_IN_OUT_EXPO	easeInOutExpo
EASE_OUT_IN_EXPO	easeOutInExpo
EASE_IN_CIRC	easeInCirc
EASE_OUT_CIRC	easeOutCirc
EASE_IN_OUT_CIRC	easeInOutCirc
EASE_OUT_IN_CIRC	easeOutInCirc
EASE_IN_BOUNCE	easeInBounce
EASE_OUT_BOUNCE	easeOutBounce
EASE_IN_OUT_BOUNCE	easeInOutBounce
EASE_OUT_IN_BOUNCE	easeOutInBounce
EASE_IN_CURVE	easeInCurve
EASE_OUT_CURVE	easeOutCurve
EASE_SIN_CURVE	easeSinCurve
EASE_COS_CURVE	easeCosineCurve

Certain Easing Curves can be parametrized with additional values, such as amplitude, period and overshoot.
Amplitude is valid for all easing curves with the type description ending on ELASTIC or BOUNCE (like EASE_IN_ELASTIC or EASE_IN_BOUNCE), and will be ignored for all others.
Overshoot is valid for all easing curves with the type description ending on BACK (like EASE_IN_BACK), and will be ignored for all others.
Period is valid for all easing curves with the type description ending on BOUNCE (like EASE_IN_BOUNCE), and will be ignored for all others.

var easingCurve = {
  type : AR.CONST.EASING_CURVE_TYPE.EASE_IN_BACK,
  overshoot : 1.70158 //results in a 10% overshoot
};

The same Easing Curve can be instanziated by writing

var easingCurve = {
  type : "easeInBack",
  overshoot : 1.70158 //results in a 10% overshoot
};