Class: Animation

// 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

获取父容器。

readonly viewModelAnimationViewModel

获取视图模型。

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	如果对象已被销毁，则为 true，否则为 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