Class EditorAnimation

The EditorAnimation can be used to start, stop and control animations on arbitrary objects. While a common use-case is to animate UIElement types through APIs such as UIElement.animateWithSetter, the class is not limit to those types. Any object can be animated the the EditorAnimation system.

The animations takes a property setter, given either a lamba or as a string that represents a property name on a UIElement and animates it with new values that start at startValue and end at endValue. The values are interpolated according to the defined easingCurve and will take duration seconds to complete. The system guarantees that after duration the value is exactly endValue unless repeating is true or a number, in that case the animation will automatically restart and go back to startValue after duration seconds.

Constructors

  • Parameters

    • options:
          | {
              object: any;
              setter: ((value: any) => void);
          }
          | {
              object: any;
              property: ReflectionProperty;
          }
          | {
              object: any;
              propertyName: string;
          }
          | {
              animation: EditorAnimation;
              object: any;
          }

    Returns EditorAnimation

Properties

_childAnimations: EditorAnimation[]

Child animations if this instance is a compound, or null.

_valueSetter: ((value: any, time: number) => void)

The callback to be called every frame to update the property value.

duration: number

The duration of the animation in seconds. If repeating is true, the animation will have a period of this many seconds; if false, the animation will stop after said amount of time has elapsed.

Changing this value while the animation is running is allowed, but might cause large jumps in the interpolated value in the following frame.

easingCurve: Const<EasingCurve>

A curve that determines how the startValue and endValue will be interpolated.

Changing this value while the animation is running is allowed, but might cause large jumps in the interpolated value in the following frame.

endValue: any

The ending value of the animation. This is the value the animation has after finishing.

Changing this value while the animation is running is allowed, but might cause large jumps in the interpolated value in the following frame.

finished: boolean

A boolean flag that indicates if the animation has finished.

playCount: number

The number of times the animation was played.

repeating: number | boolean

Determines if the animation repeats after duration seconds or if it stops once the animation is finished.

Changing this value while the animation is running is allowed and setting it to false will cause the animation to stop once the current iteration ends.

The value can be a number or a boolean. If a number is set, it indicates the number of times the animation will be repeated. E.g. setting repeating to 1 will play the animation twice. Setting repeating to true will repeat the animation forever.

started: boolean

A boolean flag that indicates if the animation has started.

startTime: number

The time point, in seconds, in which the animation started.

startValue: any

The starting value of the animation. This is the value the animation has immediately after starting.

Changing this value while the animation is running is allowed, but might cause large jumps in the interpolated value in the following frame.

Accessors

  • get isCompound(): boolean
  • Determines if this instance is a compound animation.

    Returns boolean

  • get object(): any
  • Gets the object.

    Returns any

    This locks the weak object and returns the result.

  • get running(): boolean
  • Determines if the animation is currently running, that is, it is started but hasn't finished yet. Repeatinganimations are always running unless manually stopped by callingstop`.

    Returns boolean

Methods

  • Adds a child animation.

    Parameters

    Returns void

  • Internal function that performs interpolation between the startValue, endValue and a factor. This effectively calls MathEx.lerp by casting startValue and endValue to their appropriate type and returns another object of the same type.

    Parameters

    • factor: number

      Interpolation factor in specified range.

    Returns any

    Interpolated value with an object of the same type as startValue and endValue

    If startValue and endValue types don't match or have an unsupported type.

  • Starts the animation. Must be called before an animation is submitted to the manager.

    Returns void

  • Stops a running animation. If the animation is not running, this is a no-op.

    Returns void

  • Appends an animation to this instance by creating compound animation that contains both animations. If this instance is already a compound animation, it will be reused.

    Parameters

    Returns EditorAnimation

    a compound animation that contains both animations.

    An animation inside a compound cannot repeat. If the animation is set to repeat, it will be set to not repeat.

  • Appends an action to this instance by creating compound animation that contains both animations. If this instance is already a compound animation, it will be reused.

    Parameters

    • onTriggered: (() => void)

      The action to trigger.

        • (): void
        • Returns void

    Returns EditorAnimation

    a compound animation that contains both animations.

    An animation inside a compound cannot repeat. If the animation is set to repeat, it will be set to not repeat.

  • Internal method called by the UIAnimationManager every frame while the animation is running. This method is responsible for interpolating the values in the animation and updating the UI element data.

    Parameters

    • time: number

      The current absolute time.

    Returns boolean

    true If the animation finished

  • Creates an animation that executes an action lambda once the delay elapsed.

    Parameters

    • object: object

      The target object.

    • action: (() => void)

      The action to execute.

        • (): void
        • Returns void

    • Optionaldelay: number

      The delay until the action is executed. Defaults to no delay.

    • Optionalrepeating: number | boolean

      Whether the animation should repeat or not. Defaults to false. Set to true, to repeat forever. Set to false, to never repeat. Set to a number, to indicate the repeat count.

    Returns EditorAnimation

    The created animation.

  • Animates a property of the object. The animation is automatically started.

    Type Parameters

    • T

      The type of property to be animated.

    Parameters

    • object: object

      The target object.

    • propertyName: string

      The name of the property to be animated on the UIElement.

    • starting: T

      The starting value of the property.

    • ending: T

      The ending value of the property.

    • Optionalduration: number

      The animation duration in seconds. Defaults to 1 seconds.

    • OptionaleasingCurve: Const<EasingCurve>

      The easing curve to be used. Defaults to

    • Optionalrepeating: number | boolean

      Whether the animation should repeat or not. Defaults to false. Set to true, to repeat forever. Set to false, to never repeat. Set to a number, to indicate the repeat count.

    Returns EditorAnimation

    The created animation.

    EasingCurve.inOutQuadratic.

  • Animates a property of the UIElement using a generic lambda function. The animation is automatically started.

    Type Parameters

    • T

    Parameters

    • object: object

      The target object.

    • setter: ((value: T) => void)

      The lambda that is called when the value is updated. The lambda should be used to assign the value on the u

        • (value): void
        • Parameters

          • value: T

          Returns void

    • starting: T

      The starting value of the property.

    • ending: T

      The ending value of the property.

    • Optionalduration: number

      The animation duration in seconds. Defaults to 1 seconds.

    • OptionaleasingCurve: Const<EasingCurve>

      The easing curve to be used. Defaults to

    • Optionalrepeating: number | boolean

      Whether the animation should repeat or not. Defaults to false. Set to true, to repeat forever. Set to false, to never repeat. Set to a number, to indicate the repeat count.

    Returns EditorAnimation

    The created animation.

    EasingCurve.inOutQuadratic.

  • Creates an animation that takes delay seconds to execute.

    Parameters

    • object: object

      The target object.

    • delay: number

      The delay in seconds.

    Returns EditorAnimation

    The created animation.

    This animation is usedful when creating compound animations that are chained together by calls to then. This is helpful to create an animation that performs an action, waits and performs another action.

  • Unregisters all running animations for the object.

    Parameters

    • object: any

    Returns number

    The number of animations that were unregistered.

Events

onAnimationStart: Event<[], void>

An event triggered whenever the animation starts.

onAnimationRepeat: Event<[], void>

An event triggered whenever the animation repeats. Only triggered if repeating is true.

onAnimationFinished: Event<[], void>

An event triggered whenever the animation finishes.