Animation – amCharts 4 Documentation

Type class

Animation can be used to transition certain properties on an object that implements IAnimatable interface.

IAnimationEvents for a list of available events

Sources

Animation can be used (imported) via one of the following packages.

// Animation is available in all of the following modules.
// You only need to import one of them.

/**
 * --------------------------------------------------------
 * Import from: "core.ts"
 * Use like: am4core.Animation
 * --------------------------------------------------------
 */
import * as am4core from "@amcharts/amcharts4/core";

// Animation is available in all of the following modules.
// You only need to import one of them.

/**
 * --------------------------------------------------------
 * Include via: <script src="core.js"></script>
 * Access items like: am4.Animation
 * --------------------------------------------------------
 */

Inheritance

Animation extends BaseObjectEvents.

Animation is not extended by any other symbol.

Properties

animationOptions #	Type `IAnimationOptions[]` An array of animation option objects. Each animation object represent one property. Animation can animate any number of properties simultaneously.
clonedFrom #	Type `$type.Optional` < `this` > Inherited from `BaseObject` Reference to the original object this object was cloned from. We need to keep this so we can disassociate it from source object when this object is disposed.
config #	Type `object` Inherited from `BaseObject` Use this property to set JSON-based config. When set, triggers processing routine, which will go through all properties, and try to apply values, create instances, etc. Use this with caution, as it is a time-consuming process. It's used for initialchart setup only, not routine operations.
delayed #	Type `boolean` Returns `true` if this animation is delayed. @readonly
duration #	Type `number` Default `0` Duration of the animation in milliseconds.
easing #	Type ( value: `number`) => `number` Default `$ease.linear` Easing function to use. `Ease`
events #	Type `EventDispatcher` < `AMEvent` < `this`, `IAnimationEvents` > > Inherited from `BaseObjectEvents` An `EventDispatcher` instance
id #	Type `$type.Optional` < `string` > Inherited from `BaseObject` Sets the user-defined id of the element.
object #	Type `IAnimatable` An animation target object. `Animation` will update properties of this object.
progress #	Type `number` Default `0` Contains progress of the current animation: 0 (start) to 1 (end).
uid #	Type `string` Inherited from `BaseObject` Returns object's internal unique ID.
There are 5 inherited items currently hidden from this list.

Methods

clone( cloneId?: `string` ) #	Returns `this` Inherited from `BaseObject` Makes a copy of this object and returns the clone. Try to avoid cloning complex objects like chart, create new instances if you need them.
constructor( object: `IAnimatable`, animationOptions: `IAnimationOptions[]` \| `IAnimationOptions`, duration: `number`, easing?: ( value: `number`) => `number` ) #	Returns `Animation` Constructor
copyFrom( source: `this` ) #	Returns `void` Inherited from `BaseObjectEvents` Copies all parameters from another `Sprite`.
delay( delay: `number` ) #	Returns `Animation` Delays animation start by X milliseconds.
dispatch( eventType: `Key`, data?: `any` ) #	Returns `void` Inherited from `BaseObjectEvents` Dispatches an event using own event dispatcher. Will automatically populate event data object with event type and target (this element). It also checks if there are any handlers registered for this sepecific event.
dispatchImmediately( eventType: `Key`, data?: `any` ) #	Returns `void` Inherited from `BaseObjectEvents` Works like `dispatch`, except event is triggered immediately, without waiting for the next frame cycle.
dispose() #	Returns `void` Disposes this object, clears up after itself.
end() #	Returns `Animation` Jumps to animation end. If animation is set to loop, this will start another round of animation from start.
getCurrentThemes() #	Returns `ITheme[]` Inherited from `BaseObject` Returns a list of themes that should be applied to this element. It could either be a list of themes set explicitly on this element, or system-wide.
isDisposed() #	Returns `boolean` Inherited from `BaseObject` Returns if this object has been already been disposed.
isFinished() #	Returns `boolean` Returns indicator if this animation is finished or not
kill() #	Returns `void` Stops animation immediately leaving properties in their current values.
loop( count?: `number` ) #	Returns `Animation` Sets loop count for the animation. If parameter is not a valid number the animation will keep on looping indefinitely.
pause() #	Returns `Animation` Pauses animation.
resume() #	Returns `Animation` Resumes paused animation.
setProgress( progress: `number` ) #	Returns `void` Sets current progress and updates object's numeric and color values.
start() #	Returns `Animation` Starts animation.
stop( skipEvent?: `boolean` ) #	Returns `Animation` Stops animation. When animation is stopped, the properties of the target object will remain where they were at the moment when `stop()` was called.
There are 6 inherited items currently hidden from this list.

clone(

cloneId?: string

)

Returns this

Inherited from BaseObject

Makes a copy of this object and returns the clone. Try to avoid cloning complex objects like chart, create new instances if you need them.

constructor(

object: IAnimatable,
animationOptions: IAnimationOptions[] | IAnimationOptions,
duration: number,
easing?: ( value: number) => number

)

Returns Animation

Constructor

copyFrom(

source: this

)

Returns void

Inherited from BaseObjectEvents

Copies all parameters from another Sprite.

delay(

delay: number

)

Returns Animation

Delays animation start by X milliseconds.

dispatch(

eventType: Key,
data?: any

)

Returns void

Inherited from BaseObjectEvents

Dispatches an event using own event dispatcher. Will automatically populate event data object with event type and target (this element).

It also checks if there are any handlers registered for this sepecific event.

dispatchImmediately(

eventType: Key,
data?: any

)

Returns void

Inherited from BaseObjectEvents

Works like dispatch, except event is triggered immediately, without waiting for the next frame cycle.

dispose()

Returns void

Disposes this object, clears up after itself.

end()

Returns Animation

Jumps to animation end. If animation is set to loop, this will start another round of animation from start.

getCurrentThemes()

Returns ITheme[]

Inherited from BaseObject

Returns a list of themes that should be applied to this element. It could either be a list of themes set explicitly on this element, or system-wide.

isDisposed()

Returns boolean

Inherited from BaseObject

Returns if this object has been already been disposed.

isFinished()

Returns boolean

Returns indicator if this animation is finished or not

kill()

Returns void

Stops animation immediately leaving properties in their current values.

loop(

count?: number

)

Returns Animation

Sets loop count for the animation. If parameter is not a valid number the animation will keep on looping indefinitely.

pause()

Returns Animation

Pauses animation.

resume()

Returns Animation

Resumes paused animation.

setProgress(

progress: number

)

Returns void

Sets current progress and updates object's numeric and color values.

start()

Returns Animation

Starts animation.

stop(

skipEvent?: boolean

)

Returns Animation

Stops animation.

When animation is stopped, the properties of the target object will remain where they were at the moment when stop() was called.

There are 6 inherited items currently hidden from this list.

Events

#animationended	Param { progress: `number`, type: `"animationended"`, target: `this` } Invoked when animation finishes playing.
#animationprogress	Param { progress: `number`, type: `"animationprogress"`, target: `this` } Invoked when animation makes progress.
#animationstarted	Param { progress: `number`, type: `"animationstarted"`, target: `this` } Invoked when animation starts playing.
#animationstopped	Param { progress: `number`, type: `"animationstopped"`, target: `this` } Invoked when animation is stopped by some other process, before it had a chance to finish.

Adapters

Animation does not have any adapters.