# Class AnimationManager

GoJS® Diagramming Components
version 3.0.5
by Northwoods Software®

AnimationManager handles animations in a Diagram. Each Diagram has one, Diagram.animationManager. Setting the Model, performing a Layout, Group expansion and Tree expansion automatically start animations through the defaultAnimation. Animations can be manually started by creating Animations, which are associated with an AnimationManager.

Animation is enabled by default, setting the isEnabled property to false will turn off animations for a Diagram.

When the defaultAnimation begins it raises the `"AnimationStarting"` Diagram event, upon completion it raises the `"AnimationFinished"` Diagram event.

The defaultAnimation, if running, will stop if a new transaction is started, if an undo or redo is called, if a layout is invalidated, or if a model is replaced. When an Animation is stopped, the Diagram immediately finishes the animation and draws the final state. Animations can be stopped programmatically with the methods AnimationManager.stopAnimation or Animation.stop.

#####
Index

### Constructors

constructor

### Accessors

activeAnimations
defaultAnimation
duration
initialAnimationStyle
isAnimating
isEnabled
isInitial
isTicking

### Methods

canStart
stopAnimation
defineAnimationEffect

### Properties

AnimateLocations
Default
None

## Constructors

### constructor

- new AnimationManager(init?: Partial<AnimationManager>): AnimationManager

- You do not normally need to create an instance of this class because one already exists as the Diagram.animationManager, which you can modify.

  #### Parameters

  - ##### `Optional` init: Partial<AnimationManager>

    Optional initialization properties. This is typically only used in the Diagram constructor to set properties on the Diagram.animationManager.

  #### Returns AnimationManager

## Accessors

### `Readonly` activeAnimations
: Set<Animation>

- Gets the set of currently animating Animations being managed by this AnimationManager, including any running defaultAnimation.

  `since`

  2.1

### `Readonly` defaultAnimation
: Animation

- This read-only property gets the Animation that carries out the default built-in GoJS animations. This animation is usually only referenced to modify default animation properties, such as the Animation.easing or Animation.duration.

  You should not add anything to or start the default animation, GoJS does so automatically, internally. When the default animation begins it raises the `"AnimationStarting"` Diagram event, upon completion it raises the `"AnimationFinished"` Diagram event. You should not modify the properties Animation.runCount or Animation.reversible on the default animation.

  See the Introduction Page on Animations for more detail.

  `since`

  2.1

### duration
: number

- Gets or sets the default duration, in milliseconds, used as the duration for the defaultAnimation and for animations that have their Animation.duration set to `NaN`.

  Typically these values are short. The default value is 600 milliseconds. The value must be a number greater than or equal to 1. Setting this property does not raise any events.

  `see`

  Animation.duration

### initialAnimationStyle
: AnimationStyle

- Gets or sets the initial animation style that is set up by the defaultAnimation. This can be AnimationStyle.Default, AnimationStyle.AnimateLocations, or AnimationStyle.None.

  - If set to AnimationStyle.Default, the initial animation will "fade up" the Diagram's contents by animating the Diagram.position and Diagram.opacity.
  - If set to AnimationStyle.AnimateLocations, the initial animation will animate Part locations from `(0, 0)` to their values, as GoJS 2.0 and prior do.
  - If set to AnimationStyle.None, no initial animation will happen by default, which this allows you to specify your own initial animation by defining a `"InitialAnimationStarting"` DiagramEvent listener with Diagram.addDiagramListener.

  An example custom initial animation, which zooms the Diagram into view:

      myDiagram.animationManager.initialAnimationStyle = go.AnimationStyle.None;
      myDiagram.addDiagramListener('InitialAnimationStarting', e => {
        const animation = e.subject.defaultAnimation;
        animation.easing = go.Animation.EaseOutExpo;
        animation.duration = 900;
        animation.add(e.diagram, 'scale', 0.1, 1);
        animation.add(e.diagram, 'opacity', 0, 1);
      });

  `since`

  2.1

### `Readonly` isAnimating
: boolean

- This read-only property is true when the animation manager is currently animating any animation, including the defaultAnimation.

  This value cannot be set, but animation can be stopped by calling stopAnimation, and it can be prevented by setting isEnabled.

### isEnabled
: boolean

- Gets or sets whether this AnimationManager operates.

  The default value is `true`. Setting this to `false` does not stop an animation, it only stops future animations. To stop any ongoing animation, use stopAnimation. To disable only the default animations, set canStart to a function that always returns `false`.

  If any indefinite animations (animations with Animation.runCount set to `Infinity`) were running when this is set to `false`, they will be resumed when this is set to `true`.

  Setting this property does not raise any events.

  `see`

  canStart

### isInitial
: boolean

- Gets or sets whether a default animation is performed on an initial layout.

  The default value is true. Changing the value does not affect any ongoing animation. Setting this property does not raise any events.

### `Readonly` isTicking
: boolean

- This read-only property is true when the animation manager is in the middle of an animation tick. Animation only operates on GraphObjects during ticks, but code outside of AnimationManager's control may execute between ticks.

  `isTicking` can only be true when isAnimating is also true.

## Methods

### canStart

- canStart(reason: string): boolean

- This method is passed the reason a default animation is to begin, and must return true or false based on whether or not the animation is to be allowed. Returning true means the animation will occur, returning false will stop the animation's setup.

  By default, this method always returns true. Setting this to a function that always returns false will disable all default animations, but allow other animations, such as AnimationTriggers, to run.

  These are the possible reasons GoJS will begin an animation:

  Called by CommandHandler:

  - "Collapse SubGraph"
  - "Expand SubGraph"
  - "Collapse Tree"
  - "Expand Tree"
  - "Scroll To Part"
  - "Zoom To Fit"

  Called by Diagram:

  - "Model"
  - "Layout"

  Called by AnimationTriggers:

  - "Trigger"

  Example usage:

      // disallow expand/collapse animations, but allow all other default animations:
      myDiagram.animationManager.canStart = function(reason) {
        if (reason === "Expand Tree") return false;
        return true;
      }

      // disallow all default animations:
      myDiagram.animationManager.canStart = function(reason) {
        return false;
      }

  #### Parameters

  - ##### reason: string

    Reason for starting the animation

  #### Returns boolean

  `since`

  2.1

### stopAnimation

- stopAnimation(stopsAllAnimations?: boolean): void

- Stops the defaultAnimation and updates the Diagram to its final state.

  If the argument is true, this stops all running animations. If an Animation was about to begin, it will be cancelled.

  If the AnimationManager.defaultAnimation is running, this will raise the `"AnimationFinished"` Diagram event.

  #### Parameters

  - ##### `Optional` stopsAllAnimations: boolean

    Whether to stop all animations, instead of just the defaultAnimation. Default false.

  #### Returns void

### `Static` defineAnimationEffect

- defineAnimationEffect(effectName: string, animationFunction: ((obj: Diagram | GraphObject, startValue: any, endValue: any, easing: EasingFunction, currentTime: number, duration: number, animation: Animation) => void)): void

- Defines a new named effect to be used in animation, along with a function that tells the AnimationManager how to modify that property.

  Effect names do not need to reflect GraphObject properties, and you can define an effect with a function that modifies several properties for convenience.

  For example, one could define an animation effect named `"moveAndSpin"` which modifies the object's `position` and `angle`.

  Most commonly, an effect is defined with one GraphObject property in mind to be animated, and the function uses the start and end values, an easing function, and the times to determine a new value for each tick of animation. Here is an example for animating the fill of GraphObjects:

      // This presumes the object to be animated is a Shape
      go.AnimationManager.defineAnimationEffect('fill', (obj, startValue, endValue, easing, currentTime, duration, animation) => {
        const hueValue = easing(currentTime, startValue, endValue - startValue, duration);
        obj.fill = 'hsl(' + hueValue + ', 100%, 80%)';
      });

  #### Parameters

  - ##### effectName: string

    Named effect to animate

  - ##### animationFunction: ((obj: Diagram | GraphObject, startValue: any, endValue: any, easing: EasingFunction, currentTime: number, duration: number, animation: Animation) => void)

    Function that transforms the property values. It takes the animated object, start value, end value, easing function (the Animation.easing), current time, duration, and animation state. It should modify one or more properties on the object.

    - - (obj: Diagram | GraphObject, startValue: any, endValue: any, easing: EasingFunction, currentTime: number, duration: number, animation: Animation): void

      - #### Parameters

        - ##### obj: Diagram | GraphObject

        - ##### startValue: any

        - ##### endValue: any

        - ##### easing: EasingFunction

        - ##### currentTime: number

        - ##### duration: number

        - ##### animation: Animation

        #### Returns void

  `since`

  2.1

## Properties

### `Static` `Readonly` AnimateLocations

`deprecated`

See AnimationStyle.AnimateLocations.

### `Static` `Readonly` Default

`deprecated`

See AnimationStyle.Default.

### `Static` `Readonly` None

`deprecated`

See AnimationStyle.None.

Copyright © 1998-2024 by Northwoods Software Corporation.