Options
All
  • Public
  • Public/Protected
  • All
Menu

Class AnimationManager

Hierarchy

  • AnimationManager

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 programatically with the methods AnimationManager.stopAnimation or Animation.stop.

since

1.4

Index

Constructors

constructor

Properties

Read-only activeAnimations : Set<Animation>

  • Gets the set of currently animating Animations being managed by this AnimationManager.

    since

    2.1

Read-only defaultAnimation : Animation

  • This read-only property gets the Animation that carries out default 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.

    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 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 : EnumValue

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

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

    myDiagram.animationManager.initialAnimationStyle = go.AnimationManager.None;
    myDiagram.addDiagramListener('InitialAnimationStarting', function(e) {
      var 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

Read-only isAnimating : boolean

  • This read-only property is true when the animation manger is currently animating.

    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. Setting this property does not raise any events.

isInitial : boolean

  • Gets or sets whether an 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.

    since

    1.6

Read-only isTicking : boolean

  • This read-only property is true when the animation manger 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 the 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.

    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 others
    myDiagram.animationManager.canStart = function(reason) {
      if (reason === "Expand Tree") return false;
      return true;
    }
    since

    2.1

    Parameters

    • reason: string

      Reason for starting the animation

    Returns boolean

Static defineAnimationEffect

  • defineAnimationEffect(effectName: string, animationFunction: function(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', function(obj, startValue, endValue, easing, currentTime, duration, animation) {
      var hueValue = easing(currentTime, startValue, endValue - startValue, duration);
      obj.fill = 'hsl(' + hueValue + ', 100%, 80%)';
    });
    since

    2.1

    Parameters

    • effectName: string

      Named effect to animate

    • animationFunction: function(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.

    Returns void

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

Constants

Static AnimateLocations : EnumValue

Used as a value for initialAnimationStyle. This value will cause initial animations to capture Part locations and animate them from (0, 0) to those location values. This was the default initial animation behavior in GoJS 2.0 and prior. See initialAnimationStyle for details and examples.

since

2.1

Static Default : EnumValue

Used as the default value for initialAnimationStyle. The default initial animation style will "fade up" and in the Diagram's contents by animating the Diagram.position and Diagram.opacity. To make the default initial animation behave like GoJS 2.0, set initialAnimationStyle to AnimationManager.AnimateLocations. To customize the default initial animation, set initialAnimationStyle to AnimationManager.None and define a "InitialAnimationStarting" DiagramEvent listener with Diagram.addDiagramListener. See initialAnimationStyle for details and examples.

since

2.1

Static None : EnumValue

Used as a value for initialAnimationStyle. This will turn off the initial animation, but also allows for customizing the initial animation by adding your own properties if you define a "InitialAnimationStarting" listener with Diagram.addDiagramListener. See initialAnimationStyle for details and examples.

since

2.1