Link Search Menu Expand Document

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:now() + 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:now() 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:now()+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