UNPKG

gojs/intro/animation.html

Version:
1<!DOCTYPE html>
2<html lang="en">
<head>
4<meta charset="utf-8"/>
5<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>

7<link rel="stylesheet" href="../assets/css/style.css"/> 
8<!-- Copyright 1998-2021 by Northwoods Software Corporation. -->    <title> GoJS Animation -- Northwoods Software </title>
  <link rel="stylesheet" href="../assets/css/prism.css"  />
</head>
<script>
  
  window.diagrams = [];
  window.goCode = function(pre, w, h, parentid, animation) {
    window.diagrams.push([pre, w, h, parentid, animation]);
  }
</script>
<body>
<nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary">
  <div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2">
    <div class="md:pl-4">
      <a class="text-white hover:text-white no-underline hover:no-underline
      font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary " href="../">
        <h1 class="mb-0 p-1 ">GoJS</h1>
      </a>
    </div>
    <button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation">
      <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
        <path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
        <path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
      </svg>
    </button>
    <div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20">
      <ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0">
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../learn/">Learn</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../samples/">Samples</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../intro/">Intro</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../api/">API</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../download.html">Download</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html"
         target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html"
         target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a></li>
      </ul>
    </div>
  </div>
  <hr class="border-b border-gray-600 opacity-50 my-0 py-0" />
</nav>
  
  <div class="md:flex flex-col md:flex-row md:min-h-screen w-full max-w-screen-xl mx-auto">
    
  <div id="navSide" class="flex flex-col w-full md:w-40 lg:w-48 text-gray-700 bg-white flex-shrink-0">
    <div class="flex-shrink-0 px-8 py-4">
      <button id="navButton" class="rounded-lg md:hidden focus:outline-none focus:ring" aria-label="Navigation">
        <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
          <path id="navOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
          <path id="navClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
        </svg>
      </button>
    </div>
    <nav id="navList" class="min-h-screen hidden md:block sidebar-nav flex-grow px-1 lg:px-4 pb-4 md:pb-0 md:overflow-y-auto break-words">
<a href="index.html">Basics</a>
<a href="buildingObjects.html">Building Parts</a>
<a href="usingModels.html">Using Models</a>
<a href="dataBinding.html">Data Binding</a>
<a href="react.html">GoJS with React</a>
<a href="angular.html">GoJS with Angular</a>
<a href="textBlocks.html">TextBlocks</a>
<a href="shapes.html">Shapes</a>
<a href="pictures.html">Pictures</a>
<a href="panels.html">Panels</a>
<a href="tablePanels.html">Table Panels</a>
<a href="brush.html">Brushes</a>
<a href="sizing.html">Sizing Objects</a>
<a href="itemArrays.html">Item Arrays</a>
<a href="changedEvents.html">Changed Events</a>
<a href="transactions.html">Transactions</a>
<a href="viewport.html">Coordinates</a>
<a href="initialView.html">Initial View</a>
<a href="collections.html">Collections</a>
<a href="links.html">Links</a>
<a href="linkLabels.html">Link Labels</a>
<a href="connectionPoints.html">Link Points</a>
<a href="ports.html">Ports</a>
<a href="nodes.html">Nodes</a>
<a href="debugging.html">Debugging</a>
<a href="layouts.html">Layouts</a>
<a href="trees.html">Trees</a>
<a href="subtrees.html">SubTrees</a>
<a href="groups.html">Groups</a>
<a href="subgraphs.html">SubGraphs</a>
<a href="sizedGroups.html">Sized Groups</a>
<a href="selection.html">Selection</a>
<a href="highlighting.html">Highlighting</a>
<a href="animation.html">Animation</a>
<a href="toolTips.html">ToolTips</a>
<a href="contextmenus.html">Context Menus</a>
<a href="events.html">Diagram Events</a>
<a href="tools.html">Tools</a>
<a href="commands.html">Commands</a>
<a href="permissions.html">Permissions</a>
<a href="validation.html">Validation</a>
<a href="HTMLInteraction.html">HTML Interaction</a>
<a href="layers.html">Layers &amp; Z-ordering</a>
<a href="palette.html">Palette</a>
<a href="overview.html">Overview</a>
<a href="resizing.html">Resizing Diagrams</a>
<a href="replacingDeleting.html">Replacing and Deleting</a>
<a href="buttons.html">Buttons</a>
<a href="templateMaps.html">Template Maps</a>
<a href="legends.html">Legends and Titles</a>
<a href="extensions.html">Extensions</a>
<a href="geometry.html">Geometry Strings</a>
<a href="grids.html">Grid Patterns</a>
<a href="graduatedPanels.html">Graduated Panels</a>
<a href="makingImages.html">Diagram Images</a>
<a href="makingSVG.html">Diagram SVG</a>
<a href="printing.html">Printing</a>
<a href="serverSideImages.html">Server-side Images</a>
<a href="nodeScript.html">GoJS in Node.js</a>
<a href="testing.html">Testing</a>
<a href="storage.html">Storage</a>
<a href="performance.html">Performance</a>
<a href="source.html">Building from Source</a>
<a href="platforms.html">Platforms</a>
<a href="deployment.html">Deployment</a>
    </nav>
  </div>      
    <div class="pt-4 px-2 md:px-0 lg:px-4 pb-16 w-full overflow-hidden">
132
133
134<h1>GoJS Animation</h1>
135<p>
<b>GoJS</b> offers several built-in animations, enabled by default, as well as the ability to create arbitrary animations.
137</p>
138<p>
The <a>Diagram.animationManager</a> handles animations within a <a>Diagram</a>.
The <a>AnimationManager</a> automatically sets up and dispatches default animations, and has properties to customize and disable them.
Custom animations are possible by creating instances of <a>Animation</a> or <a>AnimationTrigger</a>.
142</p>
143
144<div class="box" style="background-color: lightgoldenrodyellow; padding: 10px;">
<p>This introduction page details the different classes used for GoJS animation.</p>
<p>To see more demonstrations of custom animations, visit the <a href="../samples/customAnimations.html">Custom Animations extension sample</a>.</p>
147</div>
148
149
150<h2 id="DefaultAnimations">Default Animations</h2>
151
152<p>
By default, the AnimationManager creates and runs several animations for its Diagram using a single
instance of Animation, the <a>AnimationManager.defaultAnimation</a>.
These animations occur on various commands, by the <a>Diagram.model</a> setter, and upon layouts.
Unlike other Animations, they will be stopped if a new transaction is started during animation.
157</p>
158<p>
GoJS will begin an animation automatically for these reasons:
160</p>
161
162<p>Invoked by <a>CommandHandler</a>:</p>
163<ul>
<li>"Collapse SubGraph" - Animates the collapsing nodes by "disappearing" them, animating their scales and positions into their group.
<li>"Expand SubGraph" - Expands groups by animating the scales and positions of nodes starting within the collapsed group.
<li>"Collapse Tree" - Animates the collapsing nodes by "disappearing" them, animating their scales and positions into the root node.
<li>"Expand Tree" - Expands subtrees by animating the scales and positions of descendant nodes starting within the collapsed root node.
<li>"Scroll To Part" - Animates the <a>Diagram.position</a> and may expand groups or expand subtrees to make the node visible.
<li>"Zoom To Fit" - Animates the <a>Diagram.position</a> and <a>Diagram.scale</a>.
170</ul>
171
172<p>Invoked by <a>Diagram</a>:</p>
173<ul>
174<li>"Model" - Animates all node positions when a new model is set.
175<li>"Layout" - Animates all changed node positions on a layout.
176</ul>
177
178
179<p>Invoked by <a>AnimationTrigger</a>s, if any are declared:</p>
180<ul>
181<li>"Trigger" - Animates the change of a defined <a>GraphObject</a> property.
182</ul>
183
184<p>
185The above quoted names are strings passed to <a>AnimationManager.canStart</a>
186This method can be overridden to return <code>false</code> if you wish to stop specific automatic animations.
187</p>
188
189<h3 id="DefaultAnimations">Default Initial Animation</h3>
190
191<p>
As of GoJS 2.1, the default initial animation fades the diagram upwards into view. Prior versions animated Part locations separately.
To control the initial animation behavior, there now exists <a>AnimationManager.initialAnimationStyle</a>, which is set to <a>AnimationManager,Default</a>
by default, but can be set to <a>AnimationManager,AnimateLocations</a> to use the animation style from GoJS 2.0.
You can also set this property to <a>AnimationManager,None</a> and define your own initial animation using the <code>"InitialAnimationStarting"</code> <a>DiagramEvent</a>.
196</p>
197
198<p>
Here is an example with buttons which set <a>AnimationManager.initialAnimationStyle</a> to the three different values, then reload the Diagram.
A fourth button illustrates how one might use the <code>"InitialAnimationStarting"</code> <a>DiagramEvent</a> to make a custom "zoom in" animation.
201</p>
202
203
204<pre class="lang-js" id="animationStyles"><code>
  diagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape, "RoundedRectangle", { strokeWidth: 0, fill: "lightblue" }),
    $(go.TextBlock,
      { margin: 8, font: "bold 14px sans-serif", stroke: '#333' },
      new go.Binding("text", "key"))
  );
  diagram.model = new go.GraphLinksModel([{ key: 'Alpha' }, { key: 'Beta' }, { key: 'Delta' }, { key: 'Gamma' }]);
213
  // only needed for this demonstration, this flag is used to stop
  // the "InitialAnimationStarting" listener when other buttons are pressed
  window.custom = false;
217
  window.animateDefault = function() {
    window.custom = false;
    diagram.animationManager.initialAnimationStyle = go.AnimationManager.Default;
    diagram.model = go.Model.fromJSON(diagram.model.toJSON());
  }
  window.animateLocations = function() {
    window.custom = false;
    diagram.animationManager.initialAnimationStyle = go.AnimationManager.AnimateLocations;
    diagram.model = go.Model.fromJSON(diagram.model.toJSON());
  }
  window.animateNone = function() {
    window.custom = false;
    diagram.animationManager.initialAnimationStyle = go.AnimationManager.None;
    diagram.model = go.Model.fromJSON(diagram.model.toJSON());
  }
  window.animateCustom = function() {
    window.custom = true;
    diagram.animationManager.initialAnimationStyle = go.AnimationManager.None;
    // Customer listener zooms-in the Diagram on load:
    diagram.addDiagramListener("InitialAnimationStarting", function(e) {
      var animation = e.subject.defaultAnimation;
      if (window.custom === false) {
        // a different button was pressed, restore default values on the default animation:
        animation.easing = go.Animation.EaseInOutQuad;
        animation.duration = NaN;
        return;
      }
      animation.easing = go.Animation.EaseOutExpo;
      animation.duration = 1500;
      animation.add(e.diagram, 'scale', 0.1, 1);
      animation.add(e.diagram, 'opacity', 0, 1);
    })
    diagram.model = go.Model.fromJSON(diagram.model.toJSON());
  }
252
  </code></pre>
  <script>goCode("animationStyles", 600, 200, null, true)</script>
  <p>
    <button id="Animate Colors" onclick="animateDefault()">animationStyle: Default</button>
    <button id="Animate Colors" onclick="animateLocations()">animationStyle: AnimateLocations</button>
    <button id="Animate Colors" onclick="animateNone()">animationStyle: None (does nothing!)</button>
    <button id="Animate Colors" onclick="animateCustom()">animationStyle: None + Custom Animation</button>
260
261
262
263<h3 id="Limitations">Limitations of Default Animations</h3>
264
265<p>
The AnimationManager can be turned off by setting <a>AnimationManager.isEnabled</a> to <code>false</code>.
Specific default animations can be turned off or modified by overriding <a>AnimationManager.canStart</a>
and potentially returning <code>false</code>.
269</p>
270
271<p>
The default animation will be stopped if a new transaction begins during the animation.
The same is not true of other <a>Animation</a>s, which are not stopped by new transactions, and can continue indefinitely.
274</p>
275
276
277<h2 id="AnimatableProperties">Animatable Properties</h2>
278<p>
By default, <a>AnimationTriggers</a> and <a>Animation</a>s can animate these properties of GraphObjects:
280</p>
281<ul>
<li><code>position</code>
<li><code>location</code> (on Parts)
<li><code>scale</code>
<li><code>opacity</code>
<li><code>angle</code>
<li><code>desiredSize</code>
<li><code>width</code>
<li><code>height</code>
<li><code>background</code> (for solid string colors only)
<li><code>areaBackground</code> (for solid string colors only)
<li><code>fill</code> (on Shapes, for solid string colors only)
<li><code>strokeWidth</code> (on Shapes)
<li><code>strokeDashOffset</code> (on Shapes)
<li><code>stroke</code> (on Shapes, TextBlocks, for solid string colors only)
296</ul>
297
298<p>
Additionally <a>Animation</a>s (but not <a>AnimationTriggers</a>) can animate these properties of Diagram:
300</p>
301<ul>
<li><code>position</code>
<li><code>scale</code>
<li><code>opacity</code>
305</ul>
306
307<p>
308It is possible to animate other properties if they are defined by the programmer -- see the section "Custom Animation Effects" below.
309</p>
310
311<h2 id="AnimationTriggerClass">The AnimationTrigger Class</h2>
312
313<p class="box" style="background-color: lightgoldenrodyellow;">
<em>New in 2.1</em>
315</p>
316
317<p>
An <a>AnimationTrigger</a> is used to declare GraphObject properties to animate when their value has changed.
When a trigger is defined, changes to the target property will animate from the old value to the new value.
In templates, triggers are defined in a similar fashion to Bindings:
321</p>
322
323<pre class="lang-js"><code>
324// In this shape definition, two triggers are defined on a Shape.
325// These will cause all changes to Shape.stroke and Shape.fill to animate
326// from their old values to their new values.
327$(go.Shape, "Rectangle",
{ strokeWidth: 12, stroke: 'black', fill: 'white' },
new go.AnimationTrigger('stroke'),
new go.AnimationTrigger('fill')
331)
332</code></pre>
333
334<p>
335Here is an example, with an HTML button that sets the Shape's <code>stroke</code> and <code>fill</code> to new random values:
336</p>
337
338<pre class="lang-js" id="animateTrigger1"><code>
339diagram.nodeTemplate =
$(go.Node,
  $(go.Shape, "Rectangle",
    { strokeWidth: 12, stroke: 'black', fill: 'white' },
    new go.AnimationTrigger('stroke'),
    new go.AnimationTrigger('fill')
  )
);
347
348diagram.model = new go.GraphLinksModel([{ key: 'Alpha' }]); // One node
349
350// attach this Diagram to the window to use a button
351window.animateTrigger1 = function() {
diagram.commit(function(diag) {
  var node = diag.nodes.first();
  node.elt(0).stroke = go.Brush.randomColor();
  node.elt(0).fill = go.Brush.randomColor();
});
357}
358
359</code></pre>
360<script>goCode("animateTrigger1", 600, 200, null, true)</script>
361<p><button id="Animate Colors" onclick="animateTrigger1()">Animate Colors</button>
362
363<p>
AnimationTriggers can invoke an animation immediately, starting a new animation with each property of each GraphObject that has been modified,
or they can (much more efficiently) be bundled together into the default
animation (<a>AnimationManager.defaultAnimation</a>) and begin at the end of the next transaction.
These behaviors can be set with <a>AnimationTrigger.startCondition</a> by the values
<a>AnimationTrigger,Immediate</a> and <a>AnimationTrigger,Bundled</a>, respectively.
The default value, <a>AnimationTrigger,Default</a>, attempts to infer which is best.
It will start immediately if there is no ongoing transaction or if <a>Diagram.skipsUndoManager</a> is true.
371</p>
372
373<p>
AnimationTriggers are only definable in templates, on GraphObjects, and cannot be used on RowColumnDefinitions or Diagrams.
375</p>
376
377<h2 id="AnimationClass">The Animation Class</h2>
378
379<p class="box" style="background-color: lightgoldenrodyellow">
<em>New in 2.1</em>
381</p>
382<p>
General animation of GraphObject and Diagram properties is possible by creating one or more instances of the <a>Animation</a> class.
384</p>
385
386<pre class="lang-js"><code>
387var animation = new go.Animation();
388// Animate the node's angle from its current value to a random value between 0 and 180 degrees
389animation.add(node, "angle", node.angle, Math.random() * 180);
390animation.duration = 1000; // Animate over 1 second, instead of the default 600 milliseconds
391animation.start(); // starts the animation immediately
392</code></pre>
393
394<p>
<a>Animation.add</a> is used to specify which objects should animate, which properties, and their starting and ending values:
396</p>
397
398<pre class="lang-js"><code>
animation.add(GraphObjectOrDiagram, "EffectName", StartingValue, EndingValue);
400</code></pre>
401
402<p>
Here's the above animation in an example, where each node is animated by an HTML button.
Note carefully that each node is added to the same animation. The same effect would be had with one animation per node,
but it is always more efficient to group the properties you are animating into a single animation, if possible
(for instance, it is possible if they are all going to start at the same time and have the same duration).
407</p>
408
409<pre id="animate1" class="lang-js"><code>
410// define a simple Node template
411diagram.nodeTemplate =
$(go.Node, "Spot",
  { locationSpot: go.Spot.Center },
  new go.Binding("angle"),
  $(go.Shape, "Diamond", { strokeWidth: 0, width: 75, height: 75 },
    new go.Binding("fill", "color")),
  $(go.TextBlock,
    { margin: 8, font: 'bold 12pt sans-serif' },
    new go.Binding("text", "key"))
);
421
422diagram.model = new go.GraphLinksModel(
[
  { key: "Alpha", color: "lightblue" },
  { key: "Beta", color: "orange" },
  { key: "Gamma", group: 'G1',  color: "lightgreen" },
  { key: "Delta", group: 'G1',  color: "pink", angle: 45 }
],
[
  { from: "Alpha", to: "Beta" },
  { from: "Gamma", to: "Delta" }
]);
433
434window.animate1 = function() {
var animation = new go.Animation();
diagram.nodes.each(function(node) {
  // Animate the node's angle from its current value to a random value between 0 and 150 degrees
  animation.add(node, "angle", node.angle, Math.random() * 150);
});
animation.duration = 1000; // Animate over 1 second, instead of the default 600 milliseconds
animation.start(); // starts the animation immediately
442}
443</code></pre>
444<script>goCode("animate1", 600, 250, null, true)</script>
445<p><button id="Animate Nodes" onclick="animate1()">Animate Node Angles</button>
446
447<p>
Animating the Diagram is possible by passing it as the object to be animated:
449</p>
450<pre class="lang-js"><code>
animation.add(myDiagram, "position", myDiagram.position, myDiagram.position.copy().offset(200, 15));
...
animation.add(myDiagram, "scale", myDiagram.scale, 0.2);
454</code></pre>
455
456<p>
Animations can also be reversed, as is common with animations that are intended to be cosmetic in nature, by setting <a>Animation.reversible</a> to true.
This doubles the effective duration of the Animation.
459</p>
460<p>
Below are several example Animations, all with <a>Animation.reversible</a> set to true. The first animates Nodes, the other three animate Diagram position and scale.
462</p>
463
464<pre class="lang-js" id="animate2"><code>
  // define a simple Node template
  diagram.nodeTemplate =
    $(go.Node, "Spot",
      { locationSpot: go.Spot.Center },
      new go.Binding("angle"),
      $(go.Shape, "Diamond", { strokeWidth: 0, width: 75, height: 75 },
        new go.Binding("fill", "color")),
      $(go.TextBlock,
        { margin: 8, font: 'bold 12pt sans-serif' },
        new go.Binding("text", "key"))
    );
476
  diagram.model = new go.GraphLinksModel(
  [
    { key: "Alpha", color: "lightblue" },
    { key: "Beta", color: "orange" },
    { key: "Gamma", group: 'G1',  color: "lightgreen" },
    { key: "Delta", group: 'G1',  color: "pink" }
  ],
  [
    { from: "Alpha", to: "Beta" },
    { from: "Gamma", to: "Delta" }
  ]);
488
  function protectedAnimation(f) {  // return a button event handler to start an animation
    return function() {
      // Stop any currently running animations
      diagram.animationManager.stopAnimation(true);
493
      var animation = new go.Animation();
      animation.reversible = true; // reverse the animation at the end, doubling its total time
      f(animation);  // initialize the Animation
      animation.start(); // start the animation immediately
    };
  }
500
  window.animateAngleReverse =
    protectedAnimation(function(animation) {
      diagram.nodes.each(function(node) {
        // Animate the node's angle from its current value a random value between 0 and 90
        animation.add(node, "angle", node.angle, Math.random() * 90);
      });
    });
508
  window.animateDiagramPosition =
    protectedAnimation(function(animation) {
      // shift the diagram contents towards the right and then back
      animation.add(diagram, "position", diagram.position, diagram.position.copy().offset(200, 15));
      animation.duration = 700;
    });
515
  window.animateZoomOut =
    protectedAnimation(function(animation) {
      animation.add(diagram, "scale", diagram.scale, 0.2);
    });
520
  window.animateZoomIn =
    protectedAnimation(function(animation) {
      animation.add(diagram, "scale", diagram.scale, 4);
    });
</code></pre>
<script>goCode("animate2", 600, 250, null, true)</script>
<p>
  <button id="AnimateAngleReverse" onclick="animateAngleReverse()">Animate Angles (reverse)</button>
  <button id="AnimateDiagramPosition" onclick="animateDiagramPosition()">Animate Diagram Position (reverse)</button>
  <button id="AnimateZoomOut" onclick="animateZoomOut()">Zoom Out (reverse)</button>
  <button id="AnimateZoomIn" onclick="animateZoomIn()">Zoom In (reverse)</button>
</p>
<p>
  Without the call to <a>AnimationManager.stopAnimation</a> to protect against rapid button clicks,
  you would notice that if you clicked Zoom Out, and then during the animation clicked the same button again,
  the Diagram's scale would not return to its initial value of 1.0.
  This is because the Animation animates from the <em>current</em> Diagram scale value, to its final value, and back again,
  but the current value is also what's being changed due to the ongoing animation.
</p>
540
<h3 id="CustomAnimationEffects">Custom Animation Effects</h3>
542
<p>
  It is sometimes helpful to add custom ways to modify one or more properties during an animation.
  You can register new animatable effects with <a>AnimationManager,defineAnimationEffect</a>.
  The name passed is an arbitrary string, but often reflects a property of a GraphObject class.
  The body of the function passed determines what property or properties are animated.
</p>
<p>
550
</p>
<p>
  Here is an example, creating an <code>"fraction"</code> Animation effect to animate the value of <a>GraphObject.segmentFraction</a>,
  which will give the appearance of a Link label moving along its path.
</p>
556<pre class="lang-js"><code>
557// This presumes the object to be animated is a label within a Link
558go.AnimationManager.defineAnimationEffect('fraction',
559function(obj, startValue, endValue, easing, currentTime, duration, animation) {
obj.segmentFraction = easing(currentTime, startValue, endValue - startValue, duration);
561});
562</code></pre>
563
564<p>
After defining this, we can use it as a property name in an Animation.
The following example sets up an indefinite (<a>Animation.runCount</a> = <code>Infinity</code>) and reversible
animation, where each link is assigned a random duration to cycle the fill color and segmentFraction of its label.
This produces labels that appear to move along their path while pulsating colors. The setting of <a>Animation.reversible</a>
causes them to go backwards once finished, to start from their beginning again.
570</p>
571<pre class="lang-js"><code>
function animateColorAndFraction() {
  // create one Animation for each link, so that they have independent durations
  myDiagram.links.each(function(node) {
    var animation = new go.Animation()
    animation.add(node.elt(1), "fill", node.elt(0).fill, go.Brush.randomColor());
    animation.add(node.elt(1), "fraction", 0, 1);
    animation.duration = 1000 + (Math.random()*2000);
    animation.reversible = true; // Re-run backwards
    animation.runCount = Infinity; // Animate forever
    animation.start();
  });
}
584</code></pre>
585
586<pre id="animate3" style="display: none;"><code>
diagram.nodeTemplate =
$(go.Node, "Auto",
  $(go.Shape, "RoundedRectangle", { strokeWidth: 0 },
    new go.Binding("fill", "color")),
  $(go.TextBlock,
    { margin: 8 },
    new go.Binding("text", "key"))
);
595
diagram.linkTemplate =
$(go.Link,
  $(go.Shape, { strokeWidth: 2 }),
  // The label
  $(go.Shape, "Circle", { segmentIndex: 0, width: 15, height: 15, fill: 'red', strokeWidth: 2 })
);
602
diagram.model = new go.GraphLinksModel(
[
  { key: "Alpha", color: "lightblue" },
  { key: "Gamma", color: "lightgreen" },
  { key: "Delta", color: "pink" }
],
[
  { from: "Alpha", to: "Gamma" },
  { from: "Gamma", to: "Delta" },
  { from: "Delta", to: "Alpha" }
]);
614
615
// This presumes the object to be animated is a label within a Link
go.AnimationManager.defineAnimationEffect('fraction',
function(obj, startValue, endValue, easing, currentTime, duration, animation) {
  obj.segmentFraction = easing(currentTime, startValue, endValue - startValue, duration);
});
621
622
window.animateColorAndFraction = function() {
  // create one Animation for each link, so that they have independent durations
  diagram.links.each(function(node) {
    var animation = new go.Animation()
    animation.add(node.elt(1), "fill", node.elt(0).fill, go.Brush.randomColor());
    animation.add(node.elt(1), "fraction", 0, 1);
    animation.duration = 1000 + (Math.random()*2000);
    animation.reversible = true; // Re-run backwards
    animation.runCount = Infinity; // Animate forever
    animation.start();
  });
}
</code></pre>
<script>goCode("animate3", 600, 200, null, true)</script>
<p><button id="animateColorAndFraction" onclick="animateColorAndFraction()">Animate Color and Segment Fraction</button>
638
<p>Since <a>Animation.runCount</a> was set to <code>Infinity</code>, this Animation wil run indefinitely.</p>
640
<h3 id="AnimatingDeletion">Animating Deletion</h3>
642
<p>
  Parts to be deleted can be animated, but since they will no longer exist in the Diagram after removal,
  a copy must be added to the Animation so that there is an object to animate.
  This can be done with <a>Animation.addTemporaryPart</a>.
  The part can then have its deletion animated using <a>Animation.add</a>.
  This temporary part will be the object that animates,
  and will automatically appear when animation begins and be removed when animaton completes.
  It is typical for deletion animations to shrink the mock Part, move it off-screen, reduce its opacity to zero,
  or otherwise show it disappearing in some way.
</p>
<p>
  In this example, each Part being deleted will be scaled to an imperceptible size (by animating scale to 0.01)
  and spun around (by animating angle), to give the appearance of swirling away. There are other example
  deletion (and creation) effects in the <a href="../samples/customAnimations.html">Custom Animations extension sample</a>.
</p>
<pre class="lang-js"><code>
659myDiagram.addDiagramListener('SelectionDeleting', function(e) {
// the DiagramEvent.subject is the collection of Parts about to be deleted
e.subject.each(function(part) {
  if (!(part instanceof go.Node)) return; // only animate Nodes
  var animation = new go.Animation();
  var deletePart = part.copy();
  animation.add(deletePart, "scale", deletePart.scale, 0.01);
  animation.add(deletePart, "angle", deletePart.angle, 360);
  animation.addTemporaryPart(deletePart, myDiagram);
  animation.start();
});
670});
671</code></pre>
672
673
674<pre id="animate4" style="display: none;">
  // define a simple Node template
  diagram.nodeTemplate =
    $(go.Node, "Spot",
      { locationSpot: go.Spot.Center },
      new go.Binding("angle"),
      $(go.Shape, "Ellipse",
        {
          fill: "hsl(" + ((Math.random()*360)|0) + ", 100%, 80%)",
          strokeWidth: 4, strokeDashArray: [8, 8],
          width: 55, height: 55
        }),
      $(go.TextBlock,
        new go.Binding("text", "key"))
    );
689
  diagram.model = new go.GraphLinksModel(
    [
      { key: "Alpha" },
      { key: "Beta" },
      { key: "Gamma" },
      { key: "Delta" }
    ],
    [ ]);
698
  diagram.addDiagramListener('SelectionDeleting', function(e) {
    // the DiagramEvent.subject is the collection of Parts about to be deleted
    e.subject.each(function(part) {
      if (!(part instanceof go.Node)) return; // only animate Nodes
      var animation = new go.Animation();
      var deletePart = part.copy();
      animation.add(deletePart, "scale", deletePart.scale, 0.01);
      animation.add(deletePart, "angle", deletePart.angle, 360);
      animation.addTemporaryPart(deletePart, diagram);
      animation.start();
    });
  });
711
  window.deleteNode = function() {
    if (diagram.selection.count === 0) diagram.select(diagram.nodes.first());
    diagram.commandHandler.deleteSelection();
  }
</code></pre>
<script>goCode("animate4", 600, 200, null, true)</script>
<p><button onclick="deleteNode()">Delete a Node</button>
719
720
<h3 id="AnimationExamples">Animation Examples</h3>
722
<p>
  To see more examples of custom animations, visit the <a href="../samples/customAnimations.html">Custom Animations extension sample</a>.
  It demonstrates a number of Node creation/deletion animations, linking animations, and more.
  There are also several samples which contain animation:
</p>
728
<ul>
  <li><a href="../samples/animatedFocus.html" target="_blank">Animated Focus</a> - Scroll to center a Node in the viewport, while zooming a copy of that node for attention.</li>
  <li><a href="../samples/treeLoadAnimation.html" target="_blank">Tree Load Animation</a> - Recursive animation upon model load.</li>
  <li><a href="../samples/dataVisualization.html" target="_blank">Data Visualization</a> - Nodes now move using an <a>AnimationTrigger</a>.</li>
  <li><a href="../samples/kittenMonitor.html" target="_blank">Kitten Monitor</a> - Kittens now move using an <a>AnimationTrigger</a>.</li>
  <li><a href="../samples/processFlow.html" target="_blank">Process Flow</a> - Custom animation defined to animate the Link Shape's strokeDashArray.</li>
  <li><a href="../samples/belts.html" target="_blank">Belts and Rollers</a> - Apparent movement of the belts by animating the strokeDashArray.</li>
  <li><a href="../samples/shopFloorMonitor.html" target="_blank">Shop Floor Monitor</a> - Link color changes now use an <a>AnimationTrigger</a>.</li>
  <li><a href="../samples/flowchart.html" target="_blank">Flowchart</a> - In the Palette only, initial animation is disabled in favor of a custom fade-in animation.</li>
  <li><a href="../samples/stateChart.html" target="_blank">State Chart</a> - Initial animation is disabled in favor of a custom zoom fade-in animation.</li>
</ul>
740
    </div>
  </div>

<div class="bg-nwoods-primary">
  <section class="max-w-screen-lg text-white container mx-auto py-2 px-12">
    <p id="version" class="leading-none mb-2 my-4">GoJS</p>
  </section>
</div><footer class="bg-nwoods-primary text-white">
<div class="container max-w-screen-lg mx-auto  px-8">
  <div class="w-full py-6">
751
      <div class="max-w-screen-lg xl:max-w-screen-xl mx-auto px-4 sm:px-6 md:px-8">
        <ul class="text-sm font-medium pb-14 sm:pb-20 grid grid-cols-1 sm:grid-cols-3 gap-y-10">
          <li class="list-none row-span-2">
            <h2 class="text-base font-semibold tracking-wide">GoJS</h2>
            <ul class="list-none space-y-4 md:space-y-1 px-0">
              <li>
                <a href="../samples/index.html">Samples</a>
              </li>
              <li>
                <a href="../learn/index.html">Learn</a>
              </li>
              <li>
                <a href="../intro/index.html">Intro</a>
              </li>
              <li>
                <a href="../api/index.html">API</a>
              </li>
              <li>
                <a href="../changelog.html">Changelog</a>
              </li>
              <li>
                <a href="https://github.com/NorthwoodsSoftware/GoJS">GitHub</a>
              </li>
            </ul>
          </li>
          <li class="list-none row-span-2">
            <h2 class="text-base font-semibold tracking-wide">Support</h2>
            <ul class="list-none space-y-4 md:space-y-1 px-0">
              <li>
                <a href="https://www.nwoods.com/contact.html"
                target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a>
              </li>
              <li>
                <a href="https://forum.nwoods.com/c/gojs">Forum</a>
              </li>
              <li>
                <a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a>
              </li>
              <li>
                <a href="https://www.nwoods.com/sales/index.html"
                target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a>
              </li>
              <li>
                <a href="https://www.youtube.com/channel/UC9We8EoX596-6XFjJDtZIDg">Videos</a>
              </li>
            </ul>
          </li>
          <li class="list-none row-span-2">
            <h2 class="text-base font-semibold tracking-wide">Company</h2>
            <ul class="list-none space-y-4 md:space-y-1 px-0">
              <li>
                <a href="https://www.nwoods.com">Northwoods</a>
              </li>
              <li>
                <a href="https://www.nwoods.com/about.html">About Us</a>
              </li>
              <li>
                <a href="https://www.nwoods.com/contact.html">Contact Us</a>
              </li>
              <li>
                <a href="https://twitter.com/northwoodsgo">Twitter</a>
              </li>
814
            </ul>
          </li>
        </ul>
818
819
    <p class="text-sm text-gray-100 md:mb-6">
      Copyright 1998-2021 <a class="text-white" href="https://www.nwoods.com">Northwoods Software</a>
    </p>
  </div>
</div>
825</footer>  </body>
826
827<script async src="https://www.googletagmanager.com/gtag/js?id=UA-1506307-5"></script> 
828<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date()); gtag('config', 'UA-1506307-5');
var getOutboundLink = function(url, label) {
  gtag('event', 'click', {
    'event_category': 'outbound',
    'event_label': label,
    'transport_type': 'beacon'
  });
}
839
// topnav
var topButton = document.getElementById("topnavButton");
var topnavList = document.getElementById("topnavList");
topButton.addEventListener("click", function() {
  this.classList.toggle("active");
  topnavList.classList.toggle("hidden");
  document.getElementById("topnavOpen").classList.toggle("hidden");
  document.getElementById("topnavClosed").classList.toggle("hidden");
});
849</script>
<script src="../assets/js/prism.js"></script>
<script src="../release/go.js"></script>
<script src="../assets/js/goDoc.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    if (window.go) document.getElementById('version').textContent = "GoJS version " + go.version;
    if (window.goDoc) window.goDoc();
    var d = window.diagrams;
    for (var i = 0; i < d.length; i++) {
      var dargs = d[i];
      goCodeExecute(dargs[0], dargs[1], dargs[2], dargs[3], dargs[4]);
    }
    if (window.extra) window.extra();
  });
</script>
865</html>