update

coderitual · Sep 22, 2022 · 6005419 · 6005419
1 parent 6e0181e
commit 6005419
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 23 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+17
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,12 @@
+{
+  "favorites.resources": [
+    {
+      "filePath": "examples/index.html",
+      "group": "Default"
+    },
+    {
+      "filePath": "src/bounty.js",
+      "group": "Default"
+    }
+  ]
+}
diff --git a/examples/index.html b/examples/index.html
@@ -30,15 +30,20 @@
 </head>
 
 <body>
-  asdf
   <div class="js-bounty"></div>
+  <div class="js-bounty2"></div>
   <script src="../lib/bounty.js"></script>
   <script>
-    const b = bounty.default({ el: '.js-bounty', value: '250000', rotations: '1', animationDelay: 1000, startManually: true })
+    const b = bounty.default({ el: '.js-bounty', value: '250000', rotations: '1', animationDelay: 1000, startManually: true , motionBlur: false})
+    const b2 = bounty.default({ el: '.js-bounty2', value: '250000', rotations: '1', animationDelay: 1000, startManually: true , motionBlur: true})
     setTimeout(() => {
       console.log('start')
       b.resume()
-    }, 1000)
+    }, 500)
+    setTimeout(() => {
+      console.log('start')
+      b2.resume()
+    }, 3000)
   </script>
 </body>
 

diff --git a/lib/bounty.js b/lib/bounty.js
diff --git a/package.json b/package.json
@@ -4,10 +4,9 @@
   "description": "SVG library for transitioning numbers with motion blur",
   "main": "lib/bounty.js",
   "scripts": {
-    "start": "webpack serve --progress --colors --inline --host 0.0.0.0",
+    "dev": "webpack serve --progress --colors --inline --host 0.0.0.0",
     "build": "webpack -p",
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "start:dev": "webpack serve"
+    "test": "echo \"Error: no test specified\" && exit 1"
   },
   "files": [
     "lib/*.js"

diff --git a/src/bounty.js b/src/bounty.js
@@ -20,7 +20,6 @@ const createDigitRoulette = (svg, fontSize, lineHeight, id) => {
       ::style("opacity", i === 0 ? '0': '1');
   });
 
-  console.log('roulette:', roulette)
   return roulette;
 };
 
@@ -94,7 +93,8 @@ export default ({
   letterAnimationDelay = 0,
   duration = 3000,
   rotations = 1,
-  startManually = false
+  startManually = false,
+  motionBlur = true
 }) => {
   const element = select(el);
   const computedStyle = window.getComputedStyle(element);
@@ -126,11 +126,8 @@ export default ({
   };
 
   const initialString = String(initialValue || "0");
-  console.log('initialString:', initialString)
   const values = prepareValues(String(value), initialString);
-  console.log('values:', values)
   const initial = prepareValues(initialString, String(value));
-  console.log('initial:', initial)
 
   const chars = values.map((char, i) => {
     const id = `${i}-${salt}`;
@@ -160,7 +157,6 @@ export default ({
   const transitions = [];
   const digits = chars.filter((char) => char.isDigit);
   digits.forEach((digit, i) => {
-    console.log('i:', i)
     const sourceDistance = digit.initial * (fontSize * lineHeight);
     const targetDistance =
       (rotations * i * DIGITS_COUNT + digit.value) * (fontSize * lineHeight);
@@ -176,20 +172,24 @@ export default ({
           "transform",
           `translate(${digit.offset.x}, ${digit.offset.y})`
         );
-        const filterOrigin = (sourceDistance + targetDistance) / 2;
-        const motionValue = Number(
-          Math.abs(
-            Math.abs(Math.abs(value - filterOrigin) - filterOrigin) -
-            sourceDistance
-            ) / 100
-            ).toFixed(1);
+        let motionValue
+        if(motionBlur) {
+          const filterOrigin = (sourceDistance + targetDistance) / 2;
+          motionValue = Number(
+            Math.abs(
+              Math.abs(Math.abs(value - filterOrigin) - filterOrigin) -
+              sourceDistance
+              ) / 100
+              ).toFixed(1);
+        } else {
+          motionValue = 0
+        }
+
         digit.filter::attr("stdDeviation", `0 ${motionValue}`);
       },
       end:
       i === 0
       ? () => {
-            console.log('end')
-            console.log('element:', element)
             element.querySelectorAll('.js-bounty__zero').forEach(el => {
               el.style.opacity = 1;
             });
@@ -200,7 +200,6 @@ export default ({
             }
           : (e) => e,
     });
-    console.log('digitTransition:', digitTransition)
     transitions.push(digitTransition);
   });