PropertyAnimation

PropertyAnimation describes the animation of a field in a component in an entity.

It can be any field that is numeric, 4x4 matrix, vec3 or a rotation (as an angle-axis as four numbers).

Use View:addPropertyAnimation to apply and activate the animation.

Example usage:

       self.logo:addPropertyAnimation(ui.PropertyAnimation{
          path= "transform.matrix.rotation.y",
          start_at = self.app:serverTime() + 1.0,
          from= -0.2,
          to=   0.2,
          duration = 2.0,
          repeats= true,
          autoreverses= true,
          easing= "elasticOut",
        })

Methods

propertyanimation:setPath (path)

You describe the property to be animated by setting the path to the key path of the property.

For example, to change the alpha field (fourth field) of the color property of the material component, use the path material.color.3 (0-indexed).

Matrices also have some magical computed properties. You can access rotation, scale and translation of a matrix to directly set that attribute of the matrix. You can also dive into the specific setting for the x, y or z axies of each of those. For example, to rotate around y, you can animate transform.matrix.rotation.y. In that case, the “from” and “to” values can be regular numbers.

Arguments

Name	Type	Description
path	string	The keypath to the property to animate

Returns

Nothing

propertyanimation:setFrom (from)

The value to animate from. Can be a number, matrix (list of 16 numbers), vector (list of 3 numbers) or rotation (list of 4 numbers: angle, and the x y z of the axis). It MUST be the same kind of value as the property we’re animating (see setPath).

Arguments

Name	Type	Description
from	number	mat4	vec3	{a,ax,ay,az}	Value to animate from

Returns

Nothing

propertyanimation:setTo (to)

The value to animate to. See setFrom.

Arguments

Name	Type	Description
to	number	mat4	vec3	{a,ax,ay,az}	Value to animate to

Returns

Nothing

propertyanimation:setStartAt (start_at)

The time at which to start the animation. Use App:serverTime() to get the current time, and use offsets from that time to get time in the future. To start an animation in four seconds, use myview.app:serverTime()+4.

Arguments

Name	Type	Description
start_at	number	Server time at which to start the animation

Returns

Nothing

propertyanimation:setDuration (duration)

The number of seconds to animate for, in seconds.

After the time start_at + duration has elapsed, the animation is automatically removed, unless it’s a repeating animation.

Arguments

Name	Type	Description
duration	number	Duration of animation in seconds

Returns

Nothing

propertyanimation:setEasing (easing)

Set the easing curve used to animate along. The default is linear, which means going in a straight line from from to to. This usually looks very stiff and robotic, and is discouraged. Use one of these easing algorithms instead:

linear
quadInOut
quadIn
quadOut
bounceInOut
bounceIn
bounceOut
backInOut
backIn
backOut
sineInOut
sineIn
sineOut
cubicInOut
cubicIn
cubicOut
quartInOut
quartIn
quartOut
quintInOut
quintIn
quintOut
elasticInOut
elasticIn
elasticOut
circularInOut
circularIn
circularOut
expInOut
expIn
expOut

Arguments

Name	Type	Description
easing	string	Name of the easing algorithm to use

Returns

Nothing

propertyanimation:setRepeats (repeats)

Whether this animation restarts plays again immediately after finishing.

Repeating animations are never removed automatically.

Arguments

Name	Type	Description
repeats	bool	Whether to repeat

Returns

Nothing

propertyanimation:setAutoreverses (autoreverses)

For repeating animations: Whether to play this animation back in reverse after each time it has been played front-to-back.

Arguments

Name	Type	Description
autoreverses	bool	Whether to autoreverse

Returns

Nothing

propertyanimation:removeFromView (callback)

Asks server to stop the animation and remove it

Arguments

Name	Type	Description
callback	???

Returns

Nothing