From 00fbc386245b5206c502bfbe929e1fafa9fe5614 Mon Sep 17 00:00:00 2001 From: thednp Date: Thu, 7 Nov 2019 17:49:12 +0200 Subject: [PATCH] Added a simple example for #96 --- demo/about.html | 1 + demo/api.html | 1 + demo/assets/js/progress.js | 18 ++++ demo/attr.html | 1 + demo/css.html | 1 + demo/easing.html | 1 + demo/examples.html | 1 + demo/extend.html | 1 + demo/features.html | 1 + demo/index.html | 1 + demo/options.html | 1 + demo/progress.html | 215 +++++++++++++++++++++++++++++++++++++ demo/properties.html | 1 + demo/start.html | 1 + demo/svg.html | 1 + demo/text.html | 1 + 16 files changed, 247 insertions(+) create mode 100644 demo/assets/js/progress.js create mode 100644 demo/progress.html diff --git a/demo/about.html b/demo/about.html index fcbb1de..7fbb5d5 100644 --- a/demo/about.html +++ b/demo/about.html @@ -61,6 +61,7 @@
  • SVG Plugin
  • Text Plugin
  • Attributes Plugin
    • +
  • Tween Progress
  • diff --git a/demo/api.html b/demo/api.html index f8293f9..02f9287 100644 --- a/demo/api.html +++ b/demo/api.html @@ -64,6 +64,7 @@
  • SVG Plugin
  • Text Plugin
  • Attributes Plugin
    • +
  • Tween Progress
  • diff --git a/demo/assets/js/progress.js b/demo/assets/js/progress.js new file mode 100644 index 0000000..50d2d69 --- /dev/null +++ b/demo/assets/js/progress.js @@ -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) + }) + +}()) \ No newline at end of file diff --git a/demo/attr.html b/demo/attr.html index e246687..cd86a71 100644 --- a/demo/attr.html +++ b/demo/attr.html @@ -64,6 +64,7 @@
  • SVG Plugin
  • Text Plugin
  • Attributes Plugin
    • +
  • Tween Progress
  • diff --git a/demo/css.html b/demo/css.html index 8748fb3..aeb0ca4 100644 --- a/demo/css.html +++ b/demo/css.html @@ -63,6 +63,7 @@
  • SVG Plugin
  • Text Plugin
  • Attributes Plugin
    • +
  • Tween Progress
  • diff --git a/demo/easing.html b/demo/easing.html index 5186b58..b300227 100644 --- a/demo/easing.html +++ b/demo/easing.html @@ -66,6 +66,7 @@
  • SVG Plugin
  • Text Plugin
  • Attributes Plugin
    • +
  • Tween Progress
  • diff --git a/demo/examples.html b/demo/examples.html index 7aee710..0c83ce2 100644 --- a/demo/examples.html +++ b/demo/examples.html @@ -62,6 +62,7 @@
  • SVG Plugin
  • Text Plugin
  • Attributes Plugin
    • +
  • Tween Progress
  • diff --git a/demo/extend.html b/demo/extend.html index c93136a..ea24628 100644 --- a/demo/extend.html +++ b/demo/extend.html @@ -62,6 +62,7 @@
  • SVG Plugin
  • Text Plugin
  • Attributes Plugin
    • +
  • Tween Progress
  • diff --git a/demo/features.html b/demo/features.html index 361feff..fdcd43f 100644 --- a/demo/features.html +++ b/demo/features.html @@ -59,6 +59,7 @@
  • SVG Plugin
  • Text Plugin
  • Attributes Plugin
    • +
  • Tween Progress
  • diff --git a/demo/index.html b/demo/index.html index 841c5c4..35aed1f 100644 --- a/demo/index.html +++ b/demo/index.html @@ -59,6 +59,7 @@
  • SVG Plugin
  • Text Plugin
  • Attributes Plugin
    • +
  • Tween Progress
  • diff --git a/demo/options.html b/demo/options.html index 8a2a9aa..d0c5174 100644 --- a/demo/options.html +++ b/demo/options.html @@ -64,6 +64,7 @@
  • SVG Plugin
  • Text Plugin
  • Attributes Plugin
    • +
  • Tween Progress
  • diff --git a/demo/progress.html b/demo/progress.html new file mode 100644 index 0000000..4f82c0d --- /dev/null +++ b/demo/progress.html @@ -0,0 +1,215 @@ + + + + + + + + + + + + + + + + + + + + KUTE.js Using Update Functions | Javascript Animation Engine + + + + + + + + + + + + + + + + + + + + + + +
    + +
    +
    +

    KUTE.js

     + +
    +
    + +
    +

    Tween Progress Control

    +

    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:

    +
      +
    • We need an <input type="range" min="0" max="1" step="0.00001" /> with these exact min, max and step attributes
      • +
    • Now we need a tween object, let's just do a svg morph for instance, but make sure you use KUTE.fromTo() method, the others don't prepare start values for the tween object
      • +
    • We also need to make sure nothing controls the progress except the range input, so don't use start() or pause() methods at all, as well as repeat and / or yoyo options
      • +
    • Next we attach an input event handler to update the tween progress by using the KUTE.update function, which is the step function triggered on every requestAnimationFrame tick
      • +
    + +

    A very basic code sample will look like this:

    + + +
    // 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);
+})
+
    + +

    And now let's see the code in action:

    +
    +
    + + 0% +
    + + + + +
    + +

    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.

    + + +
    + + + + +
    + + + + + + + + + + + + + + + + + + + + + + + diff --git a/demo/properties.html b/demo/properties.html index 25ab65b..8109355 100644 --- a/demo/properties.html +++ b/demo/properties.html @@ -61,6 +61,7 @@
  • SVG Plugin
  • Text Plugin
  • Attributes Plugin
    • +
  • Tween Progress
  • diff --git a/demo/start.html b/demo/start.html index d6cea16..e954580 100644 --- a/demo/start.html +++ b/demo/start.html @@ -64,6 +64,7 @@
  • SVG Plugin
  • Text Plugin
  • Attributes Plugin
    • +
  • Tween Progress
  • diff --git a/demo/svg.html b/demo/svg.html index 044a713..4492a3d 100644 --- a/demo/svg.html +++ b/demo/svg.html @@ -63,6 +63,7 @@
  • SVG Plugin
  • Text Plugin
  • Attributes Plugin
    • +
  • Tween Progress
  • diff --git a/demo/text.html b/demo/text.html index f43583f..7e8419f 100644 --- a/demo/text.html +++ b/demo/text.html @@ -73,6 +73,7 @@
  • SVG Plugin
  • Text Plugin
  • Attributes Plugin
    • +
  • Tween Progress