PropertyAnimation Class
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 };
Constructor
PropertyAnimation
-
target
-
property
-
start
-
end
-
duration
-
easingCurve
-
options
Parameters:
-
target
ARchitectObjectThe object which holds the property that will be animated. Must be an ARchitectObject.
-
property
StringThe object's property name that will be animated.
-
start
NumberThe 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
NumberThe value the PropertyAnimation will end with. The value must be non-null.
-
duration
NumberThe duration of the PropertyAnimation, in milliseconds. The value must be non-negative and a whole number.
-
easingCurve
(defaults to{type:"linear"}
) Object optionalan 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
ObjectSetup-Parameters to customize additional object properties.
Accepted options-properties are
Item Index
Properties
Methods
destroy
()
Destroys the object.
isRunning
()
Boolean
Checks if the Animation is currently running.
Returns:
true if the Animation is currently running, false if the Animation is currently not running.
pause
()
Pauses the Animation.
If the PropertyAnimation is currently not running, the call will have no effect.
resume
()
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
Immediately starts the Animation.
Parameters:
-
loopTimes
(defaults to1
) Number optionalDefines how often the animation should be played. A negative value indicates an infinite looping. Must be a whole number.
stop
()
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
Events
onFinish
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
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.