Class: Animation

Animation

new Animation(container, viewModel)

The animation widget provides play, pause, and rewind buttons, as well as the current time and date. A 'shuttle ring' surrounds it to control animation speed. The shuttle ring concept is borrowed from video editing, where a typical jog wheel rotates to move single animation frames very slowly, while the surrounding shuttle ring can be twisted to control the direction and speed of fast playback. SuperMap3D treats time as continuous (not broken into predefined animation frames), so this widget does not provide a jog wheel. Instead, the shuttle ring enables fast and very slow playback. Click and drag the shuttle ring pointer itself (the green part above), or click the rest of the ring area to push the pointer to the next preset speed in that direction. The animation widget also provides a 'real time' button (top left) to synchronize animation time with the end user's system clock, typically displaying 'today' or 'now'. This mode is used in ClockRange.CLAMPED or ClockRange.LOOP_STOP if the current time is outside Clock's startTime and endTime.

Name Type Description
container Element | String

The DOM element or ID that will contain the widget.
viewModel AnimationViewModel

The view model used by this widget.
See:
Throws:

The element with ID 'container' does not exist in the document.

Type
DeveloperError
Example
// In HTML head, include a link to Animation.css stylesheet,
// and in the body, include: 


var clock = new SuperMap3D.Clock();
var clockViewModel = new SuperMap3D.ClockViewModel(clock);
var viewModel = new SuperMap3D.AnimationViewModel(clockViewModel);
var widget = new SuperMap3D.Animation('animationContainer', viewModel);

function tick() {
    clock.tick();
    SuperMap3D.requestAnimationFrame(tick);
}
SuperMap3D.requestAnimationFrame(tick);

Members

static AllowMatricesInterpolation

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

static AllowMatrixDecomposeForInterpolation

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 ANIMATIONLOOPMODE_CONSTANT

Constant Loop Mode

static ANIMATIONLOOPMODE_CYCLE

Cycle Loop Mode

static ANIMATIONLOOPMODE_RELATIVE

Relative Loop Mode

static ANIMATIONTYPE_COLOR3

Color3 animation type

static ANIMATIONTYPE_COLOR4

Color3 animation type

static ANIMATIONTYPE_FLOAT

Float animation type

static ANIMATIONTYPE_MATRIX

Matrix animation type

static ANIMATIONTYPE_QUATERNION

Quaternion animation type

static ANIMATIONTYPE_SIZE

Size animation type

static ANIMATIONTYPE_VECTOR2

Vector2 animation type

static ANIMATIONTYPE_VECTOR3

Vector3 animation type

static SnippetUrl

Define the Url to load snippets

readonly containerElement

Retrieve the parent container.

readonly viewModelAnimationViewModel

Obtain the view model.

Methods

static AppendSerializedAnimations(source, destination)

Appends the serialized animations from the source animations

Name Type Description
source

Source containing the animations
destination

Target to store the animations

static CreateAndStartAnimation(name, node, targetProperty, framePerSecond, totalFrame, from, to, loopMode, easingFunction, onAnimationEnd)

Create and start an animation on a node

Name Type Description
name

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

defines the root node where the animation will take place
targetProperty

defines property to animate
framePerSecond

defines the number of frame per second yo use
totalFrame

defines the number of frames in total
from

defines the initial value
to

defines the final value
loopMode

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

defines the easing function to use (linear by default)
onAnimationEnd

defines the callback to call when animation end
Returns:
the animatable created for this animation

static CreateAndStartHierarchyAnimation(name, node, directDescendantsOnly, targetProperty, framePerSecond, totalFrame, from, to, loopMode, easingFunction, onAnimationEnd)

Create and start an animation on a node and its descendants

Name Type Description
name

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

defines the root node where the animation will take place
directDescendantsOnly

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

defines property to animate
framePerSecond

defines the number of frame per second to use
totalFrame

defines the number of frames in total
from

defines the initial value
to

defines the final value
loopMode

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

defines the easing function to use (linear by default)
onAnimationEnd

defines the callback to call when an animation ends (will be called once per node)
Returns:
the list of animatables created for all nodes

static CreateAnimation(property, animationType, framePerSecond, easingFunction)

Sets up an animation

Name Type Description
property

The property to animate
animationType

The animation type to apply
framePerSecond

The frames per second of the animation
easingFunction

The easing function used in the animation
Returns:
The created animation

static CreateFromSnippetAsync(snippetId)

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

Name Type Description
snippetId

defines the snippet to load
Returns:
a promise that will resolve to the new animation or a new array of animations

static CreateMergeAndStartAnimation(name, node, targetProperty, framePerSecond, totalFrame, from, to, loopMode, easingFunction, onAnimationEnd)

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

Name Type Description
name

Name of the animation
node

Node which contains the scene that begins the animations
targetProperty

Specifies which property to animate
framePerSecond

The frames per second of the animation
totalFrame

The total number of frames
from

The frame at the beginning of the animation
to

The frame at the end of the animation
loopMode

Specifies the loop mode of the animation
easingFunction

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

Callback to run once the animation is complete
Returns:
Nullable animation

static MakeAnimationAdditive(sourceAnimation, referenceFrame, range, cloneOriginal, clonedName)

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

Name Type Description
sourceAnimation

defines the Animation containing keyframes to convert
referenceFrame

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

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

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

defines the name of the resulting cloned Animation if cloneOriginal is true
Returns:
a new Animation if cloneOriginal is true or the original Animation if cloneOriginal is false

static Parse(parsedAnimation)

Parses an animation object and creates an animation

Name Type Description
parsedAnimation

Parsed animation object
Returns:
Animation object

static ParseFromFileAsync(name, url)

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

Name Type Description
name

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

defines the url to load from
Returns:
a promise that will resolve to the new animation or an array of animations

static TransitionTo(property, targetValue, host, scene, frameRate, transition, duration, onAnimationEnd)

Transition property of an host to the target Value

Name Type Description
property

The property to transition
targetValue

The target Value of the property
host

The object where the property to animate belongs
scene

Scene used to run the animation
frameRate

Framerate (in frame/s) to use
transition

The transition type we want to use
duration

The duration of the animation, in milliseconds
onAnimationEnd

Callback trigger at the end of the animation
Returns:
Nullable animation

addEvent(event)

Add an event to this animation

Name Type Description
event

Event to add

applyThemeChanges()

更新 widget，以反映修改后的 CSS 主题规则。

Example
//Switch to the supermap3d-lighter theme.
document.body.className = 'supermap3d-lighter';
animation.applyThemeChanges();

clone()

Makes a copy of the animation

Returns:
Cloned animation

color3InterpolateFunction(startValue, endValue, gradient)

Interpolates a Color3 linearly

Name Type Description
startValue

Start value of the animation curve
endValue

End value of the animation curve
gradient

Scalar amount to interpolate
Returns:
Interpolated Color3 value

color4InterpolateFunction(startValue, endValue, gradient)

Interpolates a Color4 linearly

Name Type Description
startValue

Start value of the animation curve
endValue

End value of the animation curve
gradient

Scalar amount to interpolate
Returns:
Interpolated Color3 value

createRange(name, from, to)

Creates an animation range

Name Type Description
name

Name of the animation range
from

Starting frame of the animation range
to

Ending frame of the animation

deleteRange(name, deleteFrames)

Deletes an animation range by name

Name Type Description
name

Name of the animation range to delete
deleteFrames

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

destroy()

销毁动画部件。如果要从布局中永久删除部件，则应调用该函数。

floatInterpolateFunction(startValue, endValue, gradient)

Interpolates a scalar linearly

Name Type Description
startValue

Start value of the animation curve
endValue

End value of the animation curve
gradient

Scalar amount to interpolate
Returns:
Interpolated scalar value

floatInterpolateFunctionWithTangents(startValue, outTangent, endValue, inTangent, gradient)

Interpolates a scalar cubically

Name Type Description
startValue

Start value of the animation curve
outTangent

End tangent of the animation
endValue

End value of the animation curve
inTangent

Start tangent of the animation curve
gradient

Scalar amount to interpolate
Returns:
Interpolated scalar value

getEasingFunction()

Gets the easing function of the animation

Returns:
Easing function of the animation

getEvents()

Retrieves all the events from the animation

Returns:
Events from the animation

getHighestFrame()

Gets the highest frame rate of the animation

Returns:
Highest frame rate of the animation

getKeys()

Gets the key frames from the animation

Returns:
The key frames of the animation

getRange(name)

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

Name Type Description
name

Name of the animation range
Returns:
Nullable animation range

isDestroyed(){Boolean}

Returns:
Type Description
Boolean If the object has been destroyed, it is true; otherwise, it is false.

matrixInterpolateFunction(startValue, endValue, gradient, result)

Defines the function to use to interpolate matrices

Name Type Description
startValue

defines the start matrix
endValue

defines the end matrix
gradient

defines the gradient between both matrices
result

defines an optional target matrix where to store the interpolation
Returns:
the interpolated matrix

quaternionInterpolateFunction(startValue, endValue, gradient)

Interpolates a quaternion using a spherical linear interpolation

Name Type Description
startValue

Start value of the animation curve
endValue

End value of the animation curve
gradient

Scalar amount to interpolate
Returns:
Interpolated quaternion value

quaternionInterpolateFunctionWithTangents(startValue, outTangent, endValue, inTangent, gradient)

Interpolates a quaternion cubically

Name Type Description
startValue

Start value of the animation curve
outTangent

End tangent of the animation curve
endValue

End value of the animation curve
inTangent

Start tangent of the animation curve
gradient

Scalar amount to interpolate
Returns:
Interpolated quaternion value

removeEvents(frame)

Remove all events found at the given frame

Name Type Description
frame

The frame to remove events from

resize()

调整 widget 的大小以匹配容器大小。每当容器大小发生变化时，都应调用此函数。

serialize()

Serializes the animation to an object

Returns:
Serialized object

setEasingFunction(easingFunction)

Sets the easing function of the animation

Name Type Description
easingFunction

A custom mathematical formula for animation

setKeys(values)

Sets the key frames of the animation

Name Type Description
values

The animation key frames to set

sizeInterpolateFunction(startValue, endValue, gradient)

Interpolates a size linearly

Name Type Description
startValue

Start value of the animation curve
endValue

End value of the animation curve
gradient

Scalar amount to interpolate
Returns:
Interpolated Size value

toString(fullDetails)

Converts the animation to a string

Name Type Description
fullDetails

support for multiple levels of logging within scene loading
Returns:
String form of the animation

vector2InterpolateFunction(startValue, endValue, gradient)

Interpolates a Vector2 linearly

Name Type Description
startValue

Start value of the animation curve
endValue

End value of the animation curve
gradient

Scalar amount to interpolate
Returns:
Interpolated Vector2 value

vector2InterpolateFunctionWithTangents(startValue, outTangent, endValue, inTangent, gradient)

Interpolates a Vector2 cubically

Name Type Description
startValue

Start value of the animation curve
outTangent

End tangent of the animation
endValue

End value of the animation curve
inTangent

Start tangent of the animation curve
gradient

Scalar amount to interpolate
Returns:
Interpolated Vector2 value

vector3InterpolateFunction(startValue, endValue, gradient)

Interpolates a Vector3 linearl

Name Type Description
startValue

Start value of the animation curve
endValue

End value of the animation curve
gradient

Scalar amount to interpolate
Returns:
Interpolated scalar value

vector3InterpolateFunctionWithTangents(startValue, outTangent, endValue, inTangent, gradient)

Interpolates a Vector3 cubically

Name Type Description
startValue

Start value of the animation curve
outTangent

End tangent of the animation
endValue

End value of the animation curve
inTangent

Start tangent of the animation curve
gradient

Scalar amount to interpolate
Returns:
InterpolatedVector3 value