scrawl-canvas
Version:
Version 8.9.4 - 19 Nov 2022
928 lines (591 loc) • 37.9 kB
HTML
<html>
<head>
<title>Animation factory</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<link rel="stylesheet" media="all" href="../../docco.css" />
</head>
<body>
<div id="container">
<div id="background"></div>
<ul id="jump_to">
<li>
<a class="large" href="javascript:void(0);">Jump To …</a>
<a class="small" href="javascript:void(0);">+</a>
<div id="jump_wrapper">
<div id="jump_page_wrapper">
<div id="jump_page">
<a class="source" href="../core/animationloop.html">
./source/core/animationloop.js
</a>
<a class="source" href="../core/document.html">
./source/core/document.js
</a>
<a class="source" href="../core/events.html">
./source/core/events.js
</a>
<a class="source" href="../core/init.html">
./source/core/init.js
</a>
<a class="source" href="../core/library.html">
./source/core/library.js
</a>
<a class="source" href="../core/random-seed.html">
./source/core/random-seed.js
</a>
<a class="source" href="../core/snippets.html">
./source/core/snippets.js
</a>
<a class="source" href="../core/userInteraction.html">
./source/core/userInteraction.js
</a>
<a class="source" href="../core/utilities.html">
./source/core/utilities.js
</a>
<a class="source" href="action.html">
./source/factory/action.js
</a>
<a class="source" href="anchor.html">
./source/factory/anchor.js
</a>
<a class="source" href="animation.html">
./source/factory/animation.js
</a>
<a class="source" href="bezier.html">
./source/factory/bezier.js
</a>
<a class="source" href="block.html">
./source/factory/block.js
</a>
<a class="source" href="canvas.html">
./source/factory/canvas.js
</a>
<a class="source" href="cell.html">
./source/factory/cell.js
</a>
<a class="source" href="cog.html">
./source/factory/cog.js
</a>
<a class="source" href="color.html">
./source/factory/color.js
</a>
<a class="source" href="conicGradient.html">
./source/factory/conicGradient.js
</a>
<a class="source" href="coordinate.html">
./source/factory/coordinate.js
</a>
<a class="source" href="crescent.html">
./source/factory/crescent.js
</a>
<a class="source" href="element.html">
./source/factory/element.js
</a>
<a class="source" href="emitter.html">
./source/factory/emitter.js
</a>
<a class="source" href="filter.html">
./source/factory/filter.js
</a>
<a class="source" href="filterEngine-bluenoiseData.html">
./source/factory/filterEngine-bluenoiseData.js
</a>
<a class="source" href="filterEngine.html">
./source/factory/filterEngine.js
</a>
<a class="source" href="fontAttributes.html">
./source/factory/fontAttributes.js
</a>
<a class="source" href="gradient.html">
./source/factory/gradient.js
</a>
<a class="source" href="grid.html">
./source/factory/grid.js
</a>
<a class="source" href="group.html">
./source/factory/group.js
</a>
<a class="source" href="imageAsset.html">
./source/factory/imageAsset.js
</a>
<a class="source" href="line.html">
./source/factory/line.js
</a>
<a class="source" href="lineSpiral.html">
./source/factory/lineSpiral.js
</a>
<a class="source" href="loom.html">
./source/factory/loom.js
</a>
<a class="source" href="mesh.html">
./source/factory/mesh.js
</a>
<a class="source" href="net.html">
./source/factory/net.js
</a>
<a class="source" href="noiseAsset.html">
./source/factory/noiseAsset.js
</a>
<a class="source" href="oval.html">
./source/factory/oval.js
</a>
<a class="source" href="palette.html">
./source/factory/palette.js
</a>
<a class="source" href="particle.html">
./source/factory/particle.js
</a>
<a class="source" href="particleForce.html">
./source/factory/particleForce.js
</a>
<a class="source" href="particleHistory.html">
./source/factory/particleHistory.js
</a>
<a class="source" href="particleSpring.html">
./source/factory/particleSpring.js
</a>
<a class="source" href="particleWorld.html">
./source/factory/particleWorld.js
</a>
<a class="source" href="pattern.html">
./source/factory/pattern.js
</a>
<a class="source" href="phrase.html">
./source/factory/phrase.js
</a>
<a class="source" href="picture.html">
./source/factory/picture.js
</a>
<a class="source" href="polygon.html">
./source/factory/polygon.js
</a>
<a class="source" href="polyline.html">
./source/factory/polyline.js
</a>
<a class="source" href="quadratic.html">
./source/factory/quadratic.js
</a>
<a class="source" href="quaternion.html">
./source/factory/quaternion.js
</a>
<a class="source" href="radialGradient.html">
./source/factory/radialGradient.js
</a>
<a class="source" href="rawAsset.html">
./source/factory/rawAsset.js
</a>
<a class="source" href="rdAsset.html">
./source/factory/rdAsset.js
</a>
<a class="source" href="rectangle.html">
./source/factory/rectangle.js
</a>
<a class="source" href="renderAnimation.html">
./source/factory/renderAnimation.js
</a>
<a class="source" href="shape.html">
./source/factory/shape.js
</a>
<a class="source" href="spiral.html">
./source/factory/spiral.js
</a>
<a class="source" href="spriteAsset.html">
./source/factory/spriteAsset.js
</a>
<a class="source" href="stack.html">
./source/factory/stack.js
</a>
<a class="source" href="star.html">
./source/factory/star.js
</a>
<a class="source" href="state.html">
./source/factory/state.js
</a>
<a class="source" href="tetragon.html">
./source/factory/tetragon.js
</a>
<a class="source" href="ticker.html">
./source/factory/ticker.js
</a>
<a class="source" href="tracer.html">
./source/factory/tracer.js
</a>
<a class="source" href="tween.html">
./source/factory/tween.js
</a>
<a class="source" href="unstackedElement.html">
./source/factory/unstackedElement.js
</a>
<a class="source" href="vector.html">
./source/factory/vector.js
</a>
<a class="source" href="videoAsset.html">
./source/factory/videoAsset.js
</a>
<a class="source" href="wheel.html">
./source/factory/wheel.js
</a>
<a class="source" href="../mixin/anchor.html">
./source/mixin/anchor.js
</a>
<a class="source" href="../mixin/asset.html">
./source/mixin/asset.js
</a>
<a class="source" href="../mixin/assetAdvancedFunctionality.html">
./source/mixin/assetAdvancedFunctionality.js
</a>
<a class="source" href="../mixin/assetConsumer.html">
./source/mixin/assetConsumer.js
</a>
<a class="source" href="../mixin/base.html">
./source/mixin/base.js
</a>
<a class="source" href="../mixin/cascade.html">
./source/mixin/cascade.js
</a>
<a class="source" href="../mixin/delta.html">
./source/mixin/delta.js
</a>
<a class="source" href="../mixin/displayShape.html">
./source/mixin/displayShape.js
</a>
<a class="source" href="../mixin/dom.html">
./source/mixin/dom.js
</a>
<a class="source" href="../mixin/entity.html">
./source/mixin/entity.js
</a>
<a class="source" href="../mixin/filter.html">
./source/mixin/filter.js
</a>
<a class="source" href="../mixin/mimic.html">
./source/mixin/mimic.js
</a>
<a class="source" href="../mixin/path.html">
./source/mixin/path.js
</a>
<a class="source" href="../mixin/pattern.html">
./source/mixin/pattern.js
</a>
<a class="source" href="../mixin/pivot.html">
./source/mixin/pivot.js
</a>
<a class="source" href="../mixin/position.html">
./source/mixin/position.js
</a>
<a class="source" href="../mixin/shapeBasic.html">
./source/mixin/shapeBasic.js
</a>
<a class="source" href="../mixin/shapeCurve.html">
./source/mixin/shapeCurve.js
</a>
<a class="source" href="../mixin/shapePathCalculation.html">
./source/mixin/shapePathCalculation.js
</a>
<a class="source" href="../mixin/styles.html">
./source/mixin/styles.js
</a>
<a class="source" href="../mixin/tween.html">
./source/mixin/tween.js
</a>
</div>
</div>
</li>
</ul>
<ul class="sections">
<li id="section-1">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-1">§</a>
</div>
<h1 id="animation-factory">Animation factory</h1>
<p>Animations lie at the heart of Scrawl-canvas functionality. While static <a href="./canvas.html">Canvas</a> and <a href="./stack.html">Stack</a> displays can be rendered once and then forgotten, any Canvas or Stack that implements any form of user interaction, or movement in the display, needs to implement an Animation object to make that functionality happen.</p>
<p>There are a number of ways to create an Animation object:</p>
<ul>
<li><code>scrawl.makeAnimation</code> - as coded by this factory - will supply a very basic Animation object. The factory requires that we supply it with a Promise-based <code>fn</code> function which will be added to the core Scrawl-canvas animation loop.</li>
</ul>
<p>Because creating an Animation object from this factory can be quite fiddly, Scrawl-canvas supplies some additional convenience factories to make the process easier: </p>
<ul>
<li><code>scrawl.makeRender</code> - use this function to create an animation object which will <strong>control the Display cycle for a canvas or stack</strong>. The function allows users to add a number of hook functions that will trigger at various points in the Display cycle, alongside functions that will trigger whenever the animation object starts running, stops running, or errors.</li>
<li><code>scrawl.makeTween</code> and <code>scrawl.makeTicker</code> - both of these factory functions use animation objects under the hood</li>
<li><code>scrawl.makeSnippet</code> - used in snippet files, the factory function will automatically add an animation object to the snippet, alongside much of the functionality supplied by <code>makeRender</code>. It will also create an <code>IntersectionObserver</code> on the window object that will automatically run/stop the animation object dependant on its canvas element’s position in the browser/device viewport.</li>
</ul>
<p>Animation objects can be controlled through some simple functions: <code>run</code> to start the animation running; <code>halt</code> to stop it; and <code>kill</code> to remove it from the system.</p>
<p>NOTE that Animation objects do not take part in Scrawl-canvas’s <code>packet</code> save-and-load functionality, as a result of which they cannot be cloned.</p>
</div>
</li>
<li id="section-2">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-2">§</a>
</div>
<h4 id="demos">Demos:</h4>
<ul>
<li>All the demos run some form of animation - mostly created via <code>scrawl.makeRender</code> - see the <a href="./renderAnimation.html">RenderAnimation factory</a> for details</li>
<li><a href="../../demo/dom-001.html">DOM-001</a> - Loading the scrawl-canvas library using a script tag in the HTML code</li>
<li><a href="../../demo/dom-010.html">DOM-010</a> - Add and remove (kill) Scrawl-canvas stack elements programmatically</li>
</ul>
</div>
</li>
<li id="section-3">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-3">§</a>
</div>
<h4 id="imports">Imports</h4>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">import</span> { animation, constructors } <span class="hljs-keyword">from</span> <span class="hljs-string">'../core/library.js'</span>;
<span class="hljs-keyword">import</span> { mergeOver, pushUnique, removeItem, xt, λ<span class="hljs-literal">null</span>, λpromise, λ<span class="hljs-variable language_">this</span>, Ωempty } <span class="hljs-keyword">from</span> <span class="hljs-string">'../core/utilities.js'</span>;
<span class="hljs-keyword">import</span> { forceUpdate } <span class="hljs-keyword">from</span> <span class="hljs-string">'../core/userInteraction.js'</span>;
<span class="hljs-keyword">import</span> { animate, resortAnimations } <span class="hljs-keyword">from</span> <span class="hljs-string">'../core/animationloop.js'</span>;
<span class="hljs-keyword">import</span> baseMix <span class="hljs-keyword">from</span> <span class="hljs-string">'../mixin/base.js'</span>;</pre></div></div>
</li>
<li id="section-4">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-4">§</a>
</div>
<h4 id="animation-constructor">Animation constructor</h4>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> <span class="hljs-title class_">Animation</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">items = Ωempty</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">makeName</span>(items.<span class="hljs-property">name</span>);
<span class="hljs-variable language_">this</span>.<span class="hljs-property">order</span> = (<span class="hljs-title function_">xt</span>(items.<span class="hljs-property">order</span>)) ? items.<span class="hljs-property">order</span> : <span class="hljs-variable language_">this</span>.<span class="hljs-property">defs</span>.<span class="hljs-property">order</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">fn</span> = items.<span class="hljs-property">fn</span> || λpromise;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">onRun</span> = items.<span class="hljs-property">onRun</span> || λ<span class="hljs-literal">null</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">onHalt</span> = items.<span class="hljs-property">onHalt</span> || λ<span class="hljs-literal">null</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">onKill</span> = items.<span class="hljs-property">onKill</span> || λ<span class="hljs-literal">null</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">register</span>();
<span class="hljs-keyword">if</span>(!items.<span class="hljs-property">delay</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">run</span>();
<span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>;
};</pre></div></div>
</li>
<li id="section-5">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-5">§</a>
</div>
<h4 id="animation-prototype">Animation prototype</h4>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> P = <span class="hljs-title class_">Animation</span>.<span class="hljs-property"><span class="hljs-keyword">prototype</span></span> = <span class="hljs-title class_">Object</span>.<span class="hljs-title function_">create</span>(<span class="hljs-title class_">Object</span>.<span class="hljs-property"><span class="hljs-keyword">prototype</span></span>);
P.<span class="hljs-property">type</span> = <span class="hljs-string">'Animation'</span>;
P.<span class="hljs-property">lib</span> = <span class="hljs-string">'animation'</span>;
P.<span class="hljs-property">isArtefact</span> = <span class="hljs-literal">false</span>;
P.<span class="hljs-property">isAsset</span> = <span class="hljs-literal">false</span>;</pre></div></div>
</li>
<li id="section-6">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-6">§</a>
</div>
<h4 id="mixins">Mixins</h4>
</div>
<div class="content"><div class='highlight'><pre>P = <span class="hljs-title function_">baseMix</span>(P);</pre></div></div>
</li>
<li id="section-7">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-7">§</a>
</div>
<h4 id="animation-attributes">Animation attributes</h4>
<ul>
<li>Attributes defined in the <a href="../mixin/base.html">base mixin</a>: <strong>name</strong>.</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> defaultAttributes = {</pre></div></div>
</li>
<li id="section-8">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-8">§</a>
</div>
<p><strong>order</strong> - positive integer Number - determines the order in which each Animation object will be actioned before the Display cycle starts. </p>
<ul>
<li>Higher order Animations will be processed after lower order Animations. </li>
<li>Animations with the same <code>order</code> value will be processed in the order in which they were defined in code.</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">order</span>: <span class="hljs-number">1</span>,</pre></div></div>
</li>
<li id="section-9">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-9">§</a>
</div>
<p><strong>fn</strong> - the main function that the Animation object will run on each RequestAnimationFrame tick. This function <strong>must return a Promise</strong>.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">fn</span>: <span class="hljs-literal">null</span>,</pre></div></div>
</li>
<li id="section-10">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-10">§</a>
</div>
<p>The Animation object supports some <strong>animation hook functions</strong>:</p>
<ul>
<li><strong>onRun</strong> - triggers each time the Animation object’s <code>run</code> function is invoked</li>
<li><strong>onHalt</strong> - triggers each time the Animation object’s <code>halt</code> function is invoked</li>
<li><strong>onKill</strong> - triggers each time the Animation object’s <code>kill</code> function is invoked</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">onRun</span>: <span class="hljs-literal">null</span>,
<span class="hljs-attr">onHalt</span>: <span class="hljs-literal">null</span>,
<span class="hljs-attr">onKill</span>: <span class="hljs-literal">null</span>,</pre></div></div>
</li>
<li id="section-11">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-11">§</a>
</div>
<p><strong>delay</strong> - by default, Animation objects will start running as soon as they are created. To prevent this happening the constructor argument can take a non-retained <code>delay</code> Boolean flag which, when set to true, will prevent the Animation object from adding itself to the Scrawl-canvas animation loop. The animation can be started at any subsequent time by invoking its <code>run</code> function.</p>
</div>
<div class="content"><div class='highlight'><pre>};
P.<span class="hljs-property">defs</span> = <span class="hljs-title function_">mergeOver</span>(P.<span class="hljs-property">defs</span>, defaultAttributes);</pre></div></div>
</li>
<li id="section-12">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-12">§</a>
</div>
<h4 id="packet-management">Packet management</h4>
<p>This functionality is disabled for Animation objects</p>
</div>
<div class="content"><div class='highlight'><pre>P.<span class="hljs-property">stringifyFunction</span> = λ<span class="hljs-literal">null</span>;
P.<span class="hljs-property">processPacketOut</span> = λ<span class="hljs-literal">null</span>;
P.<span class="hljs-property">finalizePacketOut</span> = λ<span class="hljs-literal">null</span>;
P.<span class="hljs-property">saveAsPacket</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
<span class="hljs-keyword">return</span> <span class="hljs-string">`[<span class="hljs-subst">${<span class="hljs-variable language_">this</span>.name}</span>, <span class="hljs-subst">${<span class="hljs-variable language_">this</span>.type}</span>, <span class="hljs-subst">${<span class="hljs-variable language_">this</span>.lib}</span>, {}]`</span>
};</pre></div></div>
</li>
<li id="section-13">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-13">§</a>
</div>
<h4 id="clone-management">Clone management</h4>
<p>This functionality is disabled for Animation objects</p>
</div>
<div class="content"><div class='highlight'><pre>P.<span class="hljs-property">clone</span> = λ<span class="hljs-variable language_">this</span>;</pre></div></div>
</li>
<li id="section-14">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-14">§</a>
</div>
<h4 id="kill-management">Kill management</h4>
<p>Kill functionality is managed as one of the Animation object’s hook functions - see below</p>
</div>
</li>
<li id="section-15">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-15">§</a>
</div>
<h4 id="get-set-deltaset">Get, Set, deltaSet</h4>
<p>No additional getter or setter functionality required</p>
</div>
</li>
<li id="section-16">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-16">§</a>
</div>
<h4 id="prototype-functions">Prototype functions</h4>
</div>
</li>
<li id="section-17">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-17">§</a>
</div>
<p><code>run</code> - start the animation, if it is not already running</p>
</div>
<div class="content"><div class='highlight'><pre>P.<span class="hljs-property">run</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">onRun</span>();
<span class="hljs-title function_">pushUnique</span>(animate, <span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span>);
<span class="hljs-title function_">resortAnimations</span>();
<span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =></span> <span class="hljs-title function_">forceUpdate</span>(), <span class="hljs-number">20</span>);
<span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>;
};</pre></div></div>
</li>
<li id="section-18">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-18">§</a>
</div>
<p><code>isRunning</code> - returns true if animation is running; false otherwise</p>
</div>
<div class="content"><div class='highlight'><pre>P.<span class="hljs-property">isRunning</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
<span class="hljs-keyword">return</span> (animate.<span class="hljs-title function_">indexOf</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span>) >= <span class="hljs-number">0</span>) ? <span class="hljs-literal">true</span> : <span class="hljs-literal">false</span>;
};</pre></div></div>
</li>
<li id="section-19">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-19">§</a>
</div>
<p><code>halt</code> - stop the animation, if it is already running</p>
</div>
<div class="content"><div class='highlight'><pre>P.<span class="hljs-property">halt</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">onHalt</span>();
<span class="hljs-title function_">removeItem</span>(animate, <span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span>);
<span class="hljs-title function_">resortAnimations</span>();
<span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>;
};</pre></div></div>
</li>
<li id="section-20">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-20">§</a>
</div>
<p><code>kill</code> - stop the animation if it is already running, and remove it from the Scrawl-canvas library</p>
</div>
<div class="content"><div class='highlight'><pre>P.<span class="hljs-property">kill</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">onKill</span>();
<span class="hljs-title function_">removeItem</span>(animate, <span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span>);
<span class="hljs-title function_">resortAnimations</span>();
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">deregister</span>();
<span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;
};</pre></div></div>
</li>
<li id="section-21">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-21">§</a>
</div>
<h4 id="factory">Factory</h4>
<pre><code>scrawl.<span class="hljs-title function_">makeAnimation</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'demo-animation'</span>,
<span class="hljs-comment">// Function MUST return a Promise object, and that promise must ALWAYS resolve (not reject)</span>
<span class="hljs-attr">fn</span>: <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve</span>) =></span> {
<span class="hljs-comment">// Renders all stack and canvas elements in the document</span>
scrawl.<span class="hljs-title function_">render</span>()
.<span class="hljs-title function_">then</span>(<span class="hljs-function">() =></span> <span class="hljs-title function_">resolve</span>(<span class="hljs-literal">true</span>))
.<span class="hljs-title function_">catch</span>(<span class="hljs-function"><span class="hljs-params">err</span> =></span> <span class="hljs-title function_">resolve</span>(<span class="hljs-literal">false</span>));
});
}
});
</code></pre>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> makeAnimation = <span class="hljs-keyword">function</span> (<span class="hljs-params">items</span>) {
<span class="hljs-keyword">if</span> (!items) <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
<span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Animation</span>(items);
};
constructors.<span class="hljs-property">Animation</span> = <span class="hljs-title class_">Animation</span>;</pre></div></div>
</li>
<li id="section-22">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-22">§</a>
</div>
<h4 id="exports">Exports</h4>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">export</span> {
makeAnimation,
};</pre></div></div>
</li>
</ul>
</div>
</body>
</html>