From 6005419c157a1cb539b952915b05ffee360d376d Mon Sep 17 00:00:00 2001 From: Viktor Steck Date: Thu, 22 Sep 2022 18:23:07 +0200 Subject: [PATCH] update --- .nvmrc | 1 + .vscode/settings.json | 12 ++++++++++++ examples/index.html | 11 ++++++++--- lib/bounty.js | 2 +- package.json | 5 ++--- src/bounty.js | 31 +++++++++++++++---------------- 6 files changed, 39 insertions(+), 23 deletions(-) create mode 100644 .nvmrc create mode 100644 .vscode/settings.json diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 0000000..98d9bcb --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +17 diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..532c162 --- /dev/null +++ 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 index e20bdba..dfaaf55 100644 --- a/examples/index.html +++ b/examples/index.html @@ -30,15 +30,20 @@ - asdf
+
diff --git a/lib/bounty.js b/lib/bounty.js index b9b7870..c51b01d 100644 --- a/lib/bounty.js +++ b/lib/bounty.js @@ -1 +1 @@ -!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.bounty=e():t.bounty=e()}(this,function(){return function(t){function e(n){if(r[n])return r[n].exports;var a=r[n]={exports:{},id:n,loaded:!1};return t[n].call(a.exports,a,a.exports,e),a.loaded=!0,a.exports}var r={};return e.m=t,e.c=r,e.p="/",e(0)}([function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0});var a=r(1);Object.defineProperty(e,"default",{enumerable:!0,get:function(){return n(a).default}})},function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}function a(t){if(Array.isArray(t)){for(var e=0,r=Array(t.length);er.length;){var a=e[e.length-r.length-1+n];r.splice(n,0,isNaN(parseInt(a,10))?a:"0")}return r},L=String(u||"0");console.log("initialString:",L);var J=V(String(n),L);console.log("values:",J);var K=V(L,String(n));console.log("initial:",K);var Q=J.map(function(t,e){var r=e+"-"+I;return isNaN(parseInt(t,10))||isNaN(parseInt(K[e],10))?{isDigit:!1,node:d(H,t,F),value:t,offset:{x:0,y:q}}:{isDigit:!0,id:r,node:s(H,F,m,r),filter:p(T,r),value:Number(t),initial:Number(K[e]),offset:{x:0,y:q+Number(K[e])*(F*m)}}}),R=[],U=Q.filter(function(t){return t.isDigit});U.forEach(function(t,e){console.log("i:",e);var r=t.initial*(F*m),n=(N*e*f+t.value)*(F*m),a=(0,c.default)({from:r,to:n,duration:O,delay:(U.length-1-e)*w+j,step:function(e){var a;t.offset.y=q-e%(F*m*f),(a=t.node,i.attr).call(a,"transform","translate("+t.offset.x+", "+t.offset.y+")");var l=(r+n)/2,o=Number(Math.abs(Math.abs(Math.abs(e-l)-l)-r)/100).toFixed(1);(a=t.filter,i.attr).call(a,"stdDeviation","0 "+o)},end:0===e?function(){console.log("end"),console.log("element:",D),D.querySelectorAll(".js-bounty__zero").forEach(function(t){t.style.opacity=1}),D.querySelectorAll('[style*="filter"]').forEach(function(t){t.style.filter=""}),X()}:function(t){return t}});console.log("digitTransition:",a),R.push(a)});var W=function(t){z=0,Q.forEach(function(t){var e=t.node.getBBox(),r=e.width;t.offset.x=z,t.isDigit&&[].concat(a(t.node.childNodes)).forEach(function(t){var e=t.getBBox(),n=e.width,a=(r-n)/2;t.setAttribute("x",a)}),z+=r+_}),z-=_,Q.forEach(function(t){var e;(e=t.node,i.attr).call(e,"transform","translate("+t.offset.x+", "+t.offset.y+")")}),g(G,z,C),R.forEach(function(e){return e.update(t)})},X=(0,o.default)(W),Y=function(){R.forEach(function(t){return t.pause()})},Z=function(){R.forEach(function(t){return t.resume()})};return E&&Y(),{cancel:X,pause:Y,resume:Z}}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default=function(t){var e=void 0,r=function r(n){e=requestAnimationFrame(r),t(n)};return r(0),function(){return cancelAnimationFrame(e)}}},function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0}),e.default=function(t){var e=document.createElementNS(l.default.svg,t);return this.appendChild(e),e};var a=r(6),l=n(a)},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default=function(t,e){return this.setAttribute(t,e),this}},function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0});var a=r(7);Object.defineProperty(e,"select",{enumerable:!0,get:function(){return n(a).default}});var l=r(3);Object.defineProperty(e,"append",{enumerable:!0,get:function(){return n(l).default}});var o=r(4);Object.defineProperty(e,"attr",{enumerable:!0,get:function(){return n(o).default}});var i=r(8);Object.defineProperty(e,"style",{enumerable:!0,get:function(){return n(i).default}});var u=r(9);Object.defineProperty(e,"text",{enumerable:!0,get:function(){return n(u).default}})},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={svg:"http://www.w3.org/2000/svg"}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default=function(t){return t===String(t)?document.querySelector(t):t}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default=function(t,e){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"";return this.style.setProperty(t,e,r),this}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default=function(t){return this.textContent=t,this}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=function(t){return((t*=2)<=1?t*t*t:(t-=2)*t*t+2)/2};e.default=function(t){var e=t.from,n=t.to,a=t.duration,l=void 0===a?3e3:a,o=t.delay,i=void 0===o?0:o,u=t.easing,c=void 0===u?r:u,f=t.start,s=void 0===f?function(t){return t}:f,d=t.step,p=void 0===d?function(t){return t}:d,v=t.end,y=void 0===v?function(t){return t}:v,g=e,h=0,m=!1,b=0,_=!1,x=function(t){if(!_){h||(h=t,b=t,s(g)),m&&(h+=t-b);var r=Math.min(Math.max(t-h-i,0),l)/l;g=c(r)*(n-e)+e,p(g),1===r&&(_=!0,y(g)),b=t}},j=function(){m=!0},M=function(){m=!1};return{update:x,pause:j,resume:M}}}])}); \ No newline at end of file +!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.bounty=e():t.bounty=e()}(this,function(){return function(t){function e(n){if(r[n])return r[n].exports;var a=r[n]={exports:{},id:n,loaded:!1};return t[n].call(a.exports,a,a.exports,e),a.loaded=!0,a.exports}var r={};return e.m=t,e.c=r,e.p="/",e(0)}([function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0});var a=r(1);Object.defineProperty(e,"default",{enumerable:!0,get:function(){return n(a).default}})},function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}function a(t){if(Array.isArray(t)){for(var e=0,r=Array(t.length);er.length;){var a=e[e.length-r.length-1+n];r.splice(n,0,isNaN(parseInt(a,10))?a:"0")}return r},K=String(u||"0"),Q=J(String(n),K),R=J(K,String(n)),U=Q.map(function(t,e){var r=e+"-"+C;return isNaN(parseInt(t,10))||isNaN(parseInt(R[e],10))?{isDigit:!1,node:d(L,t,q),value:t,offset:{x:0,y:z}}:{isDigit:!0,id:r,node:s(L,q,m,r),filter:p(T,r),value:Number(t),initial:Number(R[e]),offset:{x:0,y:z+Number(R[e])*(q*m)}}}),W=[],X=U.filter(function(t){return t.isDigit});X.forEach(function(t,e){var r=t.initial*(q*m),n=(N*e*f+t.value)*(q*m),a=(0,c.default)({from:r,to:n,duration:O,delay:(X.length-1-e)*w+j,step:function(e){var a;t.offset.y=z-e%(q*m*f),(a=t.node,i.attr).call(a,"transform","translate("+t.offset.x+", "+t.offset.y+")");var l=void 0;if(B){var o=(r+n)/2;l=Number(Math.abs(Math.abs(Math.abs(e-o)-o)-r)/100).toFixed(1)}else l=0;(a=t.filter,i.attr).call(a,"stdDeviation","0 "+l)},end:0===e?function(){F.querySelectorAll(".js-bounty__zero").forEach(function(t){t.style.opacity=1}),F.querySelectorAll('[style*="filter"]').forEach(function(t){t.style.filter=""}),Z()}:function(t){return t}});W.push(a)});var Y=function(t){G=0,U.forEach(function(t){var e=t.node.getBBox(),r=e.width;t.offset.x=G,t.isDigit&&[].concat(a(t.node.childNodes)).forEach(function(t){var e=t.getBBox(),n=e.width,a=(r-n)/2;t.setAttribute("x",a)}),G+=r+_}),G-=_,U.forEach(function(t){var e;(e=t.node,i.attr).call(e,"transform","translate("+t.offset.x+", "+t.offset.y+")")}),h(V,G,H),W.forEach(function(e){return e.update(t)})},Z=(0,o.default)(Y),$=function(){W.forEach(function(t){return t.pause()})},tt=function(){W.forEach(function(t){return t.resume()})};return E&&$(),{cancel:Z,pause:$,resume:tt}}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default=function(t){var e=void 0,r=function r(n){e=requestAnimationFrame(r),t(n)};return r(0),function(){return cancelAnimationFrame(e)}}},function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0}),e.default=function(t){var e=document.createElementNS(l.default.svg,t);return this.appendChild(e),e};var a=r(6),l=n(a)},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default=function(t,e){return this.setAttribute(t,e),this}},function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0});var a=r(7);Object.defineProperty(e,"select",{enumerable:!0,get:function(){return n(a).default}});var l=r(3);Object.defineProperty(e,"append",{enumerable:!0,get:function(){return n(l).default}});var o=r(4);Object.defineProperty(e,"attr",{enumerable:!0,get:function(){return n(o).default}});var i=r(8);Object.defineProperty(e,"style",{enumerable:!0,get:function(){return n(i).default}});var u=r(9);Object.defineProperty(e,"text",{enumerable:!0,get:function(){return n(u).default}})},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={svg:"http://www.w3.org/2000/svg"}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default=function(t){return t===String(t)?document.querySelector(t):t}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default=function(t,e){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"";return this.style.setProperty(t,e,r),this}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default=function(t){return this.textContent=t,this}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=function(t){return((t*=2)<=1?t*t*t:(t-=2)*t*t+2)/2};e.default=function(t){var e=t.from,n=t.to,a=t.duration,l=void 0===a?3e3:a,o=t.delay,i=void 0===o?0:o,u=t.easing,c=void 0===u?r:u,f=t.start,s=void 0===f?function(t){return t}:f,d=t.step,p=void 0===d?function(t){return t}:d,v=t.end,y=void 0===v?function(t){return t}:v,h=e,g=0,m=!1,b=0,_=!1,x=function(t){if(!_){g||(g=t,b=t,s(h)),m&&(g+=t-b);var r=Math.min(Math.max(t-g-i,0),l)/l;h=c(r)*(n-e)+e,p(h),1===r&&(_=!0,y(h)),b=t}},j=function(){m=!0},M=function(){m=!1};return{update:x,pause:j,resume:M}}}])}); \ No newline at end of file diff --git a/package.json b/package.json index 5971d0f..66a4b68 100644 --- 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 index ad3543a..7a51c47 100644 --- 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); });