From dc290503e6377c6212cdfa966fa515dcba938842 Mon Sep 17 00:00:00 2001 From: github-actions Date: Sun, 9 Jul 2023 18:21:59 +0000 Subject: [PATCH] chore(release): 1.0.1 [skip ci] ## [1.0.1](https://github.com/raohmaru/paprika-tween/compare/v1.0.0...v1.0.1) (2023-07-09) ### Bug Fixes * change branch name that triggers the workflows ([7f7deeb](https://github.com/raohmaru/paprika-tween/commit/7f7deeb2e2c8722fa3867291de035b945f328352)) * reduce size of published module ([844beb0](https://github.com/raohmaru/paprika-tween/commit/844beb0a5cfea8566e2856184e1bea3a7df3b216)) --- dist/easing.cjs | 249 +++++++++++++++ dist/easing.iife.min.js | 2 + dist/easing.js | 215 +++++++++++++ dist/easing.js.map | 7 + dist/easing.min.js | 2 + dist/paprika-tween.cjs | 549 +++++++++++++++++++++++++++++++++ dist/paprika-tween.iife.min.js | 2 + dist/paprika-tween.js | 521 +++++++++++++++++++++++++++++++ dist/paprika-tween.js.map | 7 + dist/paprika-tween.min.js | 2 + package.json | 2 +- 11 files changed, 1557 insertions(+), 1 deletion(-) create mode 100644 dist/easing.cjs create mode 100644 dist/easing.iife.min.js create mode 100644 dist/easing.js create mode 100644 dist/easing.js.map create mode 100644 dist/easing.min.js create mode 100644 dist/paprika-tween.cjs create mode 100644 dist/paprika-tween.iife.min.js create mode 100644 dist/paprika-tween.js create mode 100644 dist/paprika-tween.js.map create mode 100644 dist/paprika-tween.min.js diff --git a/dist/easing.cjs b/dist/easing.cjs new file mode 100644 index 0000000..10bf740 --- /dev/null +++ b/dist/easing.cjs @@ -0,0 +1,249 @@ +/*! For license information please see https://github.com/raohmaru/paprika-tween/blob/master/LICENSE */ +var __defProp = Object.defineProperty; +var __getOwnPropDesc = Object.getOwnPropertyDescriptor; +var __getOwnPropNames = Object.getOwnPropertyNames; +var __hasOwnProp = Object.prototype.hasOwnProperty; +var __export = (target, all) => { + for (var name in all) + __defProp(target, name, { get: all[name], enumerable: true }); +}; +var __copyProps = (to, from, except, desc) => { + if (from && typeof from === "object" || typeof from === "function") { + for (let key of __getOwnPropNames(from)) + if (!__hasOwnProp.call(to, key) && key !== except) + __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); + } + return to; +}; +var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); + +// src/easing/index.js +var easing_exports = {}; +__export(easing_exports, { + Back: () => Back, + Bounce: () => Bounce, + Circular: () => Circular, + Cubic: () => Cubic, + Elastic: () => Elastic, + Exponential: () => Exponential, + Linear: () => Linear, + Quadratic: () => Quadratic, + Quartic: () => Quartic, + Quintic: () => Quintic, + Sinusoidal: () => Sinusoidal +}); +module.exports = __toCommonJS(easing_exports); + +// src/easing/back.js +var s = 1.70158; +var sa = 1.70158 * 1.525; +var Back = { + In(t) { + return t * t * ((s + 1) * t - s); + }, + Out(t) { + return --t * t * ((s + 1) * t + s) + 1; + }, + InOut(t) { + if ((t *= 2) < 1) { + return 0.5 * (t * t * ((sa + 1) * t - sa)); + } + return 0.5 * ((t -= 2) * t * ((sa + 1) * t + sa) + 2); + } +}; + +// src/easing/bounce.js +function In(t) { + return 1 - Out(1 - t); +} +function Out(t) { + if (t < 1 / 2.75) { + return 7.5625 * t * t; + } else if (t < 2 / 2.75) { + return 7.5625 * (t -= 1.5 / 2.75) * t + 0.75; + } else if (t < 2.5 / 2.75) { + return 7.5625 * (t -= 2.25 / 2.75) * t + 0.9375; + } else { + return 7.5625 * (t -= 2.625 / 2.75) * t + 0.984375; + } +} +var Bounce = { + In, + Out, + InOut(t) { + if (t < 0.5) { + return In(t * 2) * 0.5; + } + return Out(t * 2 - 1) * 0.5 + 0.5; + } +}; + +// src/easing/circular.js +var sqrt = Math.sqrt; +var Circular = { + In(t) { + return 1 - sqrt(1 - t * t); + }, + Out(t) { + return sqrt(1 - --t * t); + }, + InOut(t) { + if ((t *= 2) < 1) { + return -0.5 * (sqrt(1 - t * t) - 1); + } + return 0.5 * (sqrt(1 - (t -= 2) * t) + 1); + } +}; + +// src/easing/cubic.js +var Cubic = { + In(t) { + return t * t * t; + }, + Out(t) { + return --t * t * t + 1; + }, + InOut(t) { + if ((t *= 2) < 1) { + return 0.5 * t * t * t; + } + return 0.5 * ((t -= 2) * t * t + 2); + } +}; + +// src/easing/elastic.js +var Elastic = { + In(t) { + if (t === 0) { + return 0; + } + if (t === 1) { + return 1; + } + return -Math.pow(2, 10 * (t - 1)) * Math.sin((t - 1.1) * 5 * Math.PI); + }, + Out(t) { + if (t === 0) { + return 0; + } + if (t === 1) { + return 1; + } + return Math.pow(2, -10 * t) * Math.sin((t - 0.1) * 5 * Math.PI) + 1; + }, + InOut(t) { + if (t === 0) { + return 0; + } + if (t === 1) { + return 1; + } + t *= 2; + if (t < 1) { + return -0.5 * Math.pow(2, 10 * (t - 1)) * Math.sin((t - 1.1) * 5 * Math.PI); + } + return 0.5 * Math.pow(2, -10 * (t - 1)) * Math.sin((t - 1.1) * 5 * Math.PI) + 1; + } +}; + +// src/easing/exponential.js +var Exponential = { + In(t) { + return t === 0 ? 0 : Math.pow(1024, t - 1); + }, + Out(t) { + return t === 1 ? 1 : 1 - Math.pow(2, -10 * t); + }, + InOut(t) { + if (t === 0) { + return 0; + } + if (t === 1) { + return 1; + } + if ((t *= 2) < 1) { + return 0.5 * Math.pow(1024, t - 1); + } + return 0.5 * (-Math.pow(2, -10 * (t - 1)) + 2); + } +}; + +// src/easing/linear.js +var Linear = { + None: (t) => t +}; + +// src/easing/quadratic.js +var Quadratic = { + In(t) { + return t * t; + }, + Out(t) { + return t * (2 - t); + }, + InOut(t) { + if ((t *= 2) < 1) { + return 0.5 * t * t; + } + return -0.5 * (--t * (t - 2) - 1); + } +}; + +// src/easing/quartic.js +var Quartic = { + In(t) { + return t * t * t * t; + }, + Out(t) { + return 1 - --t * t * t * t; + }, + InOut(t) { + if ((t *= 2) < 1) { + return 0.5 * t * t * t * t; + } + return -0.5 * ((t -= 2) * t * t * t - 2); + } +}; + +// src/easing/quintic.js +var Quintic = { + In(t) { + return t * t * t * t * t; + }, + Out(t) { + return --t * t * t * t * t + 1; + }, + InOut(t) { + if ((t *= 2) < 1) { + return 0.5 * t * t * t * t * t; + } + return 0.5 * ((t -= 2) * t * t * t * t + 2); + } +}; + +// src/easing/sinusoidal.js +var Sinusoidal = { + In(t) { + return 1 - Math.cos(t * Math.PI / 2); + }, + Out(t) { + return Math.sin(t * Math.PI / 2); + }, + InOut(t) { + return 0.5 * (1 - Math.cos(Math.PI * t)); + } +}; +// Annotate the CommonJS export names for ESM import in node: +0 && (module.exports = { + Back, + Bounce, + Circular, + Cubic, + Elastic, + Exponential, + Linear, + Quadratic, + Quartic, + Quintic, + Sinusoidal +}); diff --git a/dist/easing.iife.min.js b/dist/easing.iife.min.js new file mode 100644 index 0000000..c0a2f21 --- /dev/null +++ b/dist/easing.iife.min.js @@ -0,0 +1,2 @@ +/*! For license information please see https://github.com/raohmaru/paprika-tween/blob/master/LICENSE */ +var Easing=(()=>{var t=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var B=Object.prototype.hasOwnProperty;var C=(r,n)=>{for(var e in n)t(r,e,{get:n[e],enumerable:!0})},E=(r,n,e,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let u of d(n))!B.call(r,u)&&u!==e&&t(r,u,{get:()=>n[u],enumerable:!(s=Q(n,u))||s.enumerable});return r};var b=r=>E(t({},"__esModule",{value:!0}),r);var k={};C(k,{Back:()=>c,Bounce:()=>p,Circular:()=>I,Cubic:()=>x,Elastic:()=>h,Exponential:()=>M,Linear:()=>O,Quadratic:()=>l,Quartic:()=>m,Quintic:()=>w,Sinusoidal:()=>P});var o=2.5949095,c={In(r){return r*r*((1.70158+1)*r-1.70158)},Out(r){return--r*r*((1.70158+1)*r+1.70158)+1},InOut(r){return(r*=2)<1?.5*(r*r*((o+1)*r-o)):.5*((r-=2)*r*((o+1)*r+o)+2)}};function f(r){return 1-a(1-r)}function a(r){return r<1/2.75?7.5625*r*r:r<2/2.75?7.5625*(r-=1.5/2.75)*r+.75:r<2.5/2.75?7.5625*(r-=2.25/2.75)*r+.9375:7.5625*(r-=2.625/2.75)*r+.984375}var p={In:f,Out:a,InOut(r){return r<.5?f(r*2)*.5:a(r*2-1)*.5+.5}};var i=Math.sqrt,I={In(r){return 1-i(1-r*r)},Out(r){return i(1- --r*r)},InOut(r){return(r*=2)<1?-.5*(i(1-r*r)-1):.5*(i(1-(r-=2)*r)+1)}};var x={In(r){return r*r*r},Out(r){return--r*r*r+1},InOut(r){return(r*=2)<1?.5*r*r*r:.5*((r-=2)*r*r+2)}};var h={In(r){return r===0?0:r===1?1:-Math.pow(2,10*(r-1))*Math.sin((r-1.1)*5*Math.PI)},Out(r){return r===0?0:r===1?1:Math.pow(2,-10*r)*Math.sin((r-.1)*5*Math.PI)+1},InOut(r){return r===0?0:r===1?1:(r*=2,r<1?-.5*Math.pow(2,10*(r-1))*Math.sin((r-1.1)*5*Math.PI):.5*Math.pow(2,-10*(r-1))*Math.sin((r-1.1)*5*Math.PI)+1)}};var M={In(r){return r===0?0:Math.pow(1024,r-1)},Out(r){return r===1?1:1-Math.pow(2,-10*r)},InOut(r){return r===0?0:r===1?1:(r*=2)<1?.5*Math.pow(1024,r-1):.5*(-Math.pow(2,-10*(r-1))+2)}};var O={None:r=>r};var l={In(r){return r*r},Out(r){return r*(2-r)},InOut(r){return(r*=2)<1?.5*r*r:-.5*(--r*(r-2)-1)}};var m={In(r){return r*r*r*r},Out(r){return 1- --r*r*r*r},InOut(r){return(r*=2)<1?.5*r*r*r*r:-.5*((r-=2)*r*r*r-2)}};var w={In(r){return r*r*r*r*r},Out(r){return--r*r*r*r*r+1},InOut(r){return(r*=2)<1?.5*r*r*r*r*r:.5*((r-=2)*r*r*r*r+2)}};var P={In(r){return 1-Math.cos(r*Math.PI/2)},Out(r){return Math.sin(r*Math.PI/2)},InOut(r){return .5*(1-Math.cos(Math.PI*r))}};return b(k);})(); diff --git a/dist/easing.js b/dist/easing.js new file mode 100644 index 0000000..662f810 --- /dev/null +++ b/dist/easing.js @@ -0,0 +1,215 @@ +/*! For license information please see https://github.com/raohmaru/paprika-tween/blob/master/LICENSE */ + +// src/easing/back.js +var s = 1.70158; +var sa = 1.70158 * 1.525; +var Back = { + In(t) { + return t * t * ((s + 1) * t - s); + }, + Out(t) { + return --t * t * ((s + 1) * t + s) + 1; + }, + InOut(t) { + if ((t *= 2) < 1) { + return 0.5 * (t * t * ((sa + 1) * t - sa)); + } + return 0.5 * ((t -= 2) * t * ((sa + 1) * t + sa) + 2); + } +}; + +// src/easing/bounce.js +function In(t) { + return 1 - Out(1 - t); +} +function Out(t) { + if (t < 1 / 2.75) { + return 7.5625 * t * t; + } else if (t < 2 / 2.75) { + return 7.5625 * (t -= 1.5 / 2.75) * t + 0.75; + } else if (t < 2.5 / 2.75) { + return 7.5625 * (t -= 2.25 / 2.75) * t + 0.9375; + } else { + return 7.5625 * (t -= 2.625 / 2.75) * t + 0.984375; + } +} +var Bounce = { + In, + Out, + InOut(t) { + if (t < 0.5) { + return In(t * 2) * 0.5; + } + return Out(t * 2 - 1) * 0.5 + 0.5; + } +}; + +// src/easing/circular.js +var sqrt = Math.sqrt; +var Circular = { + In(t) { + return 1 - sqrt(1 - t * t); + }, + Out(t) { + return sqrt(1 - --t * t); + }, + InOut(t) { + if ((t *= 2) < 1) { + return -0.5 * (sqrt(1 - t * t) - 1); + } + return 0.5 * (sqrt(1 - (t -= 2) * t) + 1); + } +}; + +// src/easing/cubic.js +var Cubic = { + In(t) { + return t * t * t; + }, + Out(t) { + return --t * t * t + 1; + }, + InOut(t) { + if ((t *= 2) < 1) { + return 0.5 * t * t * t; + } + return 0.5 * ((t -= 2) * t * t + 2); + } +}; + +// src/easing/elastic.js +var Elastic = { + In(t) { + if (t === 0) { + return 0; + } + if (t === 1) { + return 1; + } + return -Math.pow(2, 10 * (t - 1)) * Math.sin((t - 1.1) * 5 * Math.PI); + }, + Out(t) { + if (t === 0) { + return 0; + } + if (t === 1) { + return 1; + } + return Math.pow(2, -10 * t) * Math.sin((t - 0.1) * 5 * Math.PI) + 1; + }, + InOut(t) { + if (t === 0) { + return 0; + } + if (t === 1) { + return 1; + } + t *= 2; + if (t < 1) { + return -0.5 * Math.pow(2, 10 * (t - 1)) * Math.sin((t - 1.1) * 5 * Math.PI); + } + return 0.5 * Math.pow(2, -10 * (t - 1)) * Math.sin((t - 1.1) * 5 * Math.PI) + 1; + } +}; + +// src/easing/exponential.js +var Exponential = { + In(t) { + return t === 0 ? 0 : Math.pow(1024, t - 1); + }, + Out(t) { + return t === 1 ? 1 : 1 - Math.pow(2, -10 * t); + }, + InOut(t) { + if (t === 0) { + return 0; + } + if (t === 1) { + return 1; + } + if ((t *= 2) < 1) { + return 0.5 * Math.pow(1024, t - 1); + } + return 0.5 * (-Math.pow(2, -10 * (t - 1)) + 2); + } +}; + +// src/easing/linear.js +var Linear = { + None: (t) => t +}; + +// src/easing/quadratic.js +var Quadratic = { + In(t) { + return t * t; + }, + Out(t) { + return t * (2 - t); + }, + InOut(t) { + if ((t *= 2) < 1) { + return 0.5 * t * t; + } + return -0.5 * (--t * (t - 2) - 1); + } +}; + +// src/easing/quartic.js +var Quartic = { + In(t) { + return t * t * t * t; + }, + Out(t) { + return 1 - --t * t * t * t; + }, + InOut(t) { + if ((t *= 2) < 1) { + return 0.5 * t * t * t * t; + } + return -0.5 * ((t -= 2) * t * t * t - 2); + } +}; + +// src/easing/quintic.js +var Quintic = { + In(t) { + return t * t * t * t * t; + }, + Out(t) { + return --t * t * t * t * t + 1; + }, + InOut(t) { + if ((t *= 2) < 1) { + return 0.5 * t * t * t * t * t; + } + return 0.5 * ((t -= 2) * t * t * t * t + 2); + } +}; + +// src/easing/sinusoidal.js +var Sinusoidal = { + In(t) { + return 1 - Math.cos(t * Math.PI / 2); + }, + Out(t) { + return Math.sin(t * Math.PI / 2); + }, + InOut(t) { + return 0.5 * (1 - Math.cos(Math.PI * t)); + } +}; +export { + Back, + Bounce, + Circular, + Cubic, + Elastic, + Exponential, + Linear, + Quadratic, + Quartic, + Quintic, + Sinusoidal +}; +//# sourceMappingURL=easing.js.map diff --git a/dist/easing.js.map b/dist/easing.js.map new file mode 100644 index 0000000..b41495a --- /dev/null +++ b/dist/easing.js.map @@ -0,0 +1,7 @@ +{ + "version": 3, + "sources": ["../src/easing/back.js", "../src/easing/bounce.js", "../src/easing/circular.js", "../src/easing/cubic.js", "../src/easing/elastic.js", "../src/easing/exponential.js", "../src/easing/linear.js", "../src/easing/quadratic.js", "../src/easing/quartic.js", "../src/easing/quintic.js", "../src/easing/sinusoidal.js"], + "sourcesContent": ["const s = 1.70158;\nconst sa = 1.70158 * 1.525;\n\nexport const Back = {\n In(t) {\n return t * t * ((s + 1) * t - s);\n },\n Out(t) {\n return --t * t * ((s + 1) * t + s) + 1;\n },\n InOut(t) {\n if ((t *= 2) < 1) {\n return 0.5 * (t * t * ((sa + 1) * t - sa));\n }\n return 0.5 * ((t -= 2) * t * ((sa + 1) * t + sa) + 2);\n }\n};\n", "function In(t) {\n return 1 - Out(1 - t);\n}\n\nfunction Out(t) {\n if (t < (1 / 2.75)) {\n return 7.5625 * t * t;\n } else if (t < (2 / 2.75)) {\n return 7.5625 * (t -= (1.5 / 2.75)) * t + 0.75;\n } else if (t < (2.5 / 2.75)) {\n return 7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375;\n } else {\n return 7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375;\n }\n}\n\nexport const Bounce = {\n In,\n Out,\n InOut(t) {\n if (t < 0.5) {\n return In(t * 2) * 0.5;\n }\n return Out(t * 2 - 1) * 0.5 + 0.5;\n }\n};\n", "const sqrt = Math.sqrt;\n\nexport const Circular = {\n In(t) {\n return 1 - sqrt(1 - t * t);\n },\n Out(t) {\n return sqrt(1 - (--t * t));\n },\n InOut(t) {\n if ((t *= 2) < 1) {\n return - 0.5 * (sqrt(1 - t * t) - 1);\n }\n return 0.5 * (sqrt(1 - (t -= 2) * t) + 1);\n }\n};\n", "export const Cubic = {\n In(t) {\n return t * t * t;\n },\n Out(t) {\n return --t * t * t + 1;\n },\n InOut(t) {\n if ((t *= 2) < 1) {\n return 0.5 * t * t * t;\n }\n return 0.5 * ((t -= 2) * t * t + 2);\n }\n};\n", "export const Elastic = {\n In(t) {\n if (t === 0) {\n return 0;\n }\n if (t === 1) {\n return 1;\n }\n return -Math.pow(2, 10 * (t - 1)) * Math.sin((t - 1.1) * 5 * Math.PI);\n },\n Out(t) {\n if (t === 0) {\n return 0;\n }\n if (t === 1) {\n return 1;\n }\n return Math.pow(2, -10 * t) * Math.sin((t - 0.1) * 5 * Math.PI) + 1;\n },\n InOut(t) {\n if (t === 0) {\n return 0;\n }\n if (t === 1) {\n return 1;\n }\n t *= 2;\n if (t < 1) {\n return -0.5 * Math.pow(2, 10 * (t - 1)) * Math.sin((t - 1.1) * 5 * Math.PI);\n }\n return 0.5 * Math.pow(2, -10 * (t - 1)) * Math.sin((t - 1.1) * 5 * Math.PI) + 1;\n }\n};\n", "export const Exponential = {\n In(t) {\n return t === 0 ? 0 : Math.pow(1024, t - 1);\n },\n Out(t) {\n return t === 1 ? 1 : 1 - Math.pow(2, - 10 * t);\n },\n InOut(t) {\n if (t === 0) {\n return 0;\n }\n if (t === 1) {\n return 1;\n }\n if ((t *= 2) < 1) {\n return 0.5 * Math.pow(1024, t - 1);\n }\n return 0.5 * (- Math.pow(2, - 10 * (t - 1)) + 2);\n }\n};\n", "export const Linear = {\n None: (t) => t\n};\n", "export const Quadratic = {\n In(t) {\n return t * t;\n },\n Out(t) {\n return t * (2 - t);\n },\n InOut(t) {\n if ((t *= 2) < 1) {\n return 0.5 * t * t;\n }\n return - 0.5 * (--t * (t - 2) - 1);\n }\n};\n", "export const Quartic = {\n In(t) {\n return t * t * t * t;\n },\n Out(t) {\n return 1 - (--t * t * t * t);\n },\n InOut(t) {\n if ((t *= 2) < 1) {\n return 0.5 * t * t * t * t;\n }\n return - 0.5 * ((t -= 2) * t * t * t - 2);\n }\n};\n", "export const Quintic = {\n In(t) {\n return t * t * t * t * t;\n },\n Out(t) {\n return --t * t * t * t * t + 1;\n },\n InOut(t) {\n if ((t *= 2) < 1) {\n return 0.5 * t * t * t * t * t;\n }\n return 0.5 * ((t -= 2) * t * t * t * t + 2);\n }\n};\n", "export const Sinusoidal = {\n In(t) {\n return 1 - Math.cos(t * Math.PI / 2);\n },\n Out(t) {\n return Math.sin(t * Math.PI / 2);\n },\n InOut(t) {\n return 0.5 * (1 - Math.cos(Math.PI * t));\n }\n};\n"], + "mappings": "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", + "names": [] +} diff --git a/dist/easing.min.js b/dist/easing.min.js new file mode 100644 index 0000000..3d8f552 --- /dev/null +++ b/dist/easing.min.js @@ -0,0 +1,2 @@ +/*! For license information please see https://github.com/raohmaru/paprika-tween/blob/master/LICENSE */ +var n=2.5949095,i={In(r){return r*r*((1.70158+1)*r-1.70158)},Out(r){return--r*r*((1.70158+1)*r+1.70158)+1},InOut(r){return(r*=2)<1?.5*(r*r*((n+1)*r-n)):.5*((r-=2)*r*((n+1)*r+n)+2)}};function o(r){return 1-e(1-r)}function e(r){return r<1/2.75?7.5625*r*r:r<2/2.75?7.5625*(r-=1.5/2.75)*r+.75:r<2.5/2.75?7.5625*(r-=2.25/2.75)*r+.9375:7.5625*(r-=2.625/2.75)*r+.984375}var t={In:o,Out:e,InOut(r){return r<.5?o(r*2)*.5:e(r*2-1)*.5+.5}};var u=Math.sqrt,a={In(r){return 1-u(1-r*r)},Out(r){return u(1- --r*r)},InOut(r){return(r*=2)<1?-.5*(u(1-r*r)-1):.5*(u(1-(r-=2)*r)+1)}};var s={In(r){return r*r*r},Out(r){return--r*r*r+1},InOut(r){return(r*=2)<1?.5*r*r*r:.5*((r-=2)*r*r+2)}};var c={In(r){return r===0?0:r===1?1:-Math.pow(2,10*(r-1))*Math.sin((r-1.1)*5*Math.PI)},Out(r){return r===0?0:r===1?1:Math.pow(2,-10*r)*Math.sin((r-.1)*5*Math.PI)+1},InOut(r){return r===0?0:r===1?1:(r*=2,r<1?-.5*Math.pow(2,10*(r-1))*Math.sin((r-1.1)*5*Math.PI):.5*Math.pow(2,-10*(r-1))*Math.sin((r-1.1)*5*Math.PI)+1)}};var f={In(r){return r===0?0:Math.pow(1024,r-1)},Out(r){return r===1?1:1-Math.pow(2,-10*r)},InOut(r){return r===0?0:r===1?1:(r*=2)<1?.5*Math.pow(1024,r-1):.5*(-Math.pow(2,-10*(r-1))+2)}};var p={None:r=>r};var I={In(r){return r*r},Out(r){return r*(2-r)},InOut(r){return(r*=2)<1?.5*r*r:-.5*(--r*(r-2)-1)}};var x={In(r){return r*r*r*r},Out(r){return 1- --r*r*r*r},InOut(r){return(r*=2)<1?.5*r*r*r*r:-.5*((r-=2)*r*r*r-2)}};var h={In(r){return r*r*r*r*r},Out(r){return--r*r*r*r*r+1},InOut(r){return(r*=2)<1?.5*r*r*r*r*r:.5*((r-=2)*r*r*r*r+2)}};var M={In(r){return 1-Math.cos(r*Math.PI/2)},Out(r){return Math.sin(r*Math.PI/2)},InOut(r){return .5*(1-Math.cos(Math.PI*r))}};export{i as Back,t as Bounce,a as Circular,s as Cubic,c as Elastic,f as Exponential,p as Linear,I as Quadratic,x as Quartic,h as Quintic,M as Sinusoidal}; diff --git a/dist/paprika-tween.cjs b/dist/paprika-tween.cjs new file mode 100644 index 0000000..caa71b8 --- /dev/null +++ b/dist/paprika-tween.cjs @@ -0,0 +1,549 @@ +/*! For license information please see https://github.com/raohmaru/paprika-tween/blob/master/LICENSE */ +var __defProp = Object.defineProperty; +var __getOwnPropDesc = Object.getOwnPropertyDescriptor; +var __getOwnPropNames = Object.getOwnPropertyNames; +var __hasOwnProp = Object.prototype.hasOwnProperty; +var __export = (target, all) => { + for (var name in all) + __defProp(target, name, { get: all[name], enumerable: true }); +}; +var __copyProps = (to, from, except, desc) => { + if (from && typeof from === "object" || typeof from === "function") { + for (let key of __getOwnPropNames(from)) + if (!__hasOwnProp.call(to, key) && key !== except) + __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); + } + return to; +}; +var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); + +// src/index.js +var src_exports = {}; +__export(src_exports, { + Mixer: () => Mixer, + Mortar: () => Mortar, + Recipe: () => Recipe, + Spice: () => Spice, + sweet: () => sweet +}); +module.exports = __toCommonJS(src_exports); + +// src/mixer.js +var Mixer = class { + /** + * Creates a new Mixer instance. + * @constructor + * @since 1.0.0 + */ + constructor() { + this.spices = []; + } + /** + * Adds one or more [spices]{@link Spice} or [recipes]{@link Recipe} (this is, animatable objects with properties to interpolate). + * @param {...(Spice|Recipe)} rest - Instances of Paprika animatable objects. + * @returns {Mixer} - The current instance of the Mixer. + * @since 1.0.0 + * @example + import { Mixer, Spice } from 'paprika-tween'; + const spice1 = new Spice({ ... }); + const spice2 = new Spice({ ... }); + const mixer = new Mixer(); + mixer.add(spice1, spice2); + */ + add(...rest) { + for (let i = 0; i < rest.length; i++) { + this.spices.push(rest[i]); + } + return this; + } + /** + * Starts all the animations in the mixer by setting the starting time of each animatable objects at the given + * time argument.
+ * If time is not provided, the timestamp from + * [performance.now()]{@link https://developer.mozilla.org/en-US/docs/Web/API/Performance/now} + * will be used instead. + * @param {(DOMHighResTimeStamp|number)} [time] - The initial number from where to start the animation. + * @returns {Mixer} - The current instance of the Mixer. + * @since 1.0.0 + * @example + import { Mixer } from 'paprika-tween'; + const mixer = new Mixer(); + mixer.start(0); + */ + start(time) { + for (let i = 0; i < this.spices.length; i++) { + this.spices[i].start(time); + } + return this; + } + /** + * Stops all animations and clears the stack of animatable objects. + * @since 1.0.0 + */ + dispose() { + for (let i = this.spices.length - 1; i !== -1; i--) { + this.spices[i].dispose(); + } + this.spices.length = 0; + } + /** + * Moves the interpolation of the properties of the animatable objects in the mixer by the given time, which is + * relative to the starting time.
+ * If time is not provided, the timestamp from + * [performance.now()]{@link https://developer.mozilla.org/en-US/docs/Web/API/Performance/now} + * will be used instead. + * @param {(DOMHighResTimeStamp|number)} [time] - The amount of time to interpolate since the animations started. + * @since 1.0.0 + * @example + import { Mixer, Spice } from 'paprika-tween'; + const spice = new Spice({ + duration: 10, + from: { width: 100 }, + to: { width: 550 }, + render: (props) => { ... } + }); + const mixer = new Mixer(0); + mixer.add(spice) + .start(); + mixer.frame(1); + */ + frame(time) { + for (let i = 0; i < this.spices.length; i++) { + this.spices[i].frame(time); + } + } +}; + +// src/seed.js +var Seed = class { + /** + * Creates a new Seed instance. + * @since 1.0.0 + */ + constructor() { + this.elapsed = 0; + } + /** + * Calculates the current elapsed time of the interpolation as a float number between 0 (start) and 1 (end). + * @private + * @param {Number} time - The current time. + * @returns {Number} - A float number between 0 and 1. + */ + elapse(time) { + let elapsed = (time - this._startTime) / this.duration; + if (elapsed < 0) { + elapsed = 0; + } else if (elapsed > 1) { + elapsed = 1; + } + return elapsed; + } +}; + +// src/recipe.js +var defaults = { + onEnd: () => { + } +}; +var Recipe = class extends Seed { + /** + * Creates a new Recipe instance with the given options. + * @param {Object} options + * @param {function} [options.onEnd] - Function called when the last {@link Spice} reaches the end of the interpolation. + * It receives the current instance as an argument. + * @since 1.0.0 + */ + constructor(options) { + super(); + Object.assign(this, defaults, options); + this.spices = []; + } + /** + * Adds one or more [spices]{@link Spice}. + * @param {...Spice} rest - Instances of {@link Spice} objects. + * @returns {Recipe} - The current instance of the Recipe. + * @since 1.0.0 + * @example + import { Recipe, Spice } from 'paprika-tween'; + const spice1 = new Spice({ ... }); + const spice2 = new Spice({ ... }); + new Recipe().add(spice1, spice2); + */ + add(...rest) { + for (let i = 0; i < rest.length; i++) { + this.spices.push(rest[i]); + } + return this; + } + /** + * Sets the starting time at the time argument. The first animatable object in the Recipe will start + * at this time.
+ * If time is not provided, the timestamp from + * [performance.now()]{@link https://developer.mozilla.org/en-US/docs/Web/API/Performance/now} + * will be used instead. + * @param {(DOMHighResTimeStamp|number)} [time] - The initial number from where to start the animation. + * @since 1.0.0 + * @example + import { Recipe } from 'paprika-tween'; + const recipe = new Recipe(); + recipe.start(1000); + */ + start(time) { + let spice; + let duration = 0; + for (let i = 0; i < this.spices.length; i++) { + spice = this.spices[i]; + if (!this.elapsed) { + spice.delay += duration; + duration = spice.duration + spice.delay; + } + spice.start(time); + } + this._startTime = this.spices[0]._startTime; + if (!this.elapsed) { + this.duration = duration; + } + return this; + } + /** + * Moves the interpolation of the properties of the active spice in the recipe by the given time, which is + * relative to the starting time.
+ * If time is not provided, the timestamp from + * [performance.now()]{@link https://developer.mozilla.org/en-US/docs/Web/API/Performance/now} + * will be used instead. + * @param {(DOMHighResTimeStamp|number)} [time] - The amount of time to interpolate since the animations started. + * @since 1.0.0 + * @example + import { Recipe, Spice } from 'paprika-tween'; + const spice1 = new Spice({ + ..., + duration: 1700 + }); + const spice2 = new Spice({ + ..., + duration: 2000 + }); + const recipe = new Recipe().add(spice1, spice2) + .start(); + recipe.frame(performance.now() + 1800); + */ + frame(time) { + if (!this.spices.length) { + return; + } + time ?? (time = performance.now()); + let elapsed = this.elapse(time); + if (this.elapsed === elapsed) { + return; + } + this.elapsed = elapsed; + for (let i = 0; i < this.spices.length; i++) { + this.spices[i].frame(time); + } + if (elapsed === 1) { + this.onEnd(this); + } + } + /** + * Disposes the spices in the recipe and removes its callback functions, making the instance eligible + * for the garbage collector. + * @since 1.0.0 + */ + dispose() { + for (let i = this.spices.length - 1; i !== -1; i--) { + this.spices[i].dispose(); + } + this.spices.length = 0; + this.onEnd = null; + } +}; + +// src/spice.js +var defaults2 = { + duration: 0, + delay: 0, + from: {}, + to: {}, + easing: (t) => t, + // Linear.None + render: () => { + }, + onEnd: () => { + } +}; +var Spice = class extends Seed { + /** + * Creates a new Spice instance with the given options. + * @param {Object} options + * @param {number} options.duration - The duration of the interpolation. The time scale should be the same as the + * starting time and the [frame()]{@linkcode Spice#frame} time. + * @param {number} [options.delay] - The delay time to start the interpolation. + * @param {Object} options.from - An object with key/value pairs of numeric properties to interpolate from. + * @param {Object} options.to - An object with the numeric properties to interpolate to. + * @param {function} [options.easing] - The easing function with which calculate the value of the property at a given time. + * You can use your custom function or a function available at [paprika-tween/easing]{@link module:paprika-tween/easing}. + * Default is Linear.None (no easing). + * @param {function} options.render - A callback function that will be called after each [render]{@linkcode Spice#frame}. + * It receives three arguments: the first being an object with the properties interpolated for the given time, + * the second the amount of interpolation applied from 0 to 1, + * and the third the instance of the current Spice. + * @param {function} [options.onEnd] - Function called when the interpolation reaches the end. It receive an argument as + * an object with the properties interpolated to its end values. + * @since 1.0.0 + */ + constructor(options) { + super(); + Object.assign(this, defaults2, options); + } + /** + * Sets the starting time of the interpolation at the given time argument.
+ * If time is not provided, the timestamp from + * [performance.now()]{@link https://developer.mozilla.org/en-US/docs/Web/API/Performance/now} + * will be used instead. + * @param {(DOMHighResTimeStamp|number)} [time] - The initial number from where to start the animation. + * @since 1.0.0 + * @example + import { Spice } from 'paprika-tween'; + const spice = new Spice({ ... }); + spice.start(5); + */ + start(time) { + this._startTime = time ?? performance.now(); + this._startTime += this.delay; + this._interpolated = Object.assign(/* @__PURE__ */ Object.create(null), this.to); + } + /** + * Moves the interpolation of the properties of the spice by the given time, which is + * relative to the starting time.
+ * If time is not provided, the timestamp from + * [performance.now()]{@link https://developer.mozilla.org/en-US/docs/Web/API/Performance/now} + * will be used instead. + * @param {(DOMHighResTimeStamp|number)} [time] - The amount of time to interpolate since the animations started. + * @since 1.0.0 + * @example + import { Spice } from 'paprika-tween'; + const spice = new Spice({ + duration: 10, + from: { width: 100 }, + to: { width: 550 }, + render: (props) => { ... } + }); + spice.start(0); + spice.frame(2); + */ + frame(time) { + time ?? (time = performance.now()); + let elapsed = this.elapse(time); + if (this.elapsed === elapsed) { + return; + } + this.elapsed = elapsed; + const value = this.easing(elapsed); + let start, end, key; + for (key in this._interpolated) { + start = this.from[key] ?? 0; + end = this.to[key]; + this._interpolated[key] = start + (end - start) * value; + } + this.render(this._interpolated, value, this); + if (elapsed === 1) { + this.onEnd(this._interpolated, this); + } + } + /** + * Removes the interpolatable properties of the instance and its callback functions, making the instance eligible + * for the garbage collector. + * @since 1.0.0 + */ + dispose() { + this.from = null; + this.to = null; + this.render = null; + this.onEnd = null; + } + /** + * Modifies the properties of the spice with the given object. + * @param {Object} options - See [Spice constructor]{@linkcode Spice} for the available properties of the options object. + * @returns {Spice} + * @since 1.0.0 + */ + update(options) { + Object.assign(this, options); + return this; + } +}; + +// src/mortar.js +var Mortar = class { + /** + * Creates a new instance of the Mortar object. + * @param {function} [cb] - The function to be called at the given frame rate. It receives two arguments: the time since it started, + * and the elapsed time since the previous frame (or delta time). + * @param {Number} [fps=60] - The integer number of times to call the callback function per second (frames per second). + * Number must be an integer. + * @since 1.0.0 + */ + constructor(cb, fps = 60) { + this._cb = cb; + this._fpsInterval = 1e3 / fps; + this._running = false; + } + /** + * Starts the frame-by-frame loop by internally calling to [requestAnimationFrame()]{@link https://developer.mozilla.org/en/docs/Web/API/Window/requestAnimationFrame}. + * The callback function will be called the fps number of times per second. + * @since 1.0.0 + */ + start() { + this._startTime = performance.now(); + this._previousTime = this._startTime; + this._previousDeltaTime = this._startTime; + this._pausedTime = 0; + this._running = true; + this._onFrame = (currentTime) => this.frame(currentTime); + this.frame(this._startTime); + } + /** + * Pauses the frame-by-frame loop. + * @since 1.0.0 + */ + pause() { + this._running = false; + this._previousPauseTime = performance.now(); + } + /** + * Resumes the frame-by-frame loop. + * @since 1.0.0 + */ + resume() { + const now = performance.now(); + this._pausedTime += now - this._previousPauseTime; + this._running = true; + this.frame(now); + } + /** + * Stops the frame-by-frame loop and removes the callback function. Further calls to {@linkcode Mortar#start} will fail. + * @since 1.0.0 + */ + stop() { + this.pause(); + this._cb = null; + this._onFrame = null; + } + /** + * The frame() method is called before the browser performs the next repaint, then it calls the callback function. + * Mortar will ensure that the callback function is called no more than fps number of times per second. + *
+ * To keep the same speed in your animation, Be sure to use the delta argument to calculate how much the + * animation will progress in a frame. + * @since 1.0.0 + * @example + import { Mortar } from 'paprika-tween'; + function loop(time, delta) { + character.left += character.speed * delta; + } + const mortar = new Mortar(loop, 10); + mortar.start(); + */ + frame(currentTime) { + if (!this._running) { + return; + } + currentTime -= this._pausedTime; + let delta = currentTime - this._previousDeltaTime; + if (delta >= this._fpsInterval) { + this._previousDeltaTime = currentTime - delta % this._fpsInterval; + this._cb(currentTime, currentTime - this._previousTime); + this._previousTime = currentTime; + } + if (this._onFrame) { + requestAnimationFrame(this._onFrame); + } + } + /** + * Returns whether the instance is running or not. + * @type {Boolean} + */ + get running() { + return this._running; + } + /** + * Returns the time since the Mortar started. + * @type {DOMHighResTimeStamp} + */ + get time() { + return this._previousTime; + } +}; + +// src/sweet.js +var Sweetie = class extends Spice { + constructor(options) { + super(options); + this._mortar = new Mortar((time) => this.frame(time)); + } + start() { + this._mortar.start(); + super.start(this._mortar.time); + } + /** + * Pauses the animation. + * @since 1.0.0 + */ + pause() { + this._mortar.pause(); + } + /** + * Resumes the animation. + * @since 1.0.0 + */ + resume() { + this._mortar.resume(); + } + /** + * Stops the animation, removes its interpolatable properties and its callback functions. + * @since 1.0.0 + */ + dispose() { + super.dispose(); + this._mortar.stop(); + this._mortar = null; + } + async run(options) { + return new Promise((resolve) => { + this.onEnd = function() { + this.pause(); + resolve({ + sweetie: this.run.bind(this), + spice: this + }); + }; + if (options) { + this.from = this.to; + this.update(options); + } + this.start(); + }); + } + /** + * Returns whether the instance is running or not. + * @type {Boolean} + */ + get running() { + return this._mortar.running; + } + /** + * @method frame + * @private + */ +}; +function sweet(options) { + return new Sweetie(options).run(); +} +// Annotate the CommonJS export names for ESM import in node: +0 && (module.exports = { + Mixer, + Mortar, + Recipe, + Spice, + sweet +}); diff --git a/dist/paprika-tween.iife.min.js b/dist/paprika-tween.iife.min.js new file mode 100644 index 0000000..9589e09 --- /dev/null +++ b/dist/paprika-tween.iife.min.js @@ -0,0 +1,2 @@ +/*! For license information please see https://github.com/raohmaru/paprika-tween/blob/master/LICENSE */ +var Paprika=(()=>{var u=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var T=(e,s)=>{for(var t in s)u(e,t,{get:s[t],enumerable:!0})},x=(e,s,t,i)=>{if(s&&typeof s=="object"||typeof s=="function")for(let r of _(s))!g.call(e,r)&&r!==t&&u(e,r,{get:()=>s[r],enumerable:!(i=c(s,r))||i.enumerable});return e};var v=e=>x(u({},"__esModule",{value:!0}),e);var E={};T(E,{Mixer:()=>p,Mortar:()=>o,Recipe:()=>l,Spice:()=>h,sweet:()=>f});var p=class{constructor(){this.spices=[]}add(...s){for(let t=0;t1&&(t=1),t}};var w={onEnd:()=>{}},l=class extends n{constructor(s){super(),Object.assign(this,w,s),this.spices=[]}add(...s){for(let t=0;te,render:()=>{},onEnd:()=>{}},h=class extends n{constructor(s){super(),Object.assign(this,b,s)}start(s){this._startTime=s??performance.now(),this._startTime+=this.delay,this._interpolated=Object.assign(Object.create(null),this.to)}frame(s){s??(s=performance.now());let t=this.elapse(s);if(this.elapsed===t)return;this.elapsed=t;let i=this.easing(t),r,d,a;for(a in this._interpolated)r=this.from[a]??0,d=this.to[a],this._interpolated[a]=r+(d-r)*i;this.render(this._interpolated,i,this),t===1&&this.onEnd(this._interpolated,this)}dispose(){this.from=null,this.to=null,this.render=null,this.onEnd=null}update(s){return Object.assign(this,s),this}};var o=class{constructor(s,t=60){this._cb=s,this._fpsInterval=1e3/t,this._running=!1}start(){this._startTime=performance.now(),this._previousTime=this._startTime,this._previousDeltaTime=this._startTime,this._pausedTime=0,this._running=!0,this._onFrame=s=>this.frame(s),this.frame(this._startTime)}pause(){this._running=!1,this._previousPauseTime=performance.now()}resume(){let s=performance.now();this._pausedTime+=s-this._previousPauseTime,this._running=!0,this.frame(s)}stop(){this.pause(),this._cb=null,this._onFrame=null}frame(s){if(!this._running)return;s-=this._pausedTime;let t=s-this._previousDeltaTime;t>=this._fpsInterval&&(this._previousDeltaTime=s-t%this._fpsInterval,this._cb(s,s-this._previousTime),this._previousTime=s),this._onFrame&&requestAnimationFrame(this._onFrame)}get running(){return this._running}get time(){return this._previousTime}};var m=class extends h{constructor(s){super(s),this._mortar=new o(t=>this.frame(t))}start(){this._mortar.start(),super.start(this._mortar.time)}pause(){this._mortar.pause()}resume(){this._mortar.resume()}dispose(){super.dispose(),this._mortar.stop(),this._mortar=null}async run(s){return new Promise(t=>{this.onEnd=function(){this.pause(),t({sweetie:this.run.bind(this),spice:this})},s&&(this.from=this.to,this.update(s)),this.start()})}get running(){return this._mortar.running}};function f(e){return new m(e).run()}return v(E);})(); diff --git a/dist/paprika-tween.js b/dist/paprika-tween.js new file mode 100644 index 0000000..4af299e --- /dev/null +++ b/dist/paprika-tween.js @@ -0,0 +1,521 @@ +/*! For license information please see https://github.com/raohmaru/paprika-tween/blob/master/LICENSE */ + +// src/mixer.js +var Mixer = class { + /** + * Creates a new Mixer instance. + * @constructor + * @since 1.0.0 + */ + constructor() { + this.spices = []; + } + /** + * Adds one or more [spices]{@link Spice} or [recipes]{@link Recipe} (this is, animatable objects with properties to interpolate). + * @param {...(Spice|Recipe)} rest - Instances of Paprika animatable objects. + * @returns {Mixer} - The current instance of the Mixer. + * @since 1.0.0 + * @example + import { Mixer, Spice } from 'paprika-tween'; + const spice1 = new Spice({ ... }); + const spice2 = new Spice({ ... }); + const mixer = new Mixer(); + mixer.add(spice1, spice2); + */ + add(...rest) { + for (let i = 0; i < rest.length; i++) { + this.spices.push(rest[i]); + } + return this; + } + /** + * Starts all the animations in the mixer by setting the starting time of each animatable objects at the given + * time argument.
+ * If time is not provided, the timestamp from + * [performance.now()]{@link https://developer.mozilla.org/en-US/docs/Web/API/Performance/now} + * will be used instead. + * @param {(DOMHighResTimeStamp|number)} [time] - The initial number from where to start the animation. + * @returns {Mixer} - The current instance of the Mixer. + * @since 1.0.0 + * @example + import { Mixer } from 'paprika-tween'; + const mixer = new Mixer(); + mixer.start(0); + */ + start(time) { + for (let i = 0; i < this.spices.length; i++) { + this.spices[i].start(time); + } + return this; + } + /** + * Stops all animations and clears the stack of animatable objects. + * @since 1.0.0 + */ + dispose() { + for (let i = this.spices.length - 1; i !== -1; i--) { + this.spices[i].dispose(); + } + this.spices.length = 0; + } + /** + * Moves the interpolation of the properties of the animatable objects in the mixer by the given time, which is + * relative to the starting time.
+ * If time is not provided, the timestamp from + * [performance.now()]{@link https://developer.mozilla.org/en-US/docs/Web/API/Performance/now} + * will be used instead. + * @param {(DOMHighResTimeStamp|number)} [time] - The amount of time to interpolate since the animations started. + * @since 1.0.0 + * @example + import { Mixer, Spice } from 'paprika-tween'; + const spice = new Spice({ + duration: 10, + from: { width: 100 }, + to: { width: 550 }, + render: (props) => { ... } + }); + const mixer = new Mixer(0); + mixer.add(spice) + .start(); + mixer.frame(1); + */ + frame(time) { + for (let i = 0; i < this.spices.length; i++) { + this.spices[i].frame(time); + } + } +}; + +// src/seed.js +var Seed = class { + /** + * Creates a new Seed instance. + * @since 1.0.0 + */ + constructor() { + this.elapsed = 0; + } + /** + * Calculates the current elapsed time of the interpolation as a float number between 0 (start) and 1 (end). + * @private + * @param {Number} time - The current time. + * @returns {Number} - A float number between 0 and 1. + */ + elapse(time) { + let elapsed = (time - this._startTime) / this.duration; + if (elapsed < 0) { + elapsed = 0; + } else if (elapsed > 1) { + elapsed = 1; + } + return elapsed; + } +}; + +// src/recipe.js +var defaults = { + onEnd: () => { + } +}; +var Recipe = class extends Seed { + /** + * Creates a new Recipe instance with the given options. + * @param {Object} options + * @param {function} [options.onEnd] - Function called when the last {@link Spice} reaches the end of the interpolation. + * It receives the current instance as an argument. + * @since 1.0.0 + */ + constructor(options) { + super(); + Object.assign(this, defaults, options); + this.spices = []; + } + /** + * Adds one or more [spices]{@link Spice}. + * @param {...Spice} rest - Instances of {@link Spice} objects. + * @returns {Recipe} - The current instance of the Recipe. + * @since 1.0.0 + * @example + import { Recipe, Spice } from 'paprika-tween'; + const spice1 = new Spice({ ... }); + const spice2 = new Spice({ ... }); + new Recipe().add(spice1, spice2); + */ + add(...rest) { + for (let i = 0; i < rest.length; i++) { + this.spices.push(rest[i]); + } + return this; + } + /** + * Sets the starting time at the time argument. The first animatable object in the Recipe will start + * at this time.
+ * If time is not provided, the timestamp from + * [performance.now()]{@link https://developer.mozilla.org/en-US/docs/Web/API/Performance/now} + * will be used instead. + * @param {(DOMHighResTimeStamp|number)} [time] - The initial number from where to start the animation. + * @since 1.0.0 + * @example + import { Recipe } from 'paprika-tween'; + const recipe = new Recipe(); + recipe.start(1000); + */ + start(time) { + let spice; + let duration = 0; + for (let i = 0; i < this.spices.length; i++) { + spice = this.spices[i]; + if (!this.elapsed) { + spice.delay += duration; + duration = spice.duration + spice.delay; + } + spice.start(time); + } + this._startTime = this.spices[0]._startTime; + if (!this.elapsed) { + this.duration = duration; + } + return this; + } + /** + * Moves the interpolation of the properties of the active spice in the recipe by the given time, which is + * relative to the starting time.
+ * If time is not provided, the timestamp from + * [performance.now()]{@link https://developer.mozilla.org/en-US/docs/Web/API/Performance/now} + * will be used instead. + * @param {(DOMHighResTimeStamp|number)} [time] - The amount of time to interpolate since the animations started. + * @since 1.0.0 + * @example + import { Recipe, Spice } from 'paprika-tween'; + const spice1 = new Spice({ + ..., + duration: 1700 + }); + const spice2 = new Spice({ + ..., + duration: 2000 + }); + const recipe = new Recipe().add(spice1, spice2) + .start(); + recipe.frame(performance.now() + 1800); + */ + frame(time) { + if (!this.spices.length) { + return; + } + time ?? (time = performance.now()); + let elapsed = this.elapse(time); + if (this.elapsed === elapsed) { + return; + } + this.elapsed = elapsed; + for (let i = 0; i < this.spices.length; i++) { + this.spices[i].frame(time); + } + if (elapsed === 1) { + this.onEnd(this); + } + } + /** + * Disposes the spices in the recipe and removes its callback functions, making the instance eligible + * for the garbage collector. + * @since 1.0.0 + */ + dispose() { + for (let i = this.spices.length - 1; i !== -1; i--) { + this.spices[i].dispose(); + } + this.spices.length = 0; + this.onEnd = null; + } +}; + +// src/spice.js +var defaults2 = { + duration: 0, + delay: 0, + from: {}, + to: {}, + easing: (t) => t, + // Linear.None + render: () => { + }, + onEnd: () => { + } +}; +var Spice = class extends Seed { + /** + * Creates a new Spice instance with the given options. + * @param {Object} options + * @param {number} options.duration - The duration of the interpolation. The time scale should be the same as the + * starting time and the [frame()]{@linkcode Spice#frame} time. + * @param {number} [options.delay] - The delay time to start the interpolation. + * @param {Object} options.from - An object with key/value pairs of numeric properties to interpolate from. + * @param {Object} options.to - An object with the numeric properties to interpolate to. + * @param {function} [options.easing] - The easing function with which calculate the value of the property at a given time. + * You can use your custom function or a function available at [paprika-tween/easing]{@link module:paprika-tween/easing}. + * Default is Linear.None (no easing). + * @param {function} options.render - A callback function that will be called after each [render]{@linkcode Spice#frame}. + * It receives three arguments: the first being an object with the properties interpolated for the given time, + * the second the amount of interpolation applied from 0 to 1, + * and the third the instance of the current Spice. + * @param {function} [options.onEnd] - Function called when the interpolation reaches the end. It receive an argument as + * an object with the properties interpolated to its end values. + * @since 1.0.0 + */ + constructor(options) { + super(); + Object.assign(this, defaults2, options); + } + /** + * Sets the starting time of the interpolation at the given time argument.
+ * If time is not provided, the timestamp from + * [performance.now()]{@link https://developer.mozilla.org/en-US/docs/Web/API/Performance/now} + * will be used instead. + * @param {(DOMHighResTimeStamp|number)} [time] - The initial number from where to start the animation. + * @since 1.0.0 + * @example + import { Spice } from 'paprika-tween'; + const spice = new Spice({ ... }); + spice.start(5); + */ + start(time) { + this._startTime = time ?? performance.now(); + this._startTime += this.delay; + this._interpolated = Object.assign(/* @__PURE__ */ Object.create(null), this.to); + } + /** + * Moves the interpolation of the properties of the spice by the given time, which is + * relative to the starting time.
+ * If time is not provided, the timestamp from + * [performance.now()]{@link https://developer.mozilla.org/en-US/docs/Web/API/Performance/now} + * will be used instead. + * @param {(DOMHighResTimeStamp|number)} [time] - The amount of time to interpolate since the animations started. + * @since 1.0.0 + * @example + import { Spice } from 'paprika-tween'; + const spice = new Spice({ + duration: 10, + from: { width: 100 }, + to: { width: 550 }, + render: (props) => { ... } + }); + spice.start(0); + spice.frame(2); + */ + frame(time) { + time ?? (time = performance.now()); + let elapsed = this.elapse(time); + if (this.elapsed === elapsed) { + return; + } + this.elapsed = elapsed; + const value = this.easing(elapsed); + let start, end, key; + for (key in this._interpolated) { + start = this.from[key] ?? 0; + end = this.to[key]; + this._interpolated[key] = start + (end - start) * value; + } + this.render(this._interpolated, value, this); + if (elapsed === 1) { + this.onEnd(this._interpolated, this); + } + } + /** + * Removes the interpolatable properties of the instance and its callback functions, making the instance eligible + * for the garbage collector. + * @since 1.0.0 + */ + dispose() { + this.from = null; + this.to = null; + this.render = null; + this.onEnd = null; + } + /** + * Modifies the properties of the spice with the given object. + * @param {Object} options - See [Spice constructor]{@linkcode Spice} for the available properties of the options object. + * @returns {Spice} + * @since 1.0.0 + */ + update(options) { + Object.assign(this, options); + return this; + } +}; + +// src/mortar.js +var Mortar = class { + /** + * Creates a new instance of the Mortar object. + * @param {function} [cb] - The function to be called at the given frame rate. It receives two arguments: the time since it started, + * and the elapsed time since the previous frame (or delta time). + * @param {Number} [fps=60] - The integer number of times to call the callback function per second (frames per second). + * Number must be an integer. + * @since 1.0.0 + */ + constructor(cb, fps = 60) { + this._cb = cb; + this._fpsInterval = 1e3 / fps; + this._running = false; + } + /** + * Starts the frame-by-frame loop by internally calling to [requestAnimationFrame()]{@link https://developer.mozilla.org/en/docs/Web/API/Window/requestAnimationFrame}. + * The callback function will be called the fps number of times per second. + * @since 1.0.0 + */ + start() { + this._startTime = performance.now(); + this._previousTime = this._startTime; + this._previousDeltaTime = this._startTime; + this._pausedTime = 0; + this._running = true; + this._onFrame = (currentTime) => this.frame(currentTime); + this.frame(this._startTime); + } + /** + * Pauses the frame-by-frame loop. + * @since 1.0.0 + */ + pause() { + this._running = false; + this._previousPauseTime = performance.now(); + } + /** + * Resumes the frame-by-frame loop. + * @since 1.0.0 + */ + resume() { + const now = performance.now(); + this._pausedTime += now - this._previousPauseTime; + this._running = true; + this.frame(now); + } + /** + * Stops the frame-by-frame loop and removes the callback function. Further calls to {@linkcode Mortar#start} will fail. + * @since 1.0.0 + */ + stop() { + this.pause(); + this._cb = null; + this._onFrame = null; + } + /** + * The frame() method is called before the browser performs the next repaint, then it calls the callback function. + * Mortar will ensure that the callback function is called no more than fps number of times per second. + *
+ * To keep the same speed in your animation, Be sure to use the delta argument to calculate how much the + * animation will progress in a frame. + * @since 1.0.0 + * @example + import { Mortar } from 'paprika-tween'; + function loop(time, delta) { + character.left += character.speed * delta; + } + const mortar = new Mortar(loop, 10); + mortar.start(); + */ + frame(currentTime) { + if (!this._running) { + return; + } + currentTime -= this._pausedTime; + let delta = currentTime - this._previousDeltaTime; + if (delta >= this._fpsInterval) { + this._previousDeltaTime = currentTime - delta % this._fpsInterval; + this._cb(currentTime, currentTime - this._previousTime); + this._previousTime = currentTime; + } + if (this._onFrame) { + requestAnimationFrame(this._onFrame); + } + } + /** + * Returns whether the instance is running or not. + * @type {Boolean} + */ + get running() { + return this._running; + } + /** + * Returns the time since the Mortar started. + * @type {DOMHighResTimeStamp} + */ + get time() { + return this._previousTime; + } +}; + +// src/sweet.js +var Sweetie = class extends Spice { + constructor(options) { + super(options); + this._mortar = new Mortar((time) => this.frame(time)); + } + start() { + this._mortar.start(); + super.start(this._mortar.time); + } + /** + * Pauses the animation. + * @since 1.0.0 + */ + pause() { + this._mortar.pause(); + } + /** + * Resumes the animation. + * @since 1.0.0 + */ + resume() { + this._mortar.resume(); + } + /** + * Stops the animation, removes its interpolatable properties and its callback functions. + * @since 1.0.0 + */ + dispose() { + super.dispose(); + this._mortar.stop(); + this._mortar = null; + } + async run(options) { + return new Promise((resolve) => { + this.onEnd = function() { + this.pause(); + resolve({ + sweetie: this.run.bind(this), + spice: this + }); + }; + if (options) { + this.from = this.to; + this.update(options); + } + this.start(); + }); + } + /** + * Returns whether the instance is running or not. + * @type {Boolean} + */ + get running() { + return this._mortar.running; + } + /** + * @method frame + * @private + */ +}; +function sweet(options) { + return new Sweetie(options).run(); +} +export { + Mixer, + Mortar, + Recipe, + Spice, + sweet +}; +//# sourceMappingURL=paprika-tween.js.map diff --git a/dist/paprika-tween.js.map b/dist/paprika-tween.js.map new file mode 100644 index 0000000..be7122b --- /dev/null +++ b/dist/paprika-tween.js.map @@ -0,0 +1,7 @@ +{ + "version": 3, + "sources": ["../src/mixer.js", "../src/seed.js", "../src/recipe.js", "../src/spice.js", "../src/mortar.js", "../src/sweet.js"], + "sourcesContent": ["/**\n * A Mixer is an object which can hold different [spices]{@link Spice} or [recipes]{@link Recipe} that will be animated at the same time.\n *

\n * Note that a Mixer instance does not play the animation by itself. Its method [frame()]{@linkcode Mixer#frame}\n * must be called in order to execute the interpolations of each animatable object, with methods like\n * [requestAnimationFrame()]{@link https://developer.mozilla.org/en/docs/Web/API/Window/requestAnimationFrame}\n * or an instance of the {@link Mortar} class.\n * @example\nimport { Mixer, Spice } from 'paprika-tween';\nconst spice = new Spice({\n duration: 1000,\n from: { x: 0, y: 42 },\n to: { x: 200, y: 120 },\n render: (props, interpolation) => {\n console.log(props.x, props.y, interpolation);\n }\n});\nconst mixer = new Mixer();\nmixer.add(spice)\n .start();\nfunction loop(timestamp) {\n mixer.frame(timestamp);\n requestAnimationFrame(loop);\n}\nrequestAnimationFrame(loop);\n * @since 1.0.0\n */\nexport class Mixer {\n /**\n * Creates a new Mixer instance.\n * @constructor\n * @since 1.0.0\n */\n constructor() {\n this.spices = [];\n }\n /**\n * Adds one or more [spices]{@link Spice} or [recipes]{@link Recipe} (this is, animatable objects with properties to interpolate).\n * @param {...(Spice|Recipe)} rest - Instances of Paprika animatable objects.\n * @returns {Mixer} - The current instance of the Mixer.\n * @since 1.0.0\n * @example\nimport { Mixer, Spice } from 'paprika-tween';\nconst spice1 = new Spice({ ... });\nconst spice2 = new Spice({ ... });\nconst mixer = new Mixer();\nmixer.add(spice1, spice2);\n */\n add(...rest) {\n for (let i = 0; i < rest.length; i++) {\n this.spices.push(rest[i]);\n }\n return this;\n }\n /**\n * Starts all the animations in the mixer by setting the starting time of each animatable objects at the given\n * time argument.
\n * If time is not provided, the timestamp from\n * [performance.now()]{@link https://developer.mozilla.org/en-US/docs/Web/API/Performance/now}\n * will be used instead.\n * @param {(DOMHighResTimeStamp|number)} [time] - The initial number from where to start the animation.\n * @returns {Mixer} - The current instance of the Mixer.\n * @since 1.0.0\n * @example\nimport { Mixer } from 'paprika-tween';\nconst mixer = new Mixer();\nmixer.start(0);\n */\n start(time) {\n for (let i = 0; i < this.spices.length; i++) {\n this.spices[i].start(time);\n }\n return this;\n }\n /**\n * Stops all animations and clears the stack of animatable objects.\n * @since 1.0.0\n */\n dispose() {\n for (let i = this.spices.length - 1; i !== -1; i--) {\n this.spices[i].dispose();\n }\n this.spices.length = 0;\n }\n /**\n * Moves the interpolation of the properties of the animatable objects in the mixer by the given time, which is\n * relative to the starting time.
\n * If time is not provided, the timestamp from\n * [performance.now()]{@link https://developer.mozilla.org/en-US/docs/Web/API/Performance/now}\n * will be used instead.\n * @param {(DOMHighResTimeStamp|number)} [time] - The amount of time to interpolate since the animations started.\n * @since 1.0.0\n * @example\nimport { Mixer, Spice } from 'paprika-tween';\nconst spice = new Spice({\n duration: 10,\n from: { width: 100 },\n to: { width: 550 },\n render: (props) => { ... }\n});\nconst mixer = new Mixer(0);\nmixer.add(spice)\n .start();\nmixer.frame(1);\n */\n frame(time) {\n for (let i = 0; i < this.spices.length; i++) {\n this.spices[i].frame(time);\n }\n }\n}\n", "/**\n * Seed is the super class of {@link Spice} and {@link Recipe} animatable objects. It does not contain properties that can be interpolated, hence {@link Spice} or {@link Recipe} should be used instead.\n * @private\n * @since 1.0.0\n */\nexport class Seed {\n /**\n * Creates a new Seed instance.\n * @since 1.0.0\n */\n constructor() {\n this.elapsed = 0;\n }\n /**\n * Calculates the current elapsed time of the interpolation as a float number between 0 (start) and 1 (end).\n * @private\n * @param {Number} time - The current time.\n * @returns {Number} - A float number between 0 and 1.\n */\n elapse(time) {\n let elapsed = (time - this._startTime) / this.duration;\n if (elapsed < 0) {\n elapsed = 0;\n } else if (elapsed > 1) {\n elapsed = 1;\n }\n return elapsed;\n }\n}\n", "import { Seed } from './seed.js';\n\nconst defaults = {\n onEnd: () => { }\n};\n\n/**\n * A Recipe object can contain any number of [spices]{@link Spice} which will be interpolated sequentially, this is, one each another.\n * @example\nimport { Mixer, Recipe, Spice } from 'paprika-tween';\nconst spice1 = new Spice({ ... });\nconst spice2 = new Spice({ ... });\nconst recipe = new Recipe({ onEnd: () => cancelAnimationFrame(rafID) });\nrecipe.add(spice1, spice2);\nconst mixer = new Mixer();\nmixer.add(recipe)\n .start();\nfunction loop(timestamp) {\n mixer.frame(timestamp);\n rafID = requestAnimationFrame(loop);\n}\nlet rafID = requestAnimationFrame(loop);\n * @since 1.0.0\n */\nexport class Recipe extends Seed {\n /**\n * Creates a new Recipe instance with the given options.\n * @param {Object} options\n * @param {function} [options.onEnd] - Function called when the last {@link Spice} reaches the end of the interpolation.\n * It receives the current instance as an argument.\n * @since 1.0.0\n */\n constructor(options) {\n super();\n Object.assign(this, defaults, options);\n this.spices = [];\n }\n /**\n * Adds one or more [spices]{@link Spice}.\n * @param {...Spice} rest - Instances of {@link Spice} objects.\n * @returns {Recipe} - The current instance of the Recipe.\n * @since 1.0.0\n * @example\nimport { Recipe, Spice } from 'paprika-tween';\nconst spice1 = new Spice({ ... });\nconst spice2 = new Spice({ ... });\nnew Recipe().add(spice1, spice2);\n */\n add(...rest) {\n for (let i = 0; i < rest.length; i++) {\n this.spices.push(rest[i]);\n }\n return this;\n }\n /**\n * Sets the starting time at the time argument. The first animatable object in the Recipe will start\n * at this time.
\n * If time is not provided, the timestamp from\n * [performance.now()]{@link https://developer.mozilla.org/en-US/docs/Web/API/Performance/now}\n * will be used instead.\n * @param {(DOMHighResTimeStamp|number)} [time] - The initial number from where to start the animation.\n * @since 1.0.0\n * @example\nimport { Recipe } from 'paprika-tween';\nconst recipe = new Recipe();\nrecipe.start(1000);\n */\n start(time) {\n let spice;\n let duration = 0;\n for (let i = 0; i < this.spices.length; i++) {\n spice = this.spices[i];\n if (!this.elapsed) {\n spice.delay += duration;\n duration = spice.duration + spice.delay;\n }\n spice.start(time);\n }\n this._startTime = this.spices[0]._startTime;\n if (!this.elapsed) {\n this.duration = duration;\n }\n return this;\n }\n /**\n * Moves the interpolation of the properties of the active spice in the recipe by the given time, which is\n * relative to the starting time.
\n * If time is not provided, the timestamp from\n * [performance.now()]{@link https://developer.mozilla.org/en-US/docs/Web/API/Performance/now}\n * will be used instead.\n * @param {(DOMHighResTimeStamp|number)} [time] - The amount of time to interpolate since the animations started.\n * @since 1.0.0\n * @example\nimport { Recipe, Spice } from 'paprika-tween';\nconst spice1 = new Spice({\n ...,\n duration: 1700\n});\nconst spice2 = new Spice({\n ...,\n duration: 2000\n});\nconst recipe = new Recipe().add(spice1, spice2)\n .start();\nrecipe.frame(performance.now() + 1800);\n */\n frame(time) {\n if (!this.spices.length) {\n return;\n }\n time ??= performance.now();\n let elapsed = this.elapse(time);\n // Don't render if the elapsed time has not changed\n if (this.elapsed === elapsed) {\n return;\n }\n this.elapsed = elapsed;\n for (let i = 0; i < this.spices.length; i++) {\n this.spices[i].frame(time);\n }\n if (elapsed === 1) {\n this.onEnd(this);\n }\n }\n /**\n * Disposes the spices in the recipe and removes its callback functions, making the instance eligible\n * for the garbage collector.\n * @since 1.0.0\n */\n dispose() {\n for (let i = this.spices.length - 1; i !== -1; i--) {\n this.spices[i].dispose();\n }\n this.spices.length = 0;\n this.onEnd = null;\n }\n}\n", "import { Seed } from './seed.js';\n\nconst defaults = {\n duration: 0,\n delay: 0,\n from: {},\n to: {},\n easing: (t) => t, // Linear.None\n render: () => { },\n onEnd: () => { }\n};\n\n/**\n * A Spice is an animatable object which properties can be interpolated from its starting\n * value(s) to its end value(s), using an easing function.\n * @example\nimport { Spice } from 'paprika-tween';\nimport { Cubic } from 'paprika-tween/easing';\nconst spice = new Spice({\n duration: 45,\n delay: 2,\n easing: Cubic.InOut,\n from: { size: 10 },\n to: { size: 520 },\n render: ({ size }) => {\n console.log(size);\n },\n onEnd: ({ size }) => console.log(props)\n});\nspice.start(0);\nspice.frame(15);\n * @since 1.0.0\n */\nexport class Spice extends Seed {\n /**\n * Creates a new Spice instance with the given options.\n * @param {Object} options\n * @param {number} options.duration - The duration of the interpolation. The time scale should be the same as the\n * starting time and the [frame()]{@linkcode Spice#frame} time.\n * @param {number} [options.delay] - The delay time to start the interpolation.\n * @param {Object} options.from - An object with key/value pairs of numeric properties to interpolate from.\n * @param {Object} options.to - An object with the numeric properties to interpolate to.\n * @param {function} [options.easing] - The easing function with which calculate the value of the property at a given time.\n * You can use your custom function or a function available at [paprika-tween/easing]{@link module:paprika-tween/easing}.\n * Default is Linear.None (no easing).\n * @param {function} options.render - A callback function that will be called after each [render]{@linkcode Spice#frame}.\n * It receives three arguments: the first being an object with the properties interpolated for the given time,\n * the second the amount of interpolation applied from 0 to 1,\n * and the third the instance of the current Spice.\n * @param {function} [options.onEnd] - Function called when the interpolation reaches the end. It receive an argument as\n * an object with the properties interpolated to its end values.\n * @since 1.0.0\n */\n constructor(options) {\n super();\n Object.assign(this, defaults, options);\n }\n /**\n * Sets the starting time of the interpolation at the given time argument.
\n * If time is not provided, the timestamp from\n * [performance.now()]{@link https://developer.mozilla.org/en-US/docs/Web/API/Performance/now}\n * will be used instead.\n * @param {(DOMHighResTimeStamp|number)} [time] - The initial number from where to start the animation.\n * @since 1.0.0\n * @example\nimport { Spice } from 'paprika-tween';\nconst spice = new Spice({ ... });\nspice.start(5);\n */\n start(time) {\n this._startTime = time ?? performance.now();\n this._startTime += this.delay;\n this._interpolated = Object.assign(Object.create(null), this.to);\n }\n /**\n * Moves the interpolation of the properties of the spice by the given time, which is\n * relative to the starting time.
\n * If time is not provided, the timestamp from\n * [performance.now()]{@link https://developer.mozilla.org/en-US/docs/Web/API/Performance/now}\n * will be used instead.\n * @param {(DOMHighResTimeStamp|number)} [time] - The amount of time to interpolate since the animations started.\n * @since 1.0.0\n * @example\nimport { Spice } from 'paprika-tween';\nconst spice = new Spice({\n duration: 10,\n from: { width: 100 },\n to: { width: 550 },\n render: (props) => { ... }\n});\nspice.start(0);\nspice.frame(2);\n */\n frame(time) {\n time ??= performance.now();\n let elapsed = this.elapse(time);\n // Don't render if the elapsed time has not changed\n if (this.elapsed === elapsed) {\n return;\n }\n this.elapsed = elapsed;\n const value = this.easing(elapsed);\n let start,\n end,\n key;\n for (key in this._interpolated) {\n start = this.from[key] ?? 0;\n end = this.to[key];\n this._interpolated[key] = start + (end - start) * value;\n }\n this.render(this._interpolated, value, this);\n if (elapsed === 1) {\n this.onEnd(this._interpolated, this);\n }\n }\n /**\n * Removes the interpolatable properties of the instance and its callback functions, making the instance eligible\n * for the garbage collector.\n * @since 1.0.0\n */\n dispose() {\n this.from = null;\n this.to = null;\n this.render = null;\n this.onEnd = null;\n }\n /**\n * Modifies the properties of the spice with the given object.\n * @param {Object} options - See [Spice constructor]{@linkcode Spice} for the available properties of the options object.\n * @returns {Spice}\n * @since 1.0.0\n */\n update(options) {\n Object.assign(this, options);\n return this;\n }\n}\n", "/**\n * The Mortar class will call the callback function at the given [frame rate]{@link https://en.wikipedia.org/wiki/Frame_rate}\n * defined by the fps argument (frames per second or times per second).\n *
\n * Mortar can be used to perform an animation through a {@link Mixer}, {@link Spice} or {@link Recipe} by calling its\n * frame() method as the callback function. The interpolations will be updated before the next repaint.\n *

\n * It tries to honors the given fps value, so consecutive calls to the callback function will run at the same\n * speed regardless on the performance of the device or the refresh rate of the screen. However, to ensure a consistent animation,\n * be sure to use the delta argument passed to the callback function to calculate how much the animation\n * will progress in a frame.\n * @example\nimport { Mixer, Spice, Mortar } from 'paprika-tween';\nconst spice = new Spice({\n duration: 5000,\n from: { scale: 1 },\n to: { scale: 2.5 },\n render: (props, interpolation) => { ... }\n});\nconst mixer = new Mixer();\nmixer.add(spice)\n .start();\nconst mortar = new Mortar((time) => mixer.frame(time));\nmortar.start();\n * @since 1.0.0\n */\nexport class Mortar {\n /**\n * Creates a new instance of the Mortar object.\n * @param {function} [cb] - The function to be called at the given frame rate. It receives two arguments: the time since it started,\n * and the elapsed time since the previous frame (or delta time).\n * @param {Number} [fps=60] - The integer number of times to call the callback function per second (frames per second).\n * Number must be an integer.\n * @since 1.0.0\n */\n constructor(cb, fps = 60) {\n this._cb = cb;\n this._fpsInterval = 1000 / fps;\n this._running = false;\n }\n /**\n * Starts the frame-by-frame loop by internally calling to [requestAnimationFrame()]{@link https://developer.mozilla.org/en/docs/Web/API/Window/requestAnimationFrame}.\n * The callback function will be called the fps number of times per second.\n * @since 1.0.0\n */\n start() {\n this._startTime = performance.now();\n this._previousTime = this._startTime;\n this._previousDeltaTime = this._startTime;\n this._pausedTime = 0;\n this._running = true;\n // Wrapper to keep the scope (faster than .bind()?)\n this._onFrame = (currentTime) => this.frame(currentTime);\n this.frame(this._startTime);\n }\n /**\n * Pauses the frame-by-frame loop.\n * @since 1.0.0\n */\n pause() {\n this._running = false;\n this._previousPauseTime = performance.now();\n }\n /**\n * Resumes the frame-by-frame loop.\n * @since 1.0.0\n */\n resume() {\n const now = performance.now();\n this._pausedTime += now - this._previousPauseTime;\n this._running = true;\n this.frame(now);\n }\n /**\n * Stops the frame-by-frame loop and removes the callback function. Further calls to {@linkcode Mortar#start} will fail.\n * @since 1.0.0\n */\n stop() {\n this.pause();\n this._cb = null;\n this._onFrame = null;\n }\n /**\n * The frame() method is called before the browser performs the next repaint, then it calls the callback function.\n * Mortar will ensure that the callback function is called no more than fps number of times per second.\n *
\n * To keep the same speed in your animation, Be sure to use the delta argument to calculate how much the\n * animation will progress in a frame.\n * @since 1.0.0\n * @example\nimport { Mortar } from 'paprika-tween';\nfunction loop(time, delta) {\n character.left += character.speed * delta;\n}\nconst mortar = new Mortar(loop, 10);\nmortar.start();\n */\n frame(currentTime) {\n if (!this._running) {\n return;\n }\n currentTime -= this._pausedTime;\n // Calculate elapsed time since last loop\n let delta = currentTime - this._previousDeltaTime;\n // If enough time has elapsed, draw the next frame\n if (delta >= this._fpsInterval) {\n // Adjust next execution time in case this frame took longer to execute\n this._previousDeltaTime = currentTime - (delta % this._fpsInterval);\n this._cb(currentTime, currentTime - this._previousTime);\n this._previousTime = currentTime;\n }\n if (this._onFrame) {\n requestAnimationFrame(this._onFrame);\n }\n }\n /**\n * Returns whether the instance is running or not.\n * @type {Boolean}\n */\n get running() {\n return this._running;\n }\n /**\n * Returns the time since the Mortar started.\n * @type {DOMHighResTimeStamp}\n */\n get time() {\n return this._previousTime;\n }\n}\n", "import { Spice, Mortar } from './index.js';\n\n/**\n * A Sweetie is a {@link Spice} which can be animated by itself. It is created when calling the method [sweet()]{@linkcode module:paprika-tween/sweet}.\n * @example\nimport { sweet } from 'paprika-tween';\nconst { sweetie, spice } = await sweet({\n duration: 2000,\n from: { width: 100 },\n to: { width: 200 }\n render: (props, interpolation) => { ... }\n});\nspice.pause();\nspice.resume();\nawait sweetie({\n to: { width: 0 }\n});\nspice.dispose();\n * @since 1.0.0\n */\nclass Sweetie extends Spice {\n constructor(options) {\n super(options);\n this._mortar = new Mortar((time) => this.frame(time));\n }\n\n start() {\n this._mortar.start();\n super.start(this._mortar.time);\n }\n /**\n * Pauses the animation.\n * @since 1.0.0\n */\n pause() {\n this._mortar.pause();\n }\n /**\n * Resumes the animation.\n * @since 1.0.0\n */\n resume() {\n this._mortar.resume();\n }\n /**\n * Stops the animation, removes its interpolatable properties and its callback functions.\n * @since 1.0.0\n */\n dispose() {\n super.dispose();\n this._mortar.stop();\n this._mortar = null;\n }\n\n async run(options) {\n return new Promise((resolve) => {\n this.onEnd = function () {\n this.pause();\n resolve({\n sweetie: this.run.bind(this),\n spice: this\n });\n };\n if (options) {\n this.from = this.to;\n this.update(options);\n }\n this.start();\n });\n }\n /**\n * Returns whether the instance is running or not.\n * @type {Boolean}\n */\n get running() {\n return this._mortar.running;\n }\n /**\n * @method frame\n * @private\n */\n}\n/**\n * The function sweet() creates a tween animation that will run for the given duration, interpolating the\n * given properties from start to end by using an easing function.
\n * sweet() returns a [thenable object]{@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise#thenables}\n * which can be chained with the method [then()]{@linkcode https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then}\n * or awaited with the keyword [await]{@linkcode https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await}\n * to create animations.\n * @param {Object} options\n * @param {number} options.duration - The duration of the interpolation. The time scale should be the same as the\n * starting time and the [frame()]{@linkcode Spice#frame} time.\n * @param {number} [options.delay] - The delay time to start the interpolation.\n * @param {Object} options.from - An object with key/value pairs of numeric properties to interpolate from.\n * @param {Object} options.to - An object with the numeric properties to interpolate to.\n * @param {function} [options.easing] - The easing function with which calculate the value of the property at a given time.\n * You can use your custom function or a function available at [paprika-tween/easing]{@link module:paprika-tween/easing}.\n * Default is Linear.None.\n * @param {function} options.render - A callback function that will be called after each [render]{@linkcode Spice#frame}.\n * It receives two arguments: the first being the amount of interpolation applied from 0 to 1,\n * and the second an object with the properties interpolated for the given time.\n * @param {function} [options.onEnd] - Function called when the interpolation reaches the end. It receive an argument as\n * an object with the properties interpolated to its end values.\n * @returns {Promise} - A Promise that is resolved with two arguments: a sweetie() function to continue with\n * animation, and the {@link Sweetie} instance which properties are interpolated.\n * @module paprika-tween/sweet\n * @function\n * @example\nimport { sweet } from 'paprika-tween';\nconst { sweetie, spice } = await sweet({\n duration: 500,\n from: { size: 0 },\n to: { size: 10 }\n render: ({ size }) => {\n obj.style.borderWidth = `${size}px`;\n }\n});\nawait sweetie({\n duration: 1000,\n to: { size: 20 }\n});\nawait sweetie({\n to: { size: 1 }\n});\nawait sweetie({\n delay: 50,\n to: { size: 100 }\n});\n * @since 1.0.0\n */\nexport function sweet(options) {\n return new Sweetie(options).run();\n}\n"], + "mappings": "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", + "names": ["defaults"] +} diff --git a/dist/paprika-tween.min.js b/dist/paprika-tween.min.js new file mode 100644 index 0000000..b5edef4 --- /dev/null +++ b/dist/paprika-tween.min.js @@ -0,0 +1,2 @@ +/*! For license information please see https://github.com/raohmaru/paprika-tween/blob/master/LICENSE */ +var p=class{constructor(){this.spices=[]}add(...s){for(let t=0;t1&&(t=1),t}};var d={onEnd:()=>{}},l=class extends n{constructor(s){super(),Object.assign(this,d,s),this.spices=[]}add(...s){for(let t=0;ti,render:()=>{},onEnd:()=>{}},h=class extends n{constructor(s){super(),Object.assign(this,f,s)}start(s){this._startTime=s??performance.now(),this._startTime+=this.delay,this._interpolated=Object.assign(Object.create(null),this.to)}frame(s){s??(s=performance.now());let t=this.elapse(s);if(this.elapsed===t)return;this.elapsed=t;let e=this.easing(t),r,m,a;for(a in this._interpolated)r=this.from[a]??0,m=this.to[a],this._interpolated[a]=r+(m-r)*e;this.render(this._interpolated,e,this),t===1&&this.onEnd(this._interpolated,this)}dispose(){this.from=null,this.to=null,this.render=null,this.onEnd=null}update(s){return Object.assign(this,s),this}};var o=class{constructor(s,t=60){this._cb=s,this._fpsInterval=1e3/t,this._running=!1}start(){this._startTime=performance.now(),this._previousTime=this._startTime,this._previousDeltaTime=this._startTime,this._pausedTime=0,this._running=!0,this._onFrame=s=>this.frame(s),this.frame(this._startTime)}pause(){this._running=!1,this._previousPauseTime=performance.now()}resume(){let s=performance.now();this._pausedTime+=s-this._previousPauseTime,this._running=!0,this.frame(s)}stop(){this.pause(),this._cb=null,this._onFrame=null}frame(s){if(!this._running)return;s-=this._pausedTime;let t=s-this._previousDeltaTime;t>=this._fpsInterval&&(this._previousDeltaTime=s-t%this._fpsInterval,this._cb(s,s-this._previousTime),this._previousTime=s),this._onFrame&&requestAnimationFrame(this._onFrame)}get running(){return this._running}get time(){return this._previousTime}};var u=class extends h{constructor(s){super(s),this._mortar=new o(t=>this.frame(t))}start(){this._mortar.start(),super.start(this._mortar.time)}pause(){this._mortar.pause()}resume(){this._mortar.resume()}dispose(){super.dispose(),this._mortar.stop(),this._mortar=null}async run(s){return new Promise(t=>{this.onEnd=function(){this.pause(),t({sweetie:this.run.bind(this),spice:this})},s&&(this.from=this.to,this.update(s)),this.start()})}get running(){return this._mortar.running}};function c(i){return new u(i).run()}export{p as Mixer,o as Mortar,l as Recipe,h as Spice,c as sweet}; diff --git a/package.json b/package.json index 678f6e7..f22fe50 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "paprika-tween", - "version": "1.0.0", + "version": "1.0.1", "description": "Spicy JavaScript animation engine", "browser": "./dist/paprika-tween.min.js", "main": "./dist/paprika-tween.min.js",