Wikitude SDK API Reference

API Docs for: 4.0.2
Show:

PropertyAnimation Class

Extends Animation
Module: AR

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.

Example:
//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):

ConstantString Representation
LINEARlinear
EASE_IN_QUADeaseInQuad
EASE_OUT_QUADeaseOutQuad
EASE_IN_OUT_QUADeaseInOutQuad
EASE_OUT_IN_QUADeaseOutInQuad
EASE_IN_CUBICeaseInCubic
EASE_OUT_CUBICeaseOutCubic
EASE_IN_OUT_CUBICeaseInOutCubic
EASE_OUT_IN_CUBICeaseOutInCubic
EASE_IN_QUATeaseInQuat
EASE_OUT_QUATeaseOutQuat
EASE_IN_OUT_QUATeaseInOutQuat
EASE_OUT_IN_QUATeaseOutInQuat
EASE_IN_QUINTeaseInQuint
EASE_OUT_QUINTeaseOutQuint
EASE_IN_OUT_QUINTeaseInOutQuint
EASE_OUT_IN_QUINTeaseOutInQuint
EASE_IN_ELASTICeaseInElastic
EASE_OUT_ELASTICeaseOutElastic
EASE_IN_OUT_ELASTICeaseInOutElastic
EASE_OUT_IN_ELASTICeaseOutInElastic
EASE_IN_BACKeaseInBack
EASE_OUT_BACKeaseOutBack
EASE_IN_OUT_BACKeaseInOutBack
EASE_OUT_IN_BACKeaseOutInBack
EASE_IN_SINEeaseInSine
EASE_OUT_SINEeaseOutSine
EASE_IN_OUT_SINEeaseInOutSine
EASE_OUT_IN_SINEeaseOutInSine
EASE_IN_EXPOeaseInExpo
EASE_OUT_EXPOeaseOutExpo
EASE_IN_OUT_EXPOeaseInOutExpo
EASE_OUT_IN_EXPOeaseOutInExpo
EASE_IN_CIRCeaseInCirc
EASE_OUT_CIRCeaseOutCirc
EASE_IN_OUT_CIRCeaseInOutCirc
EASE_OUT_IN_CIRCeaseOutInCirc
EASE_IN_BOUNCEeaseInBounce
EASE_OUT_BOUNCEeaseOutBounce
EASE_IN_OUT_BOUNCEeaseInOutBounce
EASE_OUT_IN_BOUNCEeaseOutInBounce
EASE_IN_CURVEeaseInCurve
EASE_OUT_CURVEeaseOutCurve
EASE_SIN_CURVEeaseSinCurve
EASE_COS_CURVEeaseCosineCurve

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.

Example:
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
};

Constructor

PropertyAnimation

(
  • target
  • property
  • start
  • end
  • duration
  • easingCurve
  • options
)

Parameters:

  • target ARchitectObject

    The object which holds the property that will be animated. Must be an ARchitectObject.

  • property String

    The object's property name that will be animated.

  • start Number

    The value the PropertyAnimation will start with. If null, the current value of the property will be used. Remark: In case null is set as start value, and the PropertyAnimation loops more than once, the PropertyAnimation will not reset the value after it has completed the first run, and the value won't change in the following runs. To reset the value after each run, supply the property's current value as start value.

  • end Number

    The value the PropertyAnimation will end with. The value must be non-null.

  • duration Number

    The duration of the PropertyAnimation, in milliseconds. The value must be non-negative and a whole number.

  • easingCurve (defaults to {type:"linear"}) Object optional

    an easing curve describing the nature of the animation (see description above for details). If the easingCurve parameter is omitted, set to null or undefined or does not contain a type property, the easingCurve parameter will default to a linear easing curve. The easing curve can be parametrized with the following values:

  • options Object

    Setup-Parameters to customize additional object properties.

    Accepted options-properties are

Item Index

Methods

Properties

Events

Methods

destroy

()

Inherited from ARchitectObject

Destroys the object.

isRunning

() Boolean

Inherited from Animation

Checks if the Animation is currently running.

Returns:

Boolean:

true if the Animation is currently running, false if the Animation is currently not running.

pause

()

Inherited from Animation

Pauses the Animation.
If the PropertyAnimation is currently not running, the call will have no effect.

resume

()

Inherited from Animation

Resumes the Animation.
If the PropertyAnimation is currently running, the call has no effect. Otherwise, it will either be resumed from the position where it was last paused, or will start from the beginning if it was not paused.

start

(
  • loopTimes
)

Inherited from Animation

Immediately starts the Animation.

Parameters:

  • loopTimes (defaults to 1) Number optional

    Defines how often the animation should be played. A negative value indicates an infinite looping. Must be a whole number.

stop

()

Inherited from Animation

Immediately stops the Animation. Allows manual stopping of the Animation before the animation would automatically stop. The onFinish-trigger will not be fired after a manual stopping.

Properties

destroyed

Boolean

Inherited from ARchitectObject

Indicates if the object has already been destroyed.

Events

onFinish

Inherited from Animation

The trigger will fire when the Animation 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.

onStart

Inherited from Animation

The trigger will fire right before the Animation starts.

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