Class Animation

GoJS® Diagramming Components
version 3.0.16
by Northwoods Software®

Animations are used to animate GraphObject and Diagram properties.

This class is useful for creating manual animations. If you wish to animate particular properties on a GraphObject every time their value changes, you may want to use AnimationTriggers instead, which automatically create and start Animations.

The AnimationManager.defaultAnimation is an instance of this class, and carries out the default animations in GoJS: Model load, layout, expand and collapse, and so on. See the Introduction Page on Animations for more detail on the different kinds of animations.

Manual animations are set up by creating an instance of this class, and calling add at least once, then calling start. The method add specifies which objects and which animation effects/properties to animate, plus start and end values for the property. As objects are added to an Animation, the Animation infers which Diagram and AnimationManager is relevant.

Animations are started by calling start, and stopped when the duration is reached, or when stop is called, or stopped when AnimationManager.stopAnimation is called with true as its argument.

Animations can continue indefinitely if runCount is set to Infinity. Animations can act upon temporary copies of an object that will get destroyed by calling addTemporaryPart. This is useful when crafting cosmetic animations of parts that are about to be deleted: Since the part will no longer exist, you can instead animate a temporary part disappearing.

A simple example usage is this:

const node = myDiagram.nodes.first();
const shape = part.findObject("SHAPE"); // assumes this Node contains a go.Shape with .name = "SHAPE"
const animation = new go.Animation();
// Animate this Node from its current position  to (400, 500)
animation.add(node, "position", node.position, new go.Point(400, 500));
// Animate the fill of the Shape within the Node, from its current color to blue
animation.add(shape, "fill", shape.fill, "blue");
// Both of these effects will animate simultaneously when start() is called:
animation.start();

See the Introduction Page on Animations and the Custom Animations sample for more example usage of the Animation class.

Unlike the AnimationManager.defaultAnimation, Animations can be started any time, and do not stop automatically when a new transaction begins.

since

2.1

Index

Constructors

constructor

new Animation(init?: Partial<Animation>): Animation
The constructor creates an Animation. A single Animation can animate multiple objects via multiple calls to add. When you are ready to begin the animation, call start.
Parameters
- Optional init: Partial<Animation>
  Optional properties to initialize.
Returns Animation

Accessors

duration
: number

Gets or sets the duration for animations, in milliseconds.

The default value is NaN, which means it inherits the default value from the AnimationManager.duration, which defaults to 600 milliseconds.

The value must be a number greater than or equal to 1, or NaN. Setting this property does not raise any events.

easing
: EasingFunction

Gets or sets the easing function this Animation will use to modify default properties.

Pre-defined animatable values are processed by passing scalars into this easing function.

The default value is Animation.EaseInOutQuad.

The value can be an arbitrary easing function, or one of the six provided: Animation.EaseLinear, Animation.EaseInOutQuad, Animation.EaseInQuad, Animation.EaseOutQuad, Animation.EaseInExpo, Animation.EaseOutExpo.

finished
: ((animation: Animation) => void)

Gets or sets the function to execute when the user Animation finishes.

By default this property is null.

`Readonly`isAnimating
: boolean

This read-only property is true when the Animation is currently running.

This value cannot be set, but Animation can be stopped by calling stop.

isViewportUnconstrained
: boolean

Gets or sets whether this Animation should allow an unconstrained viewport during the runtime of the animation. This temporarily sets the Diagram.scrollMode to ScrollMode.Infinite, and restores the value at the end of the animation. This is done so that animating objects can move out of the viewport temporarily during the animation and not trigger scrollbars.

This may be useful to set for animations that have objects or the Diagram bounds animate from outside the viewport into the view. The default value is true.

reversible
: boolean

Gets or sets whether this Animation will repeat its animation in reverse at the end of the duration. Default false.

A reversible Animation, if stopped early, will end at its original state. Setting this to true doubles the effective duration of the Animation.

This property should not be set on the AnimationManager.defaultAnimation

runCount
: number

Gets or sets whether this Animation should be repeat, and how many times. The default is 1, which means the animation does not repeat.

This can be set to any non-zero positive integer, or Infinity. Setting this to Infinity will repeat an animation forever.

This property should not be set on the AnimationManager.defaultAnimation

see
reversible

Methods

add

add(obj: Diagram | GraphObject, effectName: string, startValue: any, endValue: any, cosmetic?: boolean): this
Add an object (GraphObject or Diagram) and effect name, with specified start and end values, to this Animation.
Parameters
- obj: Diagram | GraphObject
  GraphObject or Diagram to animate.
- effectName: string
  Animation effect name, such as "scale" to change GraphObject.scale. By default the supported properties are, for GraphObjects:
  - "position"
  - "location" (on Parts)
  - "scale"
  - "opacity"
  - "angle"
  - "desiredSize"
  - "width"
  - "height"
  - "background"
  - "fill" (on Shapes)
  - "strokeWidth" (on Shapes)
  - "strokeDashOffset" (on Shapes)
  - "stroke" (on Shapes, TextBlocks)
  For Diagrams:
  - "position"
  - "scale"
  - "opacity"
  More properties can be supported by defining new effects with AnimationManager.defineAnimationEffect.
- startValue: any
  The starting value for the animated property. Often this is the current value of the property.
- endValue: any
  The ending value for the animated property. Even if the animation is just cosmetic, this must be a valid value for the property. For instance, for GraphObject.scale, you cannot animate to 0, as this is an invalid scale value. Instead you would animate to a very small (but still valid) value, such as 0.001.
- Optional cosmetic: boolean
  Determines if the animation should revert the property value to the start value at the end of animation. Default false. This is commonly used when animating opacity or scale of "disappearing" nodes during collapse. Even though the node may appear to go to scale 0.001, the programmer usually wants the scale to reflect its prior value, once hidden.
Returns this
this Animation

addTemporaryPart

addTemporaryPart(part: Part, diagram: Diagram): this
Add a temporary Part to this animation. This part will be added to the Diagram when the animation is started, and removed from the Diagram when the animation completes. This is intended to be used with add, to animate properties of this Part or its elements.

The temporary part added is typically either a GraphObject.copy of an existing Part, which is to be deleted and requires a copy for animated effects, or else a wholly new temporary Part, constructed in memory for the purpose of creating some effect.
Parameters
- part: Part
  A part to add to the Diagram at the start of the animation and remove at the end. This is typically either a copied Part already in the Diagram, to animate its deletion, or a Part created programmatically to be used for some effect.
- diagram: Diagram
  The Diagram to add the temporary part to, and remove it from, at the start and end of animation, respectively.
Returns this
this Animation

getTemporaryState

getTemporaryState(obj: Diagram | GraphObject): ObjectData
Gets the ObjectData associated with this GraphObject or Diagram. If no state exists, this creates and returns a new ObjectData.

This can be used to store temporary information per animated object during the course of an animation. This state is cleared at the end of an animation.
Parameters
- obj: Diagram | GraphObject
Returns ObjectData

start

start(): this
Start this animation.

This adds the Animation to its AnimationManager's list of active animations. The AnimationManager is inferred from the list of objects to be animated, by inspecting their Diagram.

This does nothing if there are no objects to animate.

Returns this
this Animation