gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
169 lines • 50.4 kB
HTML
<!DOCTYPE html><html class="default"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>Animation | GoJS API</title><meta name="description" content="Documentation for GoJS API"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../../assets/css/style.css"/><link rel="stylesheet" href="../assets/style-tsd.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.body.classList.add(localStorage.getItem("tsd-theme") || "os")</script><header><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\n font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary" href="../../index.html"><h1 class="my-0 p-1 leading-none">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/index.html">Learn</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="../../samples/index.html">Samples</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="../../intro/index.html">Intro</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="../../api/index.html">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" id="contactBtn">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" id="buyBtn">Buy</a></li></ul></div></div><hr class="border-b border-gray-600 opacity-50 my-0 py-0"/></nav><div class="tsd-page-header"><div class="tsd-page-toolbar"><div class="w-full max-w-screen-xl mx-auto px-2"><div class="table-wrap"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget search no-caption">Search</label><input type="text" id="tsd-search-field"/></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">GoJS API</a></div><div class="table-cell" id="tsd-widgets"><div id="tsd-filter"><a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a><div class="tsd-filter-group"><div class="tsd-select" id="tsd-filter-visibility"><span class="tsd-select-label">All</span><ul class="tsd-select-list"><li data-value="public">Public</li><li data-value="protected">Public/Protected</li><li data-value="private" class="selected">All</li></ul></div> <input type="checkbox" id="tsd-filter-inherited"/><label class="tsd-widget" for="tsd-filter-inherited">Inherited</label></div></div><a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a></div></div></div></div></div><div class="tsd-page-title"><div class="w-full max-w-screen-xl mx-auto px-2"><div class="top-copyright"><b>GoJS</b>® Diagramming Components<br/>version 2.3.8<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a></div><div><h1>Class Animation </h1></div></div></div></header><div class="tsd w-full max-w-screen-xl mx-auto pb-4"><div class="row px-2 w-full"><div class="col-8 col-content"><section class="tsd-panel tsd-hierarchy"><h3>Hierarchy</h3><ul class="tsd-hierarchy"><li><span class="target">Animation</span></li></ul></section><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography">
<p>Animations are used to animate <a href="GraphObject.html">GraphObject</a> and <a href="Diagram.html">Diagram</a> properties.</p>
<div><p>This class is useful for creating manual animations.
If you wish to animate particular properties on a GraphObject every time their value changes,
you may want to use <a href="AnimationTrigger.html">AnimationTrigger</a>s instead, which automatically create and start Animations.</p>
<p>The <a href="AnimationManager.html#defaultAnimation">AnimationManager.defaultAnimation</a> is an instance of this class, and carries out the
default animations in GoJS: Model load, layout, expand and collapse, and so on.
See the <a href="../../intro/animation.html">Introduction Page on Animations</a> for more detail on the different kinds of animations.</p>
<p>Manual animations are set up by creating an instance of this class, and calling <a href="Animation.html#add">add</a> at least once, then calling <a href="Animation.html#start">start</a>.
The method <a href="Animation.html#add">add</a> specifies which objects and which animation effects/properties to animate, plus start and end values for the property.
As objects are added to an Animation, the Animation infers which <a href="Diagram.html">Diagram</a> and <a href="AnimationManager.html">AnimationManager</a> is relevant.</p>
<p>Animations are started by calling <a href="Animation.html#start">start</a>, and stopped when the <a href="Animation.html#duration">duration</a> is reached, or when <a href="Animation.html#stop">stop</a> is called,
or stopped when <a href="AnimationManager.html#stopAnimation">AnimationManager.stopAnimation</a> is called with <code>true</code> as its argument.</p>
<p>Animations can continue indefinitely if <a href="Animation.html#runCount">runCount</a> is set to <code>Infinity</code>.
Animations can act upon temporary copies of an object that will get destroyed by calling <a href="Animation.html#addTemporaryPart">addTemporaryPart</a>.
This is useful when crafting cosmetic animations of parts that are about to be deleted:
Since the part will no longer exist, you can instead animate a temporary part disappearing.</p>
<p>A simple example usage is this:</p>
<pre><code class="language-js"><span class="hl-1">var</span><span class="hl-2"> </span><span class="hl-4">node</span><span class="hl-2"> = </span><span class="hl-4">myDiagram</span><span class="hl-2">.</span><span class="hl-4">nodes</span><span class="hl-2">.</span><span class="hl-5">first</span><span class="hl-2">();</span><br/><span class="hl-1">var</span><span class="hl-2"> </span><span class="hl-4">shape</span><span class="hl-2"> = </span><span class="hl-4">part</span><span class="hl-2">.</span><span class="hl-5">findObject</span><span class="hl-2">(</span><span class="hl-6">"SHAPE"</span><span class="hl-2">); </span><span class="hl-0">// assumes this Node contains a go.Shape with .name = "SHAPE"</span><br/><span class="hl-1">var</span><span class="hl-2"> </span><span class="hl-4">animation</span><span class="hl-2"> = </span><span class="hl-1">new</span><span class="hl-2"> </span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-5">Animation</span><span class="hl-2">();</span><br/><span class="hl-0">// Animate this Node from its current position to (400, 500)</span><br/><span class="hl-4">animation</span><span class="hl-2">.</span><span class="hl-5">add</span><span class="hl-2">(</span><span class="hl-4">node</span><span class="hl-2">, </span><span class="hl-6">"position"</span><span class="hl-2">, </span><span class="hl-4">node</span><span class="hl-2">.</span><span class="hl-4">position</span><span class="hl-2">, </span><span class="hl-1">new</span><span class="hl-2"> </span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-5">Point</span><span class="hl-2">(</span><span class="hl-7">400</span><span class="hl-2">, </span><span class="hl-7">500</span><span class="hl-2">));</span><br/><span class="hl-0">// Animate the fill of the Shape within the Node, from its current color to blue</span><br/><span class="hl-4">animation</span><span class="hl-2">.</span><span class="hl-5">add</span><span class="hl-2">(</span><span class="hl-4">shape</span><span class="hl-2">, </span><span class="hl-6">"fill"</span><span class="hl-2">, </span><span class="hl-4">shape</span><span class="hl-2">.</span><span class="hl-4">fill</span><span class="hl-2">, </span><span class="hl-6">"blue"</span><span class="hl-2">);</span><br/><span class="hl-0">// Both of these effects will animate simultaneously when start() is called:</span><br/><span class="hl-4">animation</span><span class="hl-2">.</span><span class="hl-5">start</span><span class="hl-2">();</span>
</code></pre>
<p>See the <a href="../../intro/animation.html">Introduction Page on Animations</a> and the <a href="../../samples/customAnimations.html">Custom Animations sample</a>
for more example usage of the Animation class.</p>
<p>Unlike the <a href="AnimationManager.html#defaultAnimation">AnimationManager.defaultAnimation</a>, Animations can be started any time,
and do not stop automatically when a new transaction begins.</p>
</div><dl class="tsd-comment-tags"><dt class="">since</dt><dd><p>2.1</p>
</dd></dl></div></section><section class="tsd-panel-group tsd-index-group"><h2>Index</h2><section class="tsd-panel tsd-index-panel"><div class="tsd-index-content"><section class="tsd-index-section "><h3>Constructors</h3><ul class="tsd-index-list"><li class="tsd-kind-constructor tsd-parent-kind-class"><a href="Animation.html#constructor" class="tsd-kind-icon">constructor</a></li></ul></section><section class="tsd-index-section "><h3>Properties</h3><ul class="tsd-index-list"><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Animation.html#duration" class="tsd-kind-icon">duration</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Animation.html#easing" class="tsd-kind-icon">easing</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Animation.html#finished" class="tsd-kind-icon">finished</a></li><li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Animation.html#isAnimating" class="tsd-kind-icon">is<wbr/>Animating</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Animation.html#isViewportUnconstrained" class="tsd-kind-icon">is<wbr/>Viewport<wbr/>Unconstrained</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Animation.html#reversible" class="tsd-kind-icon">reversible</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Animation.html#runCount" class="tsd-kind-icon">run<wbr/>Count</a></li></ul></section><section class="tsd-index-section "><h3>Methods</h3><ul class="tsd-index-list"><li class="tsd-kind-method tsd-parent-kind-class"><a href="Animation.html#add" class="tsd-kind-icon">add</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Animation.html#addTemporaryPart" class="tsd-kind-icon">add<wbr/>Temporary<wbr/>Part</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Animation.html#getTemporaryState" class="tsd-kind-icon">get<wbr/>Temporary<wbr/>State</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Animation.html#start" class="tsd-kind-icon">start</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Animation.html#stop" class="tsd-kind-icon">stop</a></li></ul></section><section class="tsd-index-section "><h3>Constants</h3><ul class="tsd-index-list"><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Animation.html#static-EaseInExpo" class="tsd-kind-icon">Ease<wbr/>In<wbr/>Expo</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Animation.html#static-EaseInOutQuad" class="tsd-kind-icon">Ease<wbr/>In<wbr/>Out<wbr/>Quad</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Animation.html#static-EaseInQuad" class="tsd-kind-icon">Ease<wbr/>In<wbr/>Quad</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Animation.html#static-EaseLinear" class="tsd-kind-icon">Ease<wbr/>Linear</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Animation.html#static-EaseOutExpo" class="tsd-kind-icon">Ease<wbr/>Out<wbr/>Expo</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Animation.html#static-EaseOutQuad" class="tsd-kind-icon">Ease<wbr/>Out<wbr/>Quad</a></li></ul></section></div></section></section><section class="tsd-panel-group tsd-member-group "><h2>Constructors</h2><section class="tsd-panel tsd-member tsd-kind-constructor tsd-parent-kind-class"><a id="constructor" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> constructor<a href="#constructor" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-signatures tsd-kind-constructor tsd-parent-kind-class"><li class="tsd-signature tsd-kind-icon">new <wbr/>Animation<span class="tsd-signature-symbol">(</span>init<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="Animation.html" class="tsd-signature-type" data-tsd-kind="Class">Animation</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Animation.html" class="tsd-signature-type" data-tsd-kind="Class">Animation</a></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>The constructor creates an Animation.
A single Animation can animate multiple objects via multiple calls to <a href="Animation.html#add">add</a>.
When you are ready to begin the animation, call <a href="Animation.html#start">start</a>.</p>
</div><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5><span class="tsd-flag ts-flagOptional">Optional</span> init: <span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="Animation.html" class="tsd-signature-type" data-tsd-kind="Class">Animation</a><span class="tsd-signature-symbol">></span></h5><div class="tsd-comment tsd-typography">
<p>Optional properties to initialize.</p>
</div></li></ul><h4 class="tsd-returns-title">Returns <a href="Animation.html" class="tsd-signature-type" data-tsd-kind="Class">Animation</a></h4></li></ul></section></section><section class="tsd-panel-group tsd-member-group "><h2>Properties</h2><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="duration" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> duration<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><a href="#duration" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets or sets the duration for animations, in milliseconds.</p>
<div><p>The default value is <code>NaN</code>, which means it inherits the default value from the <a href="AnimationManager.html#duration">AnimationManager.duration</a>,
which defaults to 600 milliseconds.</p>
<p>The value must be a number greater than or equal to 1, or <code>NaN</code>.
Setting this property does not raise any events.</p>
</div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="easing" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> easing<span class="tsd-signature-symbol">: </span><a href="../index.html#EasingFunction" class="tsd-signature-type" data-tsd-kind="Type alias">EasingFunction</a><a href="#easing" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets or sets the easing function this Animation will use to modify default properties.</p>
<div><p>Pre-defined animatable values are processed by passing scalars into this easing function.</p>
<p>The default value is <a href="Animation.html#static-EaseInOutQuad">Animation.EaseInOutQuad</a>.</p>
<p>The value can be an arbitrary easing function, or one of the six provided:
<a href="Animation.html#static-EaseLinear">Animation.EaseLinear</a>, <a href="Animation.html#static-EaseInOutQuad">Animation.EaseInOutQuad</a>, <a href="Animation.html#static-EaseInQuad">Animation.EaseInQuad</a>,
<a href="Animation.html#static-EaseOutQuad">Animation.EaseOutQuad</a>, <a href="Animation.html#static-EaseInExpo">Animation.EaseInExpo</a>, <a href="Animation.html#static-EaseOutExpo">Animation.EaseOutExpo</a>.</p>
</div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="finished" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> finished<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span>animation<span class="tsd-signature-symbol">: </span><a href="Animation.html" class="tsd-signature-type" data-tsd-kind="Class">Animation</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> => </span><span class="tsd-signature-type">void</span><a href="#finished" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets or sets the function to execute when the user Animation finishes.</p>
<div><p>By default this property is null.</p>
</div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class"><a id="isAnimating" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagReadOnly">Read-only</span> is<wbr/>Animating<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><a href="#isAnimating" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>This read-only property is true when the Animation is currently running.</p>
<div><p>This value cannot be set, but Animation can be stopped by calling <a href="Animation.html#stop">stop</a>.</p>
</div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="isViewportUnconstrained" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> is<wbr/>Viewport<wbr/>Unconstrained<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><a href="#isViewportUnconstrained" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets or sets whether this Animation should allow an unconstrained viewport during the runtime of the animation.
This temporarily sets the <a href="Diagram.html#scrollMode">Diagram.scrollMode</a> to <a href="Diagram.html#static-InfiniteScroll">Diagram.InfiniteScroll</a>, and restores the value at the end of the animation.
This is done so that animating objects can move out of the viewport temporarily during the animation and not trigger scrollbars.</p>
<div><p>This may be useful to set for animations that have objects or the Diagram bounds animate from outside the viewport into the view.
The default value is true.</p>
</div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="reversible" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> reversible<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><a href="#reversible" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets or sets whether this Animation will repeat its animation in reverse at the end of the duration. Default false.</p>
<div><p>A reversible Animation, if stopped early, will end at its original state.
Setting this to true doubles the effective <a href="Animation.html#duration">duration</a> of the Animation.</p>
<p>This property should not be set on the <a href="AnimationManager.html#defaultAnimation">AnimationManager.defaultAnimation</a></p>
</div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="runCount" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> run<wbr/>Count<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><a href="#runCount" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets or sets whether this Animation should be repeat, and how many times. The default is 1, which means the animation does not repeat.</p>
<div><p>This can be set to any non-zero positive integer, or <code>Infinity</code>. Setting this to <code>Infinity</code> will repeat an animation forever.</p>
<p>This property should not be set on the <a href="AnimationManager.html#defaultAnimation">AnimationManager.defaultAnimation</a></p>
</div><dl class="tsd-comment-tags"><dt class="">see</dt><dd><p><a href="Animation.html#reversible">reversible</a></p>
</dd></dl></div></li></ul></section></section><section class="tsd-panel-group tsd-member-group "><h2>Methods</h2><section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="add" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> add<a href="#add" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class"><li class="tsd-signature tsd-kind-icon">add<span class="tsd-signature-symbol">(</span>obj<span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type" data-tsd-kind="Class">GraphObject</a><span class="tsd-signature-symbol"> | </span><a href="Diagram.html" class="tsd-signature-type" data-tsd-kind="Class">Diagram</a>, effectName<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span>, startValue<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span>, endValue<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span>, cosmetic<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Animation.html" class="tsd-signature-type" data-tsd-kind="Class">Animation</a></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Add an object (GraphObject or Diagram) and effect name, with specified start and end values, to this Animation.</p>
</div><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5>obj: <a href="GraphObject.html" class="tsd-signature-type" data-tsd-kind="Class">GraphObject</a><span class="tsd-signature-symbol"> | </span><a href="Diagram.html" class="tsd-signature-type" data-tsd-kind="Class">Diagram</a></h5><div class="tsd-comment tsd-typography">
<p>GraphObject or Diagram to animate.</p>
</div></li><li><h5>effectName: <span class="tsd-signature-type">string</span></h5><div class="tsd-comment tsd-typography">
<p>Animation effect name, such as <code>"scale"</code> to change GraphObject.scale.
By default the supported properties are, for GraphObjects:</p>
<ul>
<li><code>"position"</code></li>
<li><code>"location"</code> (on Parts)</li>
<li><code>"scale"</code></li>
<li><code>"opacity"</code></li>
<li><code>"angle"</code></li>
<li><code>"desiredSize"</code></li>
<li><code>"width"</code></li>
<li><code>"height"</code></li>
<li><code>"background"</code></li>
<li><code>"fill"</code> (on Shapes)</li>
<li><code>"strokeWidth"</code> (on Shapes)</li>
<li><code>"strokeDashOffset"</code> (on Shapes)</li>
<li><code>"stroke"</code> (on Shapes, TextBlocks)</li>
</ul>
<p>For Diagrams:</p>
<ul>
<li><code>"position"</code></li>
<li><code>"scale"</code></li>
<li><code>"opacity"</code></li>
</ul>
<p>More properties can be supported by defining new effects with <a href="AnimationManager.html#static-defineAnimationEffect">AnimationManager.defineAnimationEffect</a>.</p>
</div></li><li><h5>startValue: <span class="tsd-signature-type">any</span></h5><div class="tsd-comment tsd-typography">
<p>The starting value for the animated property. Often this is the current value of the property.</p>
</div></li><li><h5>endValue: <span class="tsd-signature-type">any</span></h5><div class="tsd-comment tsd-typography">
<p>The ending value for the animated property. Even if the animation is just cosmetic, this must be a valid value for the property.
For instance, for <a href="GraphObject.html#scale">GraphObject.scale</a>, you cannot animate to 0, as this is an invalid scale value.
Instead you would animate to a very small (but still valid) value, such as 0.001.</p>
</div></li><li><h5><span class="tsd-flag ts-flagOptional">Optional</span> cosmetic: <span class="tsd-signature-type">boolean</span></h5><div class="tsd-comment tsd-typography">
<p>Determines if the animation should revert the property value to the start value at the end of animation.
Default false. This is commonly used when animating opacity or scale of "disappearing" nodes during collapse.
Even though the node may appear to go to scale 0.001, the programmer usually wants the scale to reflect its prior value, once hidden.</p>
</div></li></ul><h4 class="tsd-returns-title">Returns <a href="Animation.html" class="tsd-signature-type" data-tsd-kind="Class">Animation</a></h4><div><p>this Animation</p>
</div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="addTemporaryPart" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> add<wbr/>Temporary<wbr/>Part<a href="#addTemporaryPart" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class"><li class="tsd-signature tsd-kind-icon">add<wbr/>Temporary<wbr/>Part<span class="tsd-signature-symbol">(</span>part<span class="tsd-signature-symbol">: </span><a href="Part.html" class="tsd-signature-type" data-tsd-kind="Class">Part</a>, diagram<span class="tsd-signature-symbol">: </span><a href="Diagram.html" class="tsd-signature-type" data-tsd-kind="Class">Diagram</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Animation.html" class="tsd-signature-type" data-tsd-kind="Class">Animation</a></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Add a temporary Part to this animation.
This part will be added to the Diagram when the animation is started,
and removed from the Diagram when the animation completes.
This is intended to be used with <a href="Animation.html#add">add</a>, to animate properties of this Part or its elements.</p>
<div><p>The temporary part added is typically either a <a href="GraphObject.html#copy">GraphObject.copy</a> of an existing Part,
which is to be deleted and requires a copy for animated effects, or else a wholly new temporary Part,
constructed in memory for the purpose of creating some effect.</p>
</div></div><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5>part: <a href="Part.html" class="tsd-signature-type" data-tsd-kind="Class">Part</a></h5><div class="tsd-comment tsd-typography">
<p>A part to add to the Diagram at the start of the animation and remove at the end.
This is typically either a copied Part already in the Diagram, to animate its deletion,
or a Part created programmatically to be used for some effect.</p>
</div></li><li><h5>diagram: <a href="Diagram.html" class="tsd-signature-type" data-tsd-kind="Class">Diagram</a></h5><div class="tsd-comment tsd-typography">
<p>The Diagram to add the temporary part to, and remove it from, at the start and end of animation, respectively.</p>
</div></li></ul><h4 class="tsd-returns-title">Returns <a href="Animation.html" class="tsd-signature-type" data-tsd-kind="Class">Animation</a></h4><div><p>this Animation</p>
</div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="getTemporaryState" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> get<wbr/>Temporary<wbr/>State<a href="#getTemporaryState" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class"><li class="tsd-signature tsd-kind-icon">get<wbr/>Temporary<wbr/>State<span class="tsd-signature-symbol">(</span>obj<span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type" data-tsd-kind="Class">GraphObject</a><span class="tsd-signature-symbol"> | </span><a href="Diagram.html" class="tsd-signature-type" data-tsd-kind="Class">Diagram</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="ObjectData.html" class="tsd-signature-type" data-tsd-kind="Interface">ObjectData</a></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets the <a href="ObjectData.html">ObjectData</a> associated with this GraphObject or Diagram.
If no state exists, this creates and returns a new <a href="ObjectData.html">ObjectData</a>.</p>
<div><p>This can be used to store temporary information per animated object during the course of an animation.
This state is cleared at the end of an animation.</p>
</div></div><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5>obj: <a href="GraphObject.html" class="tsd-signature-type" data-tsd-kind="Class">GraphObject</a><span class="tsd-signature-symbol"> | </span><a href="Diagram.html" class="tsd-signature-type" data-tsd-kind="Class">Diagram</a></h5></li></ul><h4 class="tsd-returns-title">Returns <a href="ObjectData.html" class="tsd-signature-type" data-tsd-kind="Interface">ObjectData</a></h4></li></ul></section><section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="start" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> start<a href="#start" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class"><li class="tsd-signature tsd-kind-icon">start<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Animation.html" class="tsd-signature-type" data-tsd-kind="Class">Animation</a></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Start this animation.</p>
<div><p>This adds the Animation to its <a href="AnimationManager.html">AnimationManager</a>'s list of active animations.
The AnimationManager is inferred from the list of objects to be animated, by inspecting their Diagram.</p>
<p>This does nothing if there are no objects to animate.</p>
</div></div><h4 class="tsd-returns-title">Returns <a href="Animation.html" class="tsd-signature-type" data-tsd-kind="Class">Animation</a></h4><div><p>this Animation</p>
</div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="stop" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> stop<a href="#stop" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class"><li class="tsd-signature tsd-kind-icon">stop<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Animation.html" class="tsd-signature-type" data-tsd-kind="Class">Animation</a></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Stops a running Animation and updates the animating objects to their final state.</p>
<div><p>If an animation was about to begin, it is cancelled.</p>
</div></div><h4 class="tsd-returns-title">Returns <a href="Animation.html" class="tsd-signature-type" data-tsd-kind="Class">Animation</a></h4><div><p>this Animation</p>
</div></li></ul></section></section><section class="tsd-panel-group tsd-member-group "><h2>Constants</h2><section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a id="static-EaseInExpo" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagStatic">Static</span> Ease<wbr/>In<wbr/>Expo<span class="tsd-signature-symbol">: </span><a href="../index.html#EasingFunction" class="tsd-signature-type" data-tsd-kind="Type alias">EasingFunction</a><a href="#static-EaseInExpo" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><div class="tsd-comment tsd-typography">
<p>Built-in static function for computing interpolated values. Can be used as a value for <a href="Animation.html#easing">Animation.easing</a>.</p>
</div></section><section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a id="static-EaseInOutQuad" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagStatic">Static</span> Ease<wbr/>In<wbr/>Out<wbr/>Quad<span class="tsd-signature-symbol">: </span><a href="../index.html#EasingFunction" class="tsd-signature-type" data-tsd-kind="Type alias">EasingFunction</a><a href="#static-EaseInOutQuad" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><div class="tsd-comment tsd-typography">
<p>Built-in static function for computing interpolated values. Can be used as a value for <a href="Animation.html#easing">Animation.easing</a>.
This is the default value for <a href="Animation.html#easing">Animation.easing</a>.</p>
</div></section><section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a id="static-EaseInQuad" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagStatic">Static</span> Ease<wbr/>In<wbr/>Quad<span class="tsd-signature-symbol">: </span><a href="../index.html#EasingFunction" class="tsd-signature-type" data-tsd-kind="Type alias">EasingFunction</a><a href="#static-EaseInQuad" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><div class="tsd-comment tsd-typography">
<p>Built-in static function for computing interpolated values. Can be used as a value for <a href="Animation.html#easing">Animation.easing</a>.</p>
</div></section><section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a id="static-EaseLinear" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagStatic">Static</span> Ease<wbr/>Linear<span class="tsd-signature-symbol">: </span><a href="../index.html#EasingFunction" class="tsd-signature-type" data-tsd-kind="Type alias">EasingFunction</a><a href="#static-EaseLinear" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><div class="tsd-comment tsd-typography">
<p>Built-in static function for computing interpolated values. Can be used as a value for <a href="Animation.html#easing">Animation.easing</a>.</p>
</div></section><section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a id="static-EaseOutExpo" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagStatic">Static</span> Ease<wbr/>Out<wbr/>Expo<span class="tsd-signature-symbol">: </span><a href="../index.html#EasingFunction" class="tsd-signature-type" data-tsd-kind="Type alias">EasingFunction</a><a href="#static-EaseOutExpo" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><div class="tsd-comment tsd-typography">
<p>Built-in static function for computing interpolated values. Can be used as a value for <a href="Animation.html#easing">Animation.easing</a>.</p>
</div></section><section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a id="static-EaseOutQuad" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagStatic">Static</span> Ease<wbr/>Out<wbr/>Quad<span class="tsd-signature-symbol">: </span><a href="../index.html#EasingFunction" class="tsd-signature-type" data-tsd-kind="Type alias">EasingFunction</a><a href="#static-EaseOutQuad" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><div class="tsd-comment tsd-typography">
<p>Built-in static function for computing interpolated values. Can be used as a value for <a href="Animation.html#easing">Animation.easing</a>.</p>
</div></section></section></div><div class="col-4 col-menu menu-sticky-wrap menu-highlight"><nav class="tsd-navigation primary"><ul><li class=""><a href="../index.html">GoJS Class Index</a></li></ul></nav><nav class="tsd-navigation secondary menu-sticky"><ul><li class="current tsd-kind-class"><a href="Animation.html" class="tsd-kind-icon">Animation</a><ul><li class="tsd-kind-constructor tsd-parent-kind-class"><a href="Animation.html#constructor" class="tsd-kind-icon">constructor</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Animation.html#duration" class="tsd-kind-icon">duration</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Animation.html#easing" class="tsd-kind-icon">easing</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Animation.html#finished" class="tsd-kind-icon">finished</a></li><li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Animation.html#isAnimating" class="tsd-kind-icon">is<wbr/>Animating</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Animation.html#isViewportUnconstrained" class="tsd-kind-icon">is<wbr/>Viewport<wbr/>Unconstrained</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Animation.html#reversible" class="tsd-kind-icon">reversible</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Animation.html#runCount" class="tsd-kind-icon">run<wbr/>Count</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Animation.html#add" class="tsd-kind-icon">add</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Animation.html#addTemporaryPart" class="tsd-kind-icon">add<wbr/>Temporary<wbr/>Part</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Animation.html#getTemporaryState" class="tsd-kind-icon">get<wbr/>Temporary<wbr/>State</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Animation.html#start" class="tsd-kind-icon">start</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Animation.html#stop" class="tsd-kind-icon">stop</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Animation.html#static-EaseInExpo" class="tsd-kind-icon">Ease<wbr/>In<wbr/>Expo</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Animation.html#static-EaseInOutQuad" class="tsd-kind-icon">Ease<wbr/>In<wbr/>Out<wbr/>Quad</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Animation.html#static-EaseInQuad" class="tsd-kind-icon">Ease<wbr/>In<wbr/>Quad</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Animation.html#static-EaseLinear" class="tsd-kind-icon">Ease<wbr/>Linear</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Animation.html#static-EaseOutExpo" class="tsd-kind-icon">Ease<wbr/>Out<wbr/>Expo</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Animation.html#static-EaseOutQuad" class="tsd-kind-icon">Ease<wbr/>Out<wbr/>Quad</a></li></ul></li></ul></nav></div></div></div><div class="tsd w-full max-w-screen-xl mx-auto px-2"><div class="bottom-copyright">Copyright © 1998-2022 by Northwoods Software Corporation.</div></div><footer class=""><div class="tsd w-full max-w-screen-xl mx-auto px-2"><h2>Settings</h2><p class="mb-4">Theme <select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></p></div></footer><div class="overlay"></div><script src="../assets/main.js"></script><script async src="https://www.googletagmanager.com/gtag/js?id=UA-1506307-5"></script>
<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'
});
}
// 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("hidde