API
Options
All
  • Public
  • Public/Protected
  • All
Menu

Class Animation

Class used to store any kind of animation

Hierarchy

  • Animation

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

  • new Animation(name: string, targetProperty: string, framePerSecond: number, dataType: number, loopMode?: number | undefined, enableBlending?: boolean | undefined): Animation

  • Initializes the animation

    Parameters

    • name: string

      Name of the animation

    • targetProperty: string

      Property to animate

    • framePerSecond: number

      The frames per second of the animation

    • dataType: number

      The data type of the animation

    • Optional loopMode: number | undefined

      The loop mode of the animation

    • Optional enableBlending: boolean | undefined

      Specifies if blending should be enabled

    Returns Animation

Properties

blendingSpeedSearch playground for blendingSpeed

blendingSpeed: number

Stores the blending speed of the animation

dataTypeSearch playground for dataType

dataType: number

The data type of the animation

Optional enableBlendingSearch playground for enableBlending

enableBlending: boolean | undefined

Specifies if blending should be enabled

framePerSecondSearch playground for framePerSecond

framePerSecond: number

The frames per second of the animation

Optional loopModeSearch playground for loopMode

loopMode: number | undefined

The loop mode of the animation

nameSearch playground for name

name: string

Name of the animation

snippetIdSearch playground for snippetId

snippetId: string

Snippet ID if the animation was created from the snippet server

targetPropertySearch playground for targetProperty

targetProperty: string

Property to animate

targetPropertyPathSearch playground for targetPropertyPath

targetPropertyPath: string[]

Stores an array of target property paths

uniqueIdSearch playground for uniqueId

uniqueId: number

Gets or sets the unique id of the animation (the uniqueness is solely among other animations)

Static Readonly ANIMATIONLOOPMODE_CONSTANTSearch playground for ANIMATIONLOOPMODE_CONSTANT

ANIMATIONLOOPMODE_CONSTANT: 2 = 2

Constant Loop Mode

Static Readonly ANIMATIONLOOPMODE_CYCLESearch playground for ANIMATIONLOOPMODE_CYCLE

ANIMATIONLOOPMODE_CYCLE: 1 = 1

Cycle Loop Mode

Static Readonly ANIMATIONLOOPMODE_RELATIVESearch playground for ANIMATIONLOOPMODE_RELATIVE

ANIMATIONLOOPMODE_RELATIVE: 0 = 0

Relative Loop Mode

Static Readonly ANIMATIONTYPE_COLOR3Search playground for ANIMATIONTYPE_COLOR3

ANIMATIONTYPE_COLOR3: 4 = 4

Color3 animation type

Static Readonly ANIMATIONTYPE_COLOR4Search playground for ANIMATIONTYPE_COLOR4

ANIMATIONTYPE_COLOR4: 7 = 7

Color3 animation type

Static Readonly ANIMATIONTYPE_FLOATSearch playground for ANIMATIONTYPE_FLOAT

ANIMATIONTYPE_FLOAT: 0 = 0

Float animation type

Static Readonly ANIMATIONTYPE_MATRIXSearch playground for ANIMATIONTYPE_MATRIX

ANIMATIONTYPE_MATRIX: 3 = 3

Matrix animation type

Static Readonly ANIMATIONTYPE_QUATERNIONSearch playground for ANIMATIONTYPE_QUATERNION

ANIMATIONTYPE_QUATERNION: 2 = 2

Quaternion animation type

Static Readonly ANIMATIONTYPE_SIZESearch playground for ANIMATIONTYPE_SIZE

ANIMATIONTYPE_SIZE: 6 = 6

Size animation type

Static Readonly ANIMATIONTYPE_VECTOR2Search playground for ANIMATIONTYPE_VECTOR2

ANIMATIONTYPE_VECTOR2: 5 = 5

Vector2 animation type

Static Readonly ANIMATIONTYPE_VECTOR3Search playground for ANIMATIONTYPE_VECTOR3

ANIMATIONTYPE_VECTOR3: 1 = 1

Vector3 animation type

Static AllowMatricesInterpolationSearch playground for AllowMatricesInterpolation

AllowMatricesInterpolation: boolean

Use matrix interpolation instead of using direct key value when animating matrices

Static AllowMatrixDecomposeForInterpolationSearch playground for AllowMatrixDecomposeForInterpolation

AllowMatrixDecomposeForInterpolation: boolean

When matrix interpolation is enabled, this boolean forces the system to use Matrix.DecomposeLerp instead of Matrix.Lerp. Interpolation is more precise but slower

Static SnippetUrlSearch playground for SnippetUrl

SnippetUrl: string

Define the Url to load snippets

Accessors

hasRunningRuntimeAnimations

  • get hasRunningRuntimeAnimations(): boolean

  • Specifies if any of the runtime animations are currently running

    Returns boolean

runtimeAnimations

  • Return the array of runtime animations currently using this animation

    Returns RuntimeAnimation[]

Methods

addEventSearch playground for addEvent

  • Add an event to this animation

    Parameters

    Returns void

cloneSearch playground for clone

  • Makes a copy of the animation

    Returns Animation

    Cloned animation

color3InterpolateFunctionSearch playground for color3InterpolateFunction

  • color3InterpolateFunction(startValue: Color3, endValue: Color3, gradient: number): Color3

  • Interpolates a Color3 linearly

    Parameters

    • startValue: Color3

      Start value of the animation curve

    • endValue: Color3

      End value of the animation curve

    • gradient: number

      Scalar amount to interpolate

    Returns Color3

    Interpolated Color3 value

color3InterpolateFunctionWithTangentsSearch playground for color3InterpolateFunctionWithTangents

  • Interpolates a Color3 cubically

    Parameters

    • startValue: Color3

      Start value of the animation curve

    • outTangent: Color3

      End tangent of the animation

    • endValue: Color3

      End value of the animation curve

    • inTangent: Color3

      Start tangent of the animation curve

    • gradient: number

      Scalar amount to interpolate

    Returns Color3

    interpolated value

color4InterpolateFunctionSearch playground for color4InterpolateFunction

  • color4InterpolateFunction(startValue: Color4, endValue: Color4, gradient: number): Color4

  • Interpolates a Color4 linearly

    Parameters

    • startValue: Color4

      Start value of the animation curve

    • endValue: Color4

      End value of the animation curve

    • gradient: number

      Scalar amount to interpolate

    Returns Color4

    Interpolated Color3 value

color4InterpolateFunctionWithTangentsSearch playground for color4InterpolateFunctionWithTangents

  • Interpolates a Color4 cubically

    Parameters

    • startValue: Color4

      Start value of the animation curve

    • outTangent: Color4

      End tangent of the animation

    • endValue: Color4

      End value of the animation curve

    • inTangent: Color4

      Start tangent of the animation curve

    • gradient: number

      Scalar amount to interpolate

    Returns Color4

    interpolated value

createRangeSearch playground for createRange

  • createRange(name: string, from: number, to: number): void

  • Creates an animation range

    Parameters

    • name: string

      Name of the animation range

    • from: number

      Starting frame of the animation range

    • to: number

      Ending frame of the animation

    Returns void

deleteRangeSearch playground for deleteRange

  • deleteRange(name: string, deleteFrames?: boolean): void

  • Deletes an animation range by name

    Parameters

    • name: string

      Name of the animation range to delete

    • Optional deleteFrames: boolean

      Specifies if the key frames for the range should also be deleted (true) or not (false)

    Returns void

evaluateSearch playground for evaluate

  • evaluate(currentFrame: number): any

  • Evaluate the animation value at a given frame

    Parameters

    • currentFrame: number

      defines the frame where we want to evaluate the animation

    Returns any

    the animation value

floatInterpolateFunctionSearch playground for floatInterpolateFunction

  • floatInterpolateFunction(startValue: number, endValue: number, gradient: number): number

  • Interpolates a scalar linearly

    Parameters

    • startValue: number

      Start value of the animation curve

    • endValue: number

      End value of the animation curve

    • gradient: number

      Scalar amount to interpolate

    Returns number

    Interpolated scalar value

floatInterpolateFunctionWithTangentsSearch playground for floatInterpolateFunctionWithTangents

  • floatInterpolateFunctionWithTangents(startValue: number, outTangent: number, endValue: number, inTangent: number, gradient: number): number

  • Interpolates a scalar cubically

    Parameters

    • startValue: number

      Start value of the animation curve

    • outTangent: number

      End tangent of the animation

    • endValue: number

      End value of the animation curve

    • inTangent: number

      Start tangent of the animation curve

    • gradient: number

      Scalar amount to interpolate

    Returns number

    Interpolated scalar value

getEasingFunctionSearch playground for getEasingFunction

  • Gets the easing function of the animation

    Returns Nullable<IEasingFunction>

    Easing function of the animation

getEventsSearch playground for getEvents

  • Retrieves all the events from the animation

    Returns AnimationEvent[]

    Events from the animation

getHighestFrameSearch playground for getHighestFrame

  • getHighestFrame(): number

  • Gets the highest frame rate of the animation

    Returns number

    Highest frame rate of the animation

getKeysSearch playground for getKeys

  • Gets the key frames from the animation

    Returns Array<IAnimationKey>

    The key frames of the animation

getRangeSearch playground for getRange

  • Gets the animation range by name, or null if not defined

    Parameters

    • name: string

      Name of the animation range

    Returns Nullable<AnimationRange>

    Nullable animation range

matrixInterpolateFunctionSearch playground for matrixInterpolateFunction

  • Defines the function to use to interpolate matrices

    Parameters

    • startValue: Matrix

      defines the start matrix

    • endValue: Matrix

      defines the end matrix

    • gradient: number

      defines the gradient between both matrices

    • Optional result: Matrix

      defines an optional target matrix where to store the interpolation

    Returns Matrix

    the interpolated matrix

quaternionInterpolateFunctionSearch playground for quaternionInterpolateFunction

  • Interpolates a quaternion using a spherical linear interpolation

    Parameters

    • startValue: Quaternion

      Start value of the animation curve

    • endValue: Quaternion

      End value of the animation curve

    • gradient: number

      Scalar amount to interpolate

    Returns Quaternion

    Interpolated quaternion value

quaternionInterpolateFunctionWithTangentsSearch playground for quaternionInterpolateFunctionWithTangents

  • Interpolates a quaternion cubically

    Parameters

    • startValue: Quaternion

      Start value of the animation curve

    • outTangent: Quaternion

      End tangent of the animation curve

    • endValue: Quaternion

      End value of the animation curve

    • inTangent: Quaternion

      Start tangent of the animation curve

    • gradient: number

      Scalar amount to interpolate

    Returns Quaternion

    Interpolated quaternion value

removeEventsSearch playground for removeEvents

  • removeEvents(frame: number): void

  • Remove all events found at the given frame

    Parameters

    • frame: number

      The frame to remove events from

    Returns void

serializeSearch playground for serialize

  • serialize(): any

  • Serializes the animation to an object

    Returns any

    Serialized object

setEasingFunctionSearch playground for setEasingFunction

  • Sets the easing function of the animation

    Parameters

    Returns void

setKeysSearch playground for setKeys

  • Sets the key frames of the animation

    Parameters

    Returns void

sizeInterpolateFunctionSearch playground for sizeInterpolateFunction

  • sizeInterpolateFunction(startValue: Size, endValue: Size, gradient: number): Size

  • Interpolates a size linearly

    Parameters

    • startValue: Size

      Start value of the animation curve

    • endValue: Size

      End value of the animation curve

    • gradient: number

      Scalar amount to interpolate

    Returns Size

    Interpolated Size value

toStringSearch playground for toString

  • toString(fullDetails?: boolean): string

  • Converts the animation to a string

    Parameters

    • Optional fullDetails: boolean

      support for multiple levels of logging within scene loading

    Returns string

    String form of the animation

vector2InterpolateFunctionSearch playground for vector2InterpolateFunction

  • Interpolates a Vector2 linearly

    Parameters

    • startValue: Vector2

      Start value of the animation curve

    • endValue: Vector2

      End value of the animation curve

    • gradient: number

      Scalar amount to interpolate (value between 0 and 1)

    Returns Vector2

    Interpolated Vector2 value

vector2InterpolateFunctionWithTangentsSearch playground for vector2InterpolateFunctionWithTangents

  • Interpolates a Vector2 cubically

    Parameters

    • startValue: Vector2

      Start value of the animation curve

    • outTangent: Vector2

      End tangent of the animation

    • endValue: Vector2

      End value of the animation curve

    • inTangent: Vector2

      Start tangent of the animation curve

    • gradient: number

      Scalar amount to interpolate (value between 0 and 1)

    Returns Vector2

    Interpolated Vector2 value

vector3InterpolateFunctionSearch playground for vector3InterpolateFunction

  • Interpolates a Vector3 linearly

    Parameters

    • startValue: Vector3

      Start value of the animation curve

    • endValue: Vector3

      End value of the animation curve

    • gradient: number

      Scalar amount to interpolate (value between 0 and 1)

    Returns Vector3

    Interpolated scalar value

vector3InterpolateFunctionWithTangentsSearch playground for vector3InterpolateFunctionWithTangents

  • Interpolates a Vector3 cubically

    Parameters

    • startValue: Vector3

      Start value of the animation curve

    • outTangent: Vector3

      End tangent of the animation

    • endValue: Vector3

      End value of the animation curve

    • inTangent: Vector3

      Start tangent of the animation curve

    • gradient: number

      Scalar amount to interpolate (value between 0 and 1)

    Returns Vector3

    InterpolatedVector3 value

Static AppendSerializedAnimationsSearch playground for AppendSerializedAnimations

  • AppendSerializedAnimations(source: IAnimatable, destination: any): void

  • Appends the serialized animations from the source animations

    Parameters

    • source: IAnimatable

      Source containing the animations

    • destination: any

      Target to store the animations

    Returns void

Static CreateAndStartAnimationSearch playground for CreateAndStartAnimation

  • CreateAndStartAnimation(name: string, target: any, targetProperty: string, framePerSecond: number, totalFrame: number, from: any, to: any, loopMode?: number, easingFunction?: EasingFunction, onAnimationEnd?: () => void, scene?: Scene): Nullable<Animatable>

  • Create and start an animation on a node

    Parameters

    • name: string

      defines the name of the global animation that will be run on all nodes

    • target: any

      defines the target where the animation will take place

    • targetProperty: string

      defines property to animate

    • framePerSecond: number

      defines the number of frame per second yo use

    • totalFrame: number

      defines the number of frames in total

    • from: any

      defines the initial value

    • to: any

      defines the final value

    • Optional loopMode: number

      defines which loop mode you want to use (off by default)

    • Optional easingFunction: EasingFunction

      defines the easing function to use (linear by default)

    • Optional onAnimationEnd: () => void

      defines the callback to call when animation end

        • (): void

        • Returns void

    • Optional scene: Scene

      defines the hosting scene

    Returns Nullable<Animatable>

    the animatable created for this animation

Static CreateAndStartHierarchyAnimationSearch playground for CreateAndStartHierarchyAnimation

  • CreateAndStartHierarchyAnimation(name: string, node: Node, directDescendantsOnly: boolean, targetProperty: string, framePerSecond: number, totalFrame: number, from: any, to: any, loopMode?: number, easingFunction?: EasingFunction, onAnimationEnd?: () => void): Nullable<Animatable[]>

  • Create and start an animation on a node and its descendants

    example

    https://www.babylonjs-playground.com/#MH0VLI

    Parameters

    • name: string

      defines the name of the global animation that will be run on all nodes

    • node: Node

      defines the root node where the animation will take place

    • directDescendantsOnly: boolean

      if true only direct descendants will be used, if false direct and also indirect (children of children, an so on in a recursive manner) descendants will be used

    • targetProperty: string

      defines property to animate

    • framePerSecond: number

      defines the number of frame per second to use

    • totalFrame: number

      defines the number of frames in total

    • from: any

      defines the initial value

    • to: any

      defines the final value

    • Optional loopMode: number

      defines which loop mode you want to use (off by default)

    • Optional easingFunction: EasingFunction

      defines the easing function to use (linear by default)

    • Optional onAnimationEnd: () => void

      defines the callback to call when an animation ends (will be called once per node)

        • (): void

        • Returns void

    Returns Nullable<Animatable[]>

    the list of animatables created for all nodes

Static CreateAnimationSearch playground for CreateAnimation

  • CreateAnimation(property: string, animationType: number, framePerSecond: number, easingFunction: EasingFunction): Animation

  • Sets up an animation

    Parameters

    • property: string

      The property to animate

    • animationType: number

      The animation type to apply

    • framePerSecond: number

      The frames per second of the animation

    • easingFunction: EasingFunction

      The easing function used in the animation

    Returns Animation

    The created animation

Static CreateFromSnippetAsyncSearch playground for CreateFromSnippetAsync

  • Creates an animation or an array of animations from a snippet saved by the Inspector

    Parameters

    • snippetId: string

      defines the snippet to load

    Returns Promise<Animation | Array<Animation>>

    a promise that will resolve to the new animation or a new array of animations

Static CreateMergeAndStartAnimationSearch playground for CreateMergeAndStartAnimation

  • CreateMergeAndStartAnimation(name: string, node: Node, targetProperty: string, framePerSecond: number, totalFrame: number, from: any, to: any, loopMode?: number, easingFunction?: EasingFunction, onAnimationEnd?: () => void): Nullable<Animatable>

  • Creates a new animation, merges it with the existing animations and starts it

    Parameters

    • name: string

      Name of the animation

    • node: Node

      Node which contains the scene that begins the animations

    • targetProperty: string

      Specifies which property to animate

    • framePerSecond: number

      The frames per second of the animation

    • totalFrame: number

      The total number of frames

    • from: any

      The frame at the beginning of the animation

    • to: any

      The frame at the end of the animation

    • Optional loopMode: number

      Specifies the loop mode of the animation

    • Optional easingFunction: EasingFunction

      (Optional) The easing function of the animation, which allow custom mathematical formulas for animations

    • Optional onAnimationEnd: () => void

      Callback to run once the animation is complete

        • (): void

        • Returns void

    Returns Nullable<Animatable>

    Nullable animation

Static MakeAnimationAdditiveSearch playground for MakeAnimationAdditive

  • MakeAnimationAdditive(sourceAnimation: Animation, referenceFrame?: number, range?: string, cloneOriginal?: boolean, clonedName?: string): Animation

  • Convert the keyframes for all animations belonging to the group to be relative to a given reference frame.

    Parameters

    • sourceAnimation: Animation

      defines the Animation containing keyframes to convert

    • Optional referenceFrame: number

      defines the frame that keyframes in the range will be relative to

    • Optional range: string

      defines the name of the AnimationRange belonging to the Animation to convert

    • Optional cloneOriginal: boolean

      defines whether or not to clone the animation and convert the clone or convert the original animation (default is false)

    • Optional clonedName: string

      defines the name of the resulting cloned Animation if cloneOriginal is true

    Returns Animation

    a new Animation if cloneOriginal is true or the original Animation if cloneOriginal is false

Static ParseSearch playground for Parse

  • Parses an animation object and creates an animation

    Parameters

    • parsedAnimation: any

      Parsed animation object

    Returns Animation

    Animation object

Static ParseFromFileAsyncSearch playground for ParseFromFileAsync

  • Creates a new animation or an array of animations from a snippet saved in a remote file

    Parameters

    • name: Nullable<string>

      defines the name of the animation to create (can be null or empty to use the one from the json data)

    • url: string

      defines the url to load from

    Returns Promise<Animation | Array<Animation>>

    a promise that will resolve to the new animation or an array of animations

Static TransitionToSearch playground for TransitionTo

  • Transition property of an host to the target Value

    Parameters

    • property: string

      The property to transition

    • targetValue: any

      The target Value of the property

    • host: any

      The object where the property to animate belongs

    • scene: Scene

      Scene used to run the animation

    • frameRate: number

      Framerate (in frame/s) to use

    • transition: Animation

      The transition type we want to use

    • duration: number

      The duration of the animation, in milliseconds

    • Optional onAnimationEnd: Nullable<() => void>

      Callback trigger at the end of the animation

    Returns Nullable<Animatable>

    Nullable animation

Legend

  • Constructor
  • Property
  • Method
  • Property
  • Method
  • Inherited property
  • Inherited method
  • Static property
  • Static method