Options
Public/Protected
  • Public
  • Public/Protected
  • All
Menu

GoJS API 文档

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 animationReasons : Set<string>

  • This read-only property returns a Set of reasons the default animation may start. This set can be queried in canStart to turn off specific default animations.

    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"
    see

    canStart

    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

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.

    The reasons GoJS will begin an animation are collected in the set animationReasons, and can be queried in this method to conditionally allow animations, for instance:

    // disallow expand/collapse animations, but allow all others
    myDiagram.animationManager.canStart = function(reason) {
    if (this.animationReasons.contains("Expand Tree")) return false;
    return true;
    }
    see

    animationReasons

    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

    加入 GoJS 交流群
    GoJS 交流群 (769862113)