<metaname="description"content="The SVG Cubic Morph component for KUTE.js enables animation for the d presentation attribute of path and glyph shapes.">
<aclass="facebook-link"target="_blank"href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html"title="Share KUTE.js on Facebook">
<aclass="twitter-link"target="_blank"href="https://twitter.com/intent/tweet?text=Spread the word about %23KUTEJS animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html"title="Share KUTE.js on Twitter">
<pclass="condensed lead">The component that also covers <i>SVG morphing</i>, with similar functionality as for the <ahref="svgMorph.html">SVG Morph</a> component, but with a different
2020-06-11 07:01:56 +02:00
implementation for value processing and animation setup.</p>
2020-06-09 22:08:43 +02:00
</div>
<divclass="featurettes dark">
<divclass="content-wrap">
2020-06-09 22:22:33 +02:00
<divclass="columns margin-bottom">
2020-06-09 22:08:43 +02:00
<divclass="col3">
<h3class="border text-right">Overview</h3>
<pclass="condensed text-right">Animate SVG paths with <b>cubic-bezier</b> path commands and improved performance.</p>
</div>
<divclass="col9 border">
<pclass="lead condensed">The KUTE.js <b>SVG Cubic Morph</b> component enables animation for the <b>d</b> (description) presentation attribute and is the latest in all the SVG
2020-06-11 07:01:56 +02:00
components.</p>
2020-06-09 22:08:43 +02:00
<p>The main difference with the other <ahref="svgMorph.html">SVG Morph</a> component is the fact that this time we're using some path processing scripts borrowed from
2020-06-11 07:01:56 +02:00
<ahref="http://www.raphaeljs.com/">Raphael.js</a> and other libraries to convert all path commands into <i>cubic-bezier</i> path commands.</p>
2020-06-09 22:08:43 +02:00
<p>This component will process paths and out of the box will provide the closest possible interpolation by default. It comes with two tween options to help you manage the morphing
2020-06-11 07:01:56 +02:00
animation in certain conditions:</p>
2020-06-09 22:08:43 +02:00
</div>
</div>
<divclass="columns">
<divclass="col3">
2020-06-11 07:01:56 +02:00
<h3class="border text-right">Options</h3>
<pclass="condensed text-right">A series of familiar options to optimize the animation for every situation.</p>
2020-06-09 22:08:43 +02:00
</div>
<divclass="col9 border">
<pclass="condensed lead">To enhance processing and improve the morphing animation, in certain cases you will need to control the outcome via two options
2020-06-11 07:01:56 +02:00
to reverse paths.</p>
2020-06-09 22:08:43 +02:00
<ul>
<li><kbd>reverseFirstPath: <bclass='text-olive'>FALSE</b></kbd> when is <b>TRUE</b> you will reverse the FIRST shape. By default this option is <b>false</b>.</li>
<li><kbd>reverseSecondPath: <bclass='text-olive'>FALSE</b></kbd> when is <b>TRUE</b> you will reverse the SECOND shape. By default this option is also <b>false</b>.</li>
</ul>
</div>
</div>
</div>
</div>
<divclass="content-wrap">
<h3>Basic Example</h3>
<p>The first morphing animation example is a transition from a rectangle into a star, just like for the other component.</p>
// the to() method will take the path's d attribute value and use it as start value
var tween = KUTE.to('#rectangle', { path: '#star' }).start();
// OR
// simply pass in a valid path string without the need to have two paths in your SVG
var tween = KUTE.to('#rectangle', { path: 'M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011' }).start();
</code></pre>
2020-06-09 22:23:36 +02:00
<p>By default, the component will process the paths as authored and deliver its best without any option required, like for the first red rectangle below which applies to any of the above invocations:</p>
<p>The second blue shape and its corresponding end shape have been edited by adding additional curve points using a vector graphics editor to match the amount of points in both shapes as well as to optimize their travel
distance during the animation. You can use the same technique on your shapes to control the animation to your style.</p>
<p>Chris Coyier wrote an <ahref="https://css-tricks.com/svg-shape-morphing-works/">excelent article</a> to explain how SVG morphing animation works, it should give you a pretty good idea on the concept, terminology.</p>
2020-06-09 22:08:43 +02:00
2020-06-11 07:01:56 +02:00
<h3>Subpath Example</h3>
<p>In other cases, you may want to morph paths that have subpaths. Let's have a look at the following SVG:</p>
<p>Similar to the <ahref="svgMorph.html">svgMorph</a> component, this component doesn't provide multipath processing so we should split the sub-paths into multiple <b><path></b> shapes, analyze and associate them
in a way that corresponding shapes are close and their points travel the least possible distance.</p>
<p>Now since we've worked with these paths before, the first example below showcases how the <b>svgCubicMorph</b> component handles it by default, using the <code>reverseSecondPath:true</code> option for all tweens because
each shape have a slightly different position from its corresponding shape. The following example was made possible by editing the shapes with a vector graphics editor. The last example showcases a creative use of
association between starting and end shapes. Let's have a look:</p>
<p>Make sure to check the markup here as well as the <ahref="assets/js/svgCubicMorph.js"target="_blank">svgCubicMorph.js</a> for a full code review.</p>
<h3>Intersecting Paths Example</h3>
<p>The same preparation apply here, however the outcome is a bit different with cubic-bezier path commands, as shown in the first example. For the next two examples, the shapes have been edited for a better outcome.
<p>So the technique involves creating <code><mask></code> elements, splitting multipath shapes into multiple <code><path></code> shapes, matching the amount of starting and ending shapes by duplicating
an existing shape or by sampling another shape for the same purpose, editing shapes for more accurate point-to-point animation, as well as various options to optimize the visual presentation.</p>
<p>That's it, you now mastered the <b>SVG Cubic Morph</b> component.</p>
<h3>Notes</h3>
<ul>
<li>Since animation works only with <code>path</code><b>SVGElement</b>s, you might need a <ahref="https://github.com/Waest/SVGPathConverter"target="_blank">convertToPath</a> utility.</li>
<li>In some cases your start and end shapes don't have a very close size, you can use your vector graphics editor of choice or something like <ahref="https://github.com/fontello/svgpath">SVGPath</a> tools to
apply a scale transformation to your shapes' path commands.</li>
<li>The <b>SVG Cubic Morph</b> component WILL animate paths with sub-paths, but the animation isn't very appealing unless you've prepared your paths for this specific case, in other cases hopefuly
this guide will help you break the ice.</li>
<li>Compared to <ahref="svgMorph.html">svgMorph</a>, this component requires more work, but can be more memory efficient, as we're dealing with significantly less interpolation points which translates directly
into better performance and the shapes never show any sign of "polygon artifacts".</li>
<li>Some shapes can be broken even if the browser won't throw any error so make sure you double check with your SVG editor of choice.</li>
<li>In some cases the duplicated curve bezier points don't produce the best morphing animation, but you can edit the shapes and add your own additional path commands between the existing ones
so that the component will work with actual points that travel less and produce a much more "natural" morphing animation.</li>
<li>The edited shapes can be found in the <b>assets/img</b> folder of this demo, make sure to check them out.</li>
<li>Make sure to check the <ahref="assets/js/svgCubicMorph.js"target="_blank">svgCubicMorph.js</a> for a full code review.</li>
<li>This component is affected by the the <code>fill-rule="evenodd"</code> specific SVG attribute, you must make sure you check your shapes in that regard as well.</li>
<li>This component is bundled with the <i>demo/src/kute-extra.js</i> file.</li>
</ul>
</div>
<!-- FOOTER -->
<footer>
<divclass="content-wrap">
<pclass="pull-right"><aid="toTop"href="#">Back to top</a></p>