Added a simple example for #96
This commit is contained in:
thednp
parent
81a86026c5
commit
e313cb369f
|
|
@ -61,6 +61,7 @@
|
|||
<li><a href="svg.html">SVG Plugin </a></li>
|
||||
<li><a href="text.html">Text Plugin </a></li>
|
||||
<li><a href="attr.html">Attributes Plugin </a></li>
|
||||
<li><a href="progress.html">Tween Progress </a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="btn-group">
|
||||
|
|
|
|||
1
api.html
1
api.html
|
|
@ -64,6 +64,7 @@
|
|||
<li><a href="svg.html">SVG Plugin </a></li>
|
||||
<li><a href="text.html">Text Plugin </a></li>
|
||||
<li><a href="attr.html">Attributes Plugin </a></li>
|
||||
<li><a href="progress.html">Tween Progress </a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="btn-group active">
|
||||
|
|
|
|||
18
assets/js/progress.js
Normal file
18
assets/js/progress.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
(function(){
|
||||
|
||||
// invalidate for unsupported browsers
|
||||
var isIE = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) !== null ? parseFloat( RegExp.$1 ) : false;
|
||||
if (isIE&&isIE<9) { (function(){return; }()) } // return if SVG API is not supported
|
||||
|
||||
// basic morph, only fromTo and allFromTo should work
|
||||
var morphTween = KUTE.fromTo('#rectangle', { path: '#rectangle' }, { path: '#star' }, { morphIndex: 127 });
|
||||
|
||||
// the range slider
|
||||
var rangeSlider = document.querySelector('input[type="range"');
|
||||
|
||||
rangeSlider.addEventListener('input',function(){
|
||||
var tick = 0.00001; // we need a value that's slightly above 0, math is hard in JavaScript
|
||||
KUTE.update.call(morphTween, this.value * morphTween.options.duration + tick)
|
||||
})
|
||||
|
||||
}())
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
// invalidate for unsupported browsers
|
||||
var isIE = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) !== null ? parseFloat( RegExp.$1 ) : false;
|
||||
if (isIE&&isIE<9) {return;} // return if SVG API is not supported
|
||||
if (isIE&&isIE<9) { (function(){return; }()) } // return if SVG API is not supported
|
||||
|
||||
// basic morph
|
||||
var morphTween = KUTE.to('#rectangle', { path: '#star' }, {
|
||||
|
|
|
|||
|
|
@ -64,6 +64,7 @@
|
|||
<li><a href="svg.html">SVG Plugin </a></li>
|
||||
<li><a href="text.html">Text Plugin </a></li>
|
||||
<li class="active"><a href="attr.html">Attributes Plugin </a></li>
|
||||
<li><a href="progress.html">Tween Progress </a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="btn-group">
|
||||
|
|
|
|||
1
css.html
1
css.html
|
|
@ -63,6 +63,7 @@
|
|||
<li><a href="svg.html">SVG Plugin </a></li>
|
||||
<li><a href="text.html">Text Plugin </a></li>
|
||||
<li><a href="attr.html">Attributes Plugin </a></li>
|
||||
<li><a href="progress.html">Tween Progress </a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="btn-group">
|
||||
|
|
|
|||
|
|
@ -66,6 +66,7 @@
|
|||
<li><a href="svg.html">SVG Plugin </a></li>
|
||||
<li><a href="text.html">Text Plugin </a></li>
|
||||
<li><a href="attr.html">Attributes Plugin </a></li>
|
||||
<li><a href="progress.html">Tween Progress </a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="btn-group active">
|
||||
|
|
|
|||
|
|
@ -62,6 +62,7 @@
|
|||
<li><a href="svg.html">SVG Plugin </a></li>
|
||||
<li><a href="text.html">Text Plugin </a></li>
|
||||
<li><a href="attr.html">Attributes Plugin </a></li>
|
||||
<li><a href="progress.html">Tween Progress </a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="btn-group">
|
||||
|
|
|
|||
|
|
@ -62,6 +62,7 @@
|
|||
<li><a href="svg.html">SVG Plugin </a></li>
|
||||
<li><a href="text.html">Text Plugin </a></li>
|
||||
<li><a href="attr.html">Attributes Plugin </a></li>
|
||||
<li><a href="progress.html">Tween Progress </a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="btn-group active">
|
||||
|
|
|
|||
|
|
@ -59,6 +59,7 @@
|
|||
<li><a href="svg.html">SVG Plugin </a></li>
|
||||
<li><a href="text.html">Text Plugin </a></li>
|
||||
<li><a href="attr.html">Attributes Plugin </a></li>
|
||||
<li><a href="progress.html">Tween Progress </a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="btn-group">
|
||||
|
|
|
|||
|
|
@ -59,6 +59,7 @@
|
|||
<li><a href="svg.html">SVG Plugin </a></li>
|
||||
<li><a href="text.html">Text Plugin </a></li>
|
||||
<li><a href="attr.html">Attributes Plugin </a></li>
|
||||
<li><a href="progress.html">Tween Progress </a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="btn-group">
|
||||
|
|
|
|||
|
|
@ -64,6 +64,7 @@
|
|||
<li><a href="svg.html">SVG Plugin </a></li>
|
||||
<li><a href="text.html">Text Plugin </a></li>
|
||||
<li><a href="attr.html">Attributes Plugin </a></li>
|
||||
<li><a href="progress.html">Tween Progress </a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="btn-group active">
|
||||
|
|
|
|||
215
progress.html
Normal file
215
progress.html
Normal file
|
|
@ -0,0 +1,215 @@
|
|||
<!DOCTYPE html>
|
||||
<!--[if IE 7]><html class="ie ie7" lang="en"><![endif]-->
|
||||
<!--[if IE 8]><html class="ie ie8" lang="en"><![endif]-->
|
||||
<!--[if IE 9]><html class="ie ie9" lang="en"><![endif]-->
|
||||
|
||||
<!--[if gte IE 10 | !IE ]><!-->
|
||||
<html lang="en">
|
||||
<!--<![endif]-->
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
|
||||
<meta name="description" content="A simple tool to showcase control KUTE.js tween objects progress.">
|
||||
<meta name="keywords" content="kute,kute.js,animation,javascript animation,tweening engine,animation engine,progress,Javascript,Native Javascript,vanilla javascript,jQuery">
|
||||
<meta name="author" content="dnp_theme">
|
||||
<link rel="shortcut icon" href="./assets/img/favicon.png">
|
||||
<!-- TO DO -->
|
||||
|
||||
<title>KUTE.js Using Update Functions | Javascript Animation Engine</title>
|
||||
|
||||
<!-- RESET CSS -->
|
||||
<link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
|
||||
|
||||
<!-- DEMO KUTE CSS -->
|
||||
<link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
|
||||
|
||||
<!-- Ion Icons -->
|
||||
<link type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Synthax highlighter -->
|
||||
<link href="./assets/css/prism.css" rel="stylesheet">
|
||||
|
||||
<!-- Polyfill -->
|
||||
<script src="./assets/js/minifill.js">
|
||||
</script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- legacy browsers support via polyfill, you must remove the above when used
|
||||
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
|
||||
<style>
|
||||
.text-example {
|
||||
margin: 0 0 20px;
|
||||
font-size: 28px
|
||||
}
|
||||
|
||||
.red {
|
||||
color: red
|
||||
}
|
||||
.slider {
|
||||
margin-right: 20px;
|
||||
}
|
||||
input[type="range"] {
|
||||
-webkit-appearance: none !important;
|
||||
width: 100%;
|
||||
height: 12px;
|
||||
background-color: #b0cde4;
|
||||
border: 0;
|
||||
border-radius: 5px;
|
||||
margin: auto;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
input[type="range"]:hover {
|
||||
background-color: #a3bdd2;
|
||||
}
|
||||
input[type="range"]:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input[type="range"]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none !important;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: #2196F3;
|
||||
border-radius: 30px;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
input[type="range"]::-webkit-slider-thumb:hover {
|
||||
background-color: #1b7bc7;
|
||||
}
|
||||
input[type="range"]::-webkit-slider-thumb:active {
|
||||
box-shadow: 0px 0px 1px #1b7bc7;
|
||||
}
|
||||
|
||||
#rangevalue {
|
||||
position: absolute; bottom: 20px; right: 20px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="site-wrapper">
|
||||
|
||||
<div class="navbar-wrapper">
|
||||
<div class="content-wrap">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<ul class="nav">
|
||||
<li class="btn-group"><a href="#" data-function="toggle">Features <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="features.html">Feature Overview</a></li>
|
||||
<li><a href="properties.html">Supported Properties</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="btn-group active">
|
||||
<a href="#" data-function="toggle">Examples <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="examples.html">Core Engine</a></li>
|
||||
<li><a href="css.html">CSS Plugin </a></li>
|
||||
<li><a href="svg.html">SVG Plugin </a></li>
|
||||
<li><a href="text.html">Text Plugin </a></li>
|
||||
<li><a href="attr.html">Attributes Plugin </a></li>
|
||||
<li class="active"><a href="progress.html">Tween Progress </a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="btn-group">
|
||||
<a href="#" data-function="toggle">API <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="start.html">Getting Started</a></li>
|
||||
<li><a href="api.html">Public Methods</a></li>
|
||||
<li><a href="options.html">Tween Options</a></li>
|
||||
<li><a href="easing.html">Easing Functions</a></li>
|
||||
<li><a href="extend.html">Extend Guide</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-wrap">
|
||||
<h2>Tween Progress Control</h2>
|
||||
<p>KUTE.js object exposes all required methods in order for it to work, so why not try to do something fun? How about control tween progress? So let's make a quick tool:</p>
|
||||
<ul>
|
||||
<li>We need an <code><input type="range" min="0" max="1" step="0.00001" /></code> with these exact <code>min</code>, <code>max</code> and <code>step</code> attributes</li>
|
||||
<li>Now we need a tween object, let's just do a svg morph for instance, but make sure you use <code>KUTE.fromTo()</code> method, the others don't prepare start values for the tween object</li>
|
||||
<li>We also need to make sure nothing controls the progress except the range input, so don't use <code>start()</code> or <code>pause()</code> methods at all, as well as <code>repeat</code> and / or <code>yoyo</code> options</li>
|
||||
<li>Next we attach an <code>input</code> event handler to update the tween progress by using the <code>KUTE.update</code> function, which is the step function triggered on every <code>requestAnimationFrame</code> tick</li>
|
||||
</ul>
|
||||
|
||||
<p>A very basic code sample will look like this:</p>
|
||||
|
||||
|
||||
<pre><code class="language-javascript">// basic morph, only fromTo and allFromTo should work
|
||||
var morphTween = KUTE.fromTo('#rectangle', { path: '#rectangle' }, { path: '#star' }, { morphIndex: 127 });
|
||||
|
||||
// the range slider
|
||||
var rangeSlider = document.querySelector('input[type="range"');
|
||||
|
||||
// do the dew
|
||||
rangeSlider.addEventListener('input',function(){
|
||||
var tick = 0.00001; // we need a value that's slightly above 0, math is hard in JavaScript
|
||||
KUTE.update.call(morphTween, this.value * morphTween.options.duration + tick);
|
||||
})
|
||||
</code></pre>
|
||||
|
||||
<p>And now let's see the code in action:</p>
|
||||
<div class="featurettes">
|
||||
<div class="slider">
|
||||
<input type="range" min="0" max="1" oninput="rangevalue.value=(value*100).toFixed(2)+'%'" value="0" step="0.0001"/>
|
||||
<output id="rangevalue">0%</output>
|
||||
</div>
|
||||
<svg class="example-box-model example-box" id="morph-example1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
|
||||
<path id="rectangle" class="bg-blue" d="M38.01,5.653h526.531c17.905,0,32.422,14.516,32.422,32.422v526.531
|
||||
c0,17.905-14.517,32.422-32.422,32.422H38.01c-17.906,0-32.422-14.517-32.422-32.422V38.075C5.588,20.169,20.104,5.653,38.01,5.653z"/>
|
||||
<path id="star" style="visibility:hidden" d="M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808
|
||||
l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<p>We might argue that we want to use other methods in combination with this method, or use this method while animations are running, but there are other libraries out there that can do that already. This example here is just to showcase KUTE.js can do this too.</p>
|
||||
|
||||
<ul id="share" class="nav">
|
||||
<li>Share </li>
|
||||
<li class="hidden-xs"><a 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"><span class="ion-social-facebook-outline icon"></span></a></li>
|
||||
<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=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"><span class="icon ion-social-twitter-outline"></span></a></li>
|
||||
<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer>
|
||||
<div class="content-wrap">
|
||||
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
|
||||
<p>© 2007 - 2019 · <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
<!-- /.site-wrapper -->
|
||||
|
||||
|
||||
|
||||
<!-- JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
|
||||
<!-- highlighter -->
|
||||
<script src="./assets/js/prism.js" type="text/javascript"></script>
|
||||
|
||||
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
|
||||
<script src="./src/kute.min.js"></script>
|
||||
<!-- KUTE.js core -->
|
||||
<script src="./src/kute-svg.min.js"></script>
|
||||
|
||||
<!-- KUTE.js Text Plugin -->
|
||||
<script src="./assets/js/scripts.js"></script>
|
||||
<!-- global scripts stuff -->
|
||||
<script src="./assets/js/progress.js"></script>
|
||||
<!-- css plugin examples -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -61,6 +61,7 @@
|
|||
<li><a href="svg.html">SVG Plugin </a></li>
|
||||
<li><a href="text.html">Text Plugin </a></li>
|
||||
<li><a href="attr.html">Attributes Plugin </a></li>
|
||||
<li><a href="progress.html">Tween Progress </a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="btn-group">
|
||||
|
|
|
|||
|
|
@ -64,6 +64,7 @@
|
|||
<li><a href="svg.html">SVG Plugin </a></li>
|
||||
<li><a href="text.html">Text Plugin </a></li>
|
||||
<li><a href="attr.html">Attributes Plugin </a></li>
|
||||
<li><a href="progress.html">Tween Progress </a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="btn-group active">
|
||||
|
|
|
|||
1
svg.html
1
svg.html
|
|
@ -63,6 +63,7 @@
|
|||
<li class="active"><a href="svg.html">SVG Plugin </a></li>
|
||||
<li><a href="text.html">Text Plugin </a></li>
|
||||
<li><a href="attr.html">Attributes Plugin </a></li>
|
||||
<li><a href="progress.html">Tween Progress </a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="btn-group">
|
||||
|
|
|
|||
Loading…
Reference in a new issue