scrawl-canvas
Version:
Version 8.9.4 - 19 Nov 2022
394 lines (269 loc) • 19.3 kB
HTML
<html>
<head>
<title>Demo Modules 004</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="canvas-minimap.html">
./demo/modules/canvas-minimap.js
</a>
<a class="source" href="canvas-scene-editor.html">
./demo/modules/canvas-scene-editor.js
</a>
<a class="source" href="dom-entity-editor.html">
./demo/modules/dom-entity-editor.js
</a>
<a class="source" href="entity-copy-paste.html">
./demo/modules/entity-copy-paste.js
</a>
<a class="source" href="entity-manipulation-gui.html">
./demo/modules/entity-manipulation-gui.js
</a>
<a class="source" href="entity-navigation.html">
./demo/modules/entity-navigation.js
</a>
<a class="source" href="entity-ring-builder.html">
./demo/modules/entity-ring-builder.js
</a>
<a class="source" href="london-crime-graphic.html">
./demo/modules/london-crime-graphic.js
</a>
<a class="source" href="london-crime-lines.html">
./demo/modules/london-crime-lines.js
</a>
<a class="source" href="london-crime-stacked-bars.html">
./demo/modules/london-crime-stacked-bars.js
</a>
<a class="source" href="lottie-loader.html">
./demo/modules/lottie-loader.js
</a>
<a class="source" href="simple-chart-frame-tests.html">
./demo/modules/simple-chart-frame-tests.js
</a>
<a class="source" href="simple-chart-frame.html">
./demo/modules/simple-chart-frame.js
</a>
<a class="source" href="simple-graph-lines.html">
./demo/modules/simple-graph-lines.js
</a>
<a class="source" href="simple-graph-stacked-bars.html">
./demo/modules/simple-graph-stacked-bars.js
</a>
<a class="source" href="wikipedia-views-spiral-chart.html">
./demo/modules/wikipedia-views-spiral-chart.js
</a>
<a class="source" href="../snippets/animated-highlight-gradient-text-snippet.html">
./demo/snippets/animated-highlight-gradient-text-snippet.js
</a>
<a class="source" href="../snippets/animated-hover-gradient-snippet.html">
./demo/snippets/animated-hover-gradient-snippet.js
</a>
<a class="source" href="../snippets/animated-word-gradient-snippet.html">
./demo/snippets/animated-word-gradient-snippet.js
</a>
<a class="source" href="../snippets/before-after-slider-infographic.html">
./demo/snippets/before-after-slider-infographic.js
</a>
<a class="source" href="../snippets/bubbles-text-snippet.html">
./demo/snippets/bubbles-text-snippet.js
</a>
<a class="source" href="../snippets/green-box-snippet.html">
./demo/snippets/green-box-snippet.js
</a>
<a class="source" href="../snippets/jazzy-button-snippet.html">
./demo/snippets/jazzy-button-snippet.js
</a>
<a class="source" href="../snippets/page-performance-snippet-test.html">
./demo/snippets/page-performance-snippet-test.js
</a>
<a class="source" href="../snippets/page-performance-snippet.html">
./demo/snippets/page-performance-snippet.js
</a>
<a class="source" href="../snippets/pan-image-snippet.html">
./demo/snippets/pan-image-snippet.js
</a>
<a class="source" href="../snippets/placeholder-effect-snippet.html">
./demo/snippets/placeholder-effect-snippet.js
</a>
<a class="source" href="../snippets/ripple-effect-snippet.html">
./demo/snippets/ripple-effect-snippet.js
</a>
<a class="source" href="../snippets/risograph-text-gradient-snippet.html">
./demo/snippets/risograph-text-gradient-snippet.js
</a>
<a class="source" href="../snippets/spotlight-text-snippet-test.html">
./demo/snippets/spotlight-text-snippet-test.js
</a>
<a class="source" href="../snippets/spotlight-text-snippet.html">
./demo/snippets/spotlight-text-snippet.js
</a>
<a class="source" href="../snippets/swirling-stripes-text-snippet.html">
./demo/snippets/swirling-stripes-text-snippet.js
</a>
<a class="source" href="../snippets/text-snippet-helper.html">
./demo/snippets/text-snippet-helper.js
</a>
<a class="source" href="../snippets/word-highlighter-snippet.html">
./demo/snippets/word-highlighter-snippet.js
</a>
<a class="source" href="../snippets/worley-text-gradient-snippet.html">
./demo/snippets/worley-text-gradient-snippet.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="demo-modules-004">Demo Modules 004</h1>
<p>Factory function to load, play and expose a Lottie animation as an asset for use by Scrawl-canvas Picture entitys and Pattern styles</p>
<p>Related files:</p>
<ul>
<li><a href="../modules-004.html">Lottie loader - main module</a></li>
</ul>
<p>Import the Scrawl-canvas object </p>
<ul>
<li>There’s various ways to do this. See <a href="../dom-001.html">Demo DOM-001</a> for more details</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> scrawl <span class="hljs-keyword">from</span> <span class="hljs-string">'../../source/scrawl.js'</span>;</pre></div></div>
</li>
<li id="section-2">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-2">§</a>
</div>
<h4 id="the-lottie-animation-loader-function">The Lottie animation loader function</h4>
<p>This factory takes a single <strong>items</strong> Javascript Object argument (to match the functionality of built-in Scrawl-canvas factories). Two of the attributes of this argument object are required, the others will fall back on default values. These attrributes are:</p>
<ul>
<li><strong>name</strong> (required) - String - unique name value</li>
<li><strong>src</strong> (required) - String - path to the lottie.json animation file</li>
<li><strong>width</strong> - Number - width of the animation; default <code>1000</code></li>
<li><strong>bodymovinLibrary</strong> - String - CDN path at which the Bodymovin library can be obtained; default: <code>https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.8.1/lottie.min.js</code></li>
</ul>
<p>The factory returns a Promise which resolves to an object which contains handles to the RawAsset Object, the Bodymovin controller Object, and a <code>kill</code> function which will remove all objects and DOM infrastructure when invoked.</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">function</span> (<span class="hljs-params">items</span>) {
<span class="hljs-keyword">let</span> { src, bodymovinLibrary, width, name, loop, autoplay } = items;
<span class="hljs-keyword">if</span> (!src || !name) <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
<span class="hljs-keyword">if</span> (loop == <span class="hljs-literal">null</span>) loop = <span class="hljs-literal">false</span>;
<span class="hljs-keyword">if</span> (autoplay == <span class="hljs-literal">null</span>) autoplay = <span class="hljs-literal">false</span>;
<span class="hljs-keyword">if</span> (!width) width = <span class="hljs-number">1000</span>;
<span class="hljs-keyword">if</span> (!bodymovinLibrary) bodymovinLibrary = <span class="hljs-string">'https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.8.1/lottie.min.js'</span>;
<span class="hljs-keyword">const</span> doWork = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
<span class="hljs-keyword">const</span> hold = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">createElement</span>(<span class="hljs-string">'div'</span>);
hold.<span class="hljs-property">style</span>.<span class="hljs-property">height</span> = <span class="hljs-string">'0'</span>;
hold.<span class="hljs-property">style</span>.<span class="hljs-property">overflow</span> = <span class="hljs-string">'hidden'</span>;
<span class="hljs-keyword">const</span> container = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">createElement</span>(<span class="hljs-string">'div'</span>);
container.<span class="hljs-property">style</span>.<span class="hljs-property">width</span> = <span class="hljs-string">`<span class="hljs-subst">${width}</span>px`</span>;
container.<span class="hljs-property">id</span> = name;
hold.<span class="hljs-title function_">appendChild</span>(container);
<span class="hljs-variable language_">document</span>.<span class="hljs-property">body</span>.<span class="hljs-title function_">appendChild</span>(hold);</pre></div></div>
</li>
<li id="section-3">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-3">§</a>
</div>
<p>@ts-expect-error</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">const</span> controller = bodymovin.<span class="hljs-title function_">loadAnimation</span>({
container,
<span class="hljs-attr">path</span>: src,
<span class="hljs-attr">renderer</span>: <span class="hljs-string">'canvas'</span>,
<span class="hljs-attr">loop</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">autoplay</span>: <span class="hljs-literal">true</span>,
name,
});
<span class="hljs-keyword">const</span> asset = scrawl.<span class="hljs-title function_">makeRawAsset</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">`<span class="hljs-subst">${name}</span>-asset`</span>,
<span class="hljs-attr">userAttributes</span>: [{
<span class="hljs-attr">key</span>: <span class="hljs-string">'lottie'</span>,
<span class="hljs-attr">defaultValue</span>: controller,
<span class="hljs-attr">setter</span>: <span class="hljs-function">() =></span> {},
},{
<span class="hljs-attr">key</span>: <span class="hljs-string">'lottieCanvas'</span>,
<span class="hljs-attr">defaultValue</span>: <span class="hljs-literal">null</span>,
<span class="hljs-attr">setter</span>: <span class="hljs-function">() =></span> {},
},{
<span class="hljs-attr">key</span>: <span class="hljs-string">'canvasWidth'</span>,
<span class="hljs-attr">defaultValue</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">setter</span>: <span class="hljs-function">() =></span> {},
},{
<span class="hljs-attr">key</span>: <span class="hljs-string">'canvasHeight'</span>,
<span class="hljs-attr">defaultValue</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">setter</span>: <span class="hljs-function">() =></span> {},
},{
<span class="hljs-attr">key</span>: <span class="hljs-string">'trigger'</span>,
<span class="hljs-attr">defaultValue</span>: <span class="hljs-literal">false</span>,
<span class="hljs-attr">setter</span>: <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) { <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyData</span> = item },
}],
<span class="hljs-attr">updateSource</span>: <span class="hljs-keyword">function</span> (<span class="hljs-params">assetWrapper</span>) {
<span class="hljs-keyword">let</span> { element, engine, canvasWidth, canvasHeight, lottieCanvas } = assetWrapper;
<span class="hljs-keyword">if</span> (!lottieCanvas) {
<span class="hljs-keyword">const</span> c = container.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'canvas'</span>);
<span class="hljs-keyword">if</span> (c) {
lottieCanvas = <span class="hljs-variable language_">this</span>.<span class="hljs-property">lottieCanvas</span> = c;
canvasWidth = <span class="hljs-variable language_">this</span>.<span class="hljs-property">canvasWidth</span> = c.<span class="hljs-property">width</span>;
canvasHeight = <span class="hljs-variable language_">this</span>.<span class="hljs-property">canvasHeight</span> = c.<span class="hljs-property">height</span>;
}
}
<span class="hljs-keyword">if</span> (lottieCanvas) {
element.<span class="hljs-property">width</span> = canvasWidth;
element.<span class="hljs-property">height</span> = canvasHeight;
engine.<span class="hljs-title function_">drawImage</span>(lottieCanvas, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, canvasWidth, canvasHeight);
}
},
});
<span class="hljs-keyword">return</span> {
asset,
controller,
<span class="hljs-attr">kill</span>: <span class="hljs-function">() =></span> {
asset.<span class="hljs-title function_">kill</span>();
controller.<span class="hljs-title function_">destroy</span>();
hold.<span class="hljs-title function_">remove</span>();
},
}
};</pre></div></div>
</li>
<li id="section-4">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-4">§</a>
</div>
<p>@ts-expect-error</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (!<span class="hljs-variable language_">window</span>.<span class="hljs-property">bodymovin</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-keyword">const</span> script = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">createElement</span>(<span class="hljs-string">'script'</span>);
script.<span class="hljs-property">src</span> = bodymovinLibrary;
script.<span class="hljs-property">type</span> = <span class="hljs-string">'text/javascript'</span>;
script.<span class="hljs-property">onload</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
<span class="hljs-title function_">resolve</span>(<span class="hljs-title function_">doWork</span>());
};
<span class="hljs-variable language_">document</span>.<span class="hljs-property">body</span>.<span class="hljs-title function_">appendChild</span>(script);
});
}
<span class="hljs-keyword">return</span> <span class="hljs-title class_">Promise</span>.<span class="hljs-title function_">resolve</span>(<span class="hljs-title function_">doWork</span>());
};</pre></div></div>
</li>
</ul>
</div>
</body>
</html>