You do not normally need to create an instance of this class because one already exists as the Diagram.animationManager, which you can modify.
Optional init: Partial<AnimationManager>Optional initialization properties. This is typically only used in the Diagram constructor to set properties on the Diagram.animationManager.
ReadonlyactiveGets the set of currently animating Animations being managed by this AnimationManager, including any running defaultAnimation.
ReadonlydefaultThis 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.
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.
Gets or sets the initial animation style that is set up by the defaultAnimation. This can be AnimationStyle.Default, AnimationStyle.AnimateLocations, or AnimationStyle.None.
(0, 0) to their values, as GoJS 2.0 and prior do."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);
});
ReadonlyisThis 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.
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.
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.
ReadonlyisThis 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.
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:
Called by Diagram:
Called by AnimationTriggers:
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;
}
Reason for starting the animation
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.
Optional stopsAllAnimations: booleanWhether to stop all animations, instead of just the defaultAnimation. Default false.
Static defineDefines 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%)';
});
Named effect to animate
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.
Static Readonly AnimateStatic Readonly DefaultStatic Readonly None
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.