diff --git a/README.md b/README.md index 41f1a56..e67ce42 100644 --- a/README.md +++ b/README.md @@ -30,7 +30,7 @@ When using a module bundler you can import the transition function and optionall ```javascript import { transition, easeInOut } from 'plain-transition'; -transition({ +const myTransition = transition({ easing: easeInOut, // ...options }); @@ -39,7 +39,7 @@ transition({ When using the `plain-transition.min.js` bundle, all functions get bundled in the global `plainTransition` object: ```javascript -plainTransition.transition({ +var myTransition = plainTransition.transition({ easing: plainTransition.easeInOut, // ...options }); @@ -53,6 +53,7 @@ transition({ to: 100, duration: 1000, easing: easeIn, + autostart: true, onChange: value => { }, @@ -80,12 +81,23 @@ Built-in functions: * easeOut * easeInOut +**`autostart`** boolean *(default: true)* +Wheather this transition should start immediately or when transition.start() gets called. + **`onChange`** function This function gets called everytime the value updates. The first argument will be the current value. **`onDone`** function This function gets called once, when the transition is finished and in its final value. +## API + +**`myTransition.start()`** +This starts the transition. This is only relevant when `autostart: false` is set in the options. + +**`myTransition.cancel()`** +This stops the transition immediately. once it's canceled, it can't be started again. + ## Browser support | Chrome | Safari | IE / Edge | Firefox | Opera | diff --git a/dist/transition.es.js b/dist/transition.es.js index 5d6c740..ff35ea5 100644 --- a/dist/transition.es.js +++ b/dist/transition.es.js @@ -10,11 +10,30 @@ function easeInOut(t) { return -Math.cos(t * Math.PI) * 0.5 + 0.5; } +var transitions = []; + +function animate(time) { + transitions.forEach(function (t, i) { + t._frame(time); + }); + + requestAnimationFrame(animate); +} + +requestAnimationFrame(animate); + function transition(_options) { + var _this = this; + + if (!(this instanceof transition)) { + return new transition(_options); + } + var options = { from: 0, to: 100, duration: 1000, + autostart: true, easing: function easing(v) { return v; }, @@ -27,8 +46,23 @@ function transition(_options) { } var start = 0; + var started = options.autostart; - var frame = function frame(time) { + // Gets called at the end of the transition or manually by the user + this.cancel = function () { + // remove this transition from queue + transitions.splice(transitions.indexOf(this), 1); + }; + + this.start = function () { + started = true; + }; + + this._frame = function (time) { + // Don't do anything until this transition has started + if (started !== true) { + return; + } // Set the inital timestamp if (start <= 0) { @@ -42,19 +76,19 @@ function transition(_options) { if (progress < options.duration) { // Call the onChange event options.onChange(options.easing(Math.min(progress / options.duration, 1)) * (options.to - options.from) + options.from); - - requestAnimationFrame(frame); } else { // Call the onChange the last time and ensure the last value emitted is the final value options.onChange(options.to); // Call the onDone event to finish this off options.onDone(); + + // Ensure nothing happens anymore + _this.cancel(); } }; - // Start the transition - requestAnimationFrame(frame); + transitions.push(this); } export { transition, easeIn, easeOut, easeInOut }; diff --git a/dist/transition.min.js b/dist/transition.min.js index bce9dd7..228a8e3 100644 --- a/dist/transition.min.js +++ b/dist/transition.min.js @@ -1 +1 @@ -!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(n.plainTransition={})}(this,function(n){"use strict";n.transition=function(n){var t={from:0,to:100,duration:1e3,easing:function(n){return n},onChange:function(){},onDone:function(){}};for(var e in n)t[e]=n[e];var o=0;requestAnimationFrame(function n(e){o<=0&&(o=e);var i=e-o;i=0.10.0' - resolution: - integrity: sha1-w7M6te42DYbg5ijwRorn7yfWVN8= - /ansi-styles/2.2.1: - dev: true - engines: - node: '>=0.10.0' - resolution: - integrity: sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4= - /babel-code-frame/6.26.0: - dependencies: - chalk: 1.1.3 - esutils: 2.0.2 - js-tokens: 3.0.2 - dev: true - resolution: - integrity: sha1-Y/1D99weO7fONZR9uP42mj9Yx0s= - /babel-core/6.26.0: - dependencies: - babel-code-frame: 6.26.0 - babel-generator: 6.26.1 - babel-helpers: 6.24.1 - babel-messages: 6.23.0 - babel-register: 6.26.0 - babel-runtime: 6.26.0 - babel-template: 6.26.0 - babel-traverse: 6.26.0 - babel-types: 6.26.0 - babylon: 6.18.0 - convert-source-map: 1.5.1 - debug: 2.6.9 - json5: 0.5.1 - lodash: 4.17.5 - minimatch: 3.0.4 - path-is-absolute: 1.0.1 - private: 0.1.8 - slash: 1.0.0 - source-map: 0.5.7 - dev: true - resolution: - integrity: sha1-rzL3izGm/O8RnIew/Y2XU/A6C7g= - /babel-generator/6.26.1: - dependencies: - babel-messages: 6.23.0 - babel-runtime: 6.26.0 - babel-types: 6.26.0 - detect-indent: 4.0.0 - jsesc: 1.3.0 - lodash: 4.17.5 - source-map: 0.5.7 - trim-right: 1.0.1 - dev: true - resolution: - integrity: sha512-HyfwY6ApZj7BYTcJURpM5tznulaBvyio7/0d4zFOeMPUmfxkCjHocCuoLa2SAGzBI8AREcH3eP3758F672DppA== - /babel-helper-call-delegate/6.24.1: - dependencies: - babel-helper-hoist-variables: 6.24.1 - babel-runtime: 6.26.0 - babel-traverse: 6.26.0 - babel-types: 6.26.0 - dev: true - resolution: - integrity: sha1-7Oaqzdx25Bw0YfiL/Fdb0Nqi340= - /babel-helper-define-map/6.26.0: - dependencies: - babel-helper-function-name: 6.24.1 - babel-runtime: 6.26.0 - babel-types: 6.26.0 - lodash: 4.17.5 - dev: true - resolution: - integrity: sha1-pfVtq0GiX5fstJjH66ypgZ+Vvl8= - /babel-helper-function-name/6.24.1: - dependencies: - babel-helper-get-function-arity: 6.24.1 - babel-runtime: 6.26.0 - babel-template: 6.26.0 - babel-traverse: 6.26.0 - babel-types: 6.26.0 - dev: true - resolution: - integrity: sha1-00dbjAPtmCQqJbSDUasYOZ01gKk= - /babel-helper-get-function-arity/6.24.1: - dependencies: - babel-runtime: 6.26.0 - babel-types: 6.26.0 - dev: true - resolution: - integrity: sha1-j3eCqpNAfEHTqlCQj4mwMbG2hT0= - /babel-helper-hoist-variables/6.24.1: - dependencies: - babel-runtime: 6.26.0 - babel-types: 6.26.0 - dev: true - resolution: - integrity: sha1-HssnaJydJVE+rbyZFKc/VAi+enY= - /babel-helper-optimise-call-expression/6.24.1: - dependencies: - babel-runtime: 6.26.0 - babel-types: 6.26.0 - dev: true - resolution: - integrity: sha1-96E0J7qfc/j0+pk8VKl4gtEkQlc= - /babel-helper-regex/6.26.0: - dependencies: - babel-runtime: 6.26.0 - babel-types: 6.26.0 - lodash: 4.17.5 - dev: true - resolution: - integrity: sha1-MlxZ+QL4LyS3T6zu0DY5VPZJXnI= - /babel-helper-replace-supers/6.24.1: - dependencies: - babel-helper-optimise-call-expression: 6.24.1 - babel-messages: 6.23.0 - babel-runtime: 6.26.0 - babel-template: 6.26.0 - babel-traverse: 6.26.0 - babel-types: 6.26.0 - dev: true - resolution: - integrity: sha1-v22/5Dk40XNpohPKiov3S2qQqxo= - /babel-helpers/6.24.1: - dependencies: - babel-runtime: 6.26.0 - babel-template: 6.26.0 - dev: true - resolution: - integrity: sha1-NHHenK7DiOXIUOWX5Yom3fN2ArI= - /babel-messages/6.23.0: - dependencies: - babel-runtime: 6.26.0 - dev: true - resolution: - integrity: sha1-8830cDhYA1sqKVHG7F7fbGLyYw4= - /babel-plugin-check-es2015-constants/6.22.0: - dependencies: - babel-runtime: 6.26.0 - dev: true - resolution: - integrity: sha1-NRV7EBQm/S/9PaP3XH0ekYNbv4o= - /babel-plugin-transform-es2015-arrow-functions/6.22.0: - dependencies: - babel-runtime: 6.26.0 - dev: true - resolution: - integrity: sha1-RSaSy3EdX3ncf4XkQM5BufJE0iE= - /babel-plugin-transform-es2015-block-scoped-functions/6.22.0: - dependencies: - babel-runtime: 6.26.0 - dev: true - resolution: - integrity: sha1-u8UbSflk1wy42OC5ToICRs46YUE= - /babel-plugin-transform-es2015-block-scoping/6.26.0: - dependencies: - babel-runtime: 6.26.0 - babel-template: 6.26.0 - babel-traverse: 6.26.0 - babel-types: 6.26.0 - lodash: 4.17.5 - dev: true - resolution: - integrity: sha1-1w9SmcEwjQXBL0Y4E7CgnnOxiV8= - /babel-plugin-transform-es2015-classes/6.24.1: - dependencies: - babel-helper-define-map: 6.26.0 - babel-helper-function-name: 6.24.1 - babel-helper-optimise-call-expression: 6.24.1 - babel-helper-replace-supers: 6.24.1 - babel-messages: 6.23.0 - babel-runtime: 6.26.0 - babel-template: 6.26.0 - babel-traverse: 6.26.0 - babel-types: 6.26.0 - dev: true - resolution: - integrity: sha1-WkxYpQyclGHlZLSyo7+ryXolhNs= - /babel-plugin-transform-es2015-computed-properties/6.24.1: - dependencies: - babel-runtime: 6.26.0 - babel-template: 6.26.0 - dev: true - resolution: - integrity: sha1-b+Ko0WiV1WNPTNmZttNICjCBWbM= - /babel-plugin-transform-es2015-destructuring/6.23.0: - dependencies: - babel-runtime: 6.26.0 - dev: true - resolution: - integrity: sha1-mXux8auWf2gtKwh2/jWNYOdlxW0= - /babel-plugin-transform-es2015-duplicate-keys/6.24.1: - dependencies: - babel-runtime: 6.26.0 - babel-types: 6.26.0 - dev: true - resolution: - integrity: sha1-c+s9MQypaePvnskcU3QabxV2Qj4= - /babel-plugin-transform-es2015-for-of/6.23.0: - dependencies: - babel-runtime: 6.26.0 - dev: true - resolution: - integrity: sha1-9HyVsrYT3x0+zC/bdXNiPHUkhpE= - /babel-plugin-transform-es2015-function-name/6.24.1: - dependencies: - babel-helper-function-name: 6.24.1 - babel-runtime: 6.26.0 - babel-types: 6.26.0 - dev: true - resolution: - integrity: sha1-g0yJhTvDaxrw86TF26qU/Y6sqos= - /babel-plugin-transform-es2015-literals/6.22.0: - dependencies: - babel-runtime: 6.26.0 - dev: true - resolution: - integrity: sha1-T1SgLWzWbPkVKAAZox0xklN3yi4= - /babel-plugin-transform-es2015-modules-amd/6.24.1: - dependencies: - babel-plugin-transform-es2015-modules-commonjs: 6.26.0 - babel-runtime: 6.26.0 - babel-template: 6.26.0 - dev: true - resolution: - integrity: sha1-Oz5UAXI5hC1tGcMBHEvS8AoA0VQ= - /babel-plugin-transform-es2015-modules-commonjs/6.26.0: - dependencies: - babel-plugin-transform-strict-mode: 6.24.1 - babel-runtime: 6.26.0 - babel-template: 6.26.0 - babel-types: 6.26.0 - dev: true - resolution: - integrity: sha1-DYOUApt9xqvhqX7xgeAHWN0uXYo= - /babel-plugin-transform-es2015-modules-systemjs/6.24.1: - dependencies: - babel-helper-hoist-variables: 6.24.1 - babel-runtime: 6.26.0 - babel-template: 6.26.0 - dev: true - resolution: - integrity: sha1-/4mhQrkRmpBhlfXxBuzzBdlAfSM= - /babel-plugin-transform-es2015-modules-umd/6.24.1: - dependencies: - babel-plugin-transform-es2015-modules-amd: 6.24.1 - babel-runtime: 6.26.0 - babel-template: 6.26.0 - dev: true - resolution: - integrity: sha1-rJl+YoXNGO1hdq22B9YCNErThGg= - /babel-plugin-transform-es2015-object-super/6.24.1: - dependencies: - babel-helper-replace-supers: 6.24.1 - babel-runtime: 6.26.0 - dev: true - resolution: - integrity: sha1-JM72muIcuDp/hgPa0CH1cusnj40= - /babel-plugin-transform-es2015-parameters/6.24.1: - dependencies: - babel-helper-call-delegate: 6.24.1 - babel-helper-get-function-arity: 6.24.1 - babel-runtime: 6.26.0 - babel-template: 6.26.0 - babel-traverse: 6.26.0 - babel-types: 6.26.0 - dev: true - resolution: - integrity: sha1-V6w1GrScrxSpfNE7CfZv3wpiXys= - /babel-plugin-transform-es2015-shorthand-properties/6.24.1: - dependencies: - babel-runtime: 6.26.0 - babel-types: 6.26.0 - dev: true - resolution: - integrity: sha1-JPh11nIch2YbvZmkYi5R8U3jiqA= - /babel-plugin-transform-es2015-spread/6.22.0: - dependencies: - babel-runtime: 6.26.0 - dev: true - resolution: - integrity: sha1-1taKmfia7cRTbIGlQujdnxdG+NE= - /babel-plugin-transform-es2015-sticky-regex/6.24.1: - dependencies: - babel-helper-regex: 6.26.0 - babel-runtime: 6.26.0 - babel-types: 6.26.0 - dev: true - resolution: - integrity: sha1-AMHNsaynERLN8M9hJsLta0V8zbw= - /babel-plugin-transform-es2015-template-literals/6.22.0: - dependencies: - babel-runtime: 6.26.0 - dev: true - resolution: - integrity: sha1-qEs0UPfp+PH2g51taH2oS7EjbY0= - /babel-plugin-transform-es2015-typeof-symbol/6.23.0: - dependencies: - babel-runtime: 6.26.0 - dev: true - resolution: - integrity: sha1-3sCfHN3/lLUqxz1QXITfWdzOs3I= - /babel-plugin-transform-es2015-unicode-regex/6.24.1: - dependencies: - babel-helper-regex: 6.26.0 - babel-runtime: 6.26.0 - regexpu-core: 2.0.0 - dev: true - resolution: - integrity: sha1-04sS9C6nMj9yk4fxinxa4frrNek= - /babel-plugin-transform-regenerator/6.26.0: - dependencies: - regenerator-transform: 0.10.1 - dev: true - resolution: - integrity: sha1-4HA2lvveJ/Cj78rPi03KL3s6jy8= - /babel-plugin-transform-strict-mode/6.24.1: - dependencies: - babel-runtime: 6.26.0 - babel-types: 6.26.0 - dev: true - resolution: - integrity: sha1-1fr3qleKZbvlkc9e2uBKDGcCB1g= - /babel-preset-es2015/6.24.1: - dependencies: - babel-plugin-check-es2015-constants: 6.22.0 - babel-plugin-transform-es2015-arrow-functions: 6.22.0 - babel-plugin-transform-es2015-block-scoped-functions: 6.22.0 - babel-plugin-transform-es2015-block-scoping: 6.26.0 - babel-plugin-transform-es2015-classes: 6.24.1 - babel-plugin-transform-es2015-computed-properties: 6.24.1 - babel-plugin-transform-es2015-destructuring: 6.23.0 - babel-plugin-transform-es2015-duplicate-keys: 6.24.1 - babel-plugin-transform-es2015-for-of: 6.23.0 - babel-plugin-transform-es2015-function-name: 6.24.1 - babel-plugin-transform-es2015-literals: 6.22.0 - babel-plugin-transform-es2015-modules-amd: 6.24.1 - babel-plugin-transform-es2015-modules-commonjs: 6.26.0 - babel-plugin-transform-es2015-modules-systemjs: 6.24.1 - babel-plugin-transform-es2015-modules-umd: 6.24.1 - babel-plugin-transform-es2015-object-super: 6.24.1 - babel-plugin-transform-es2015-parameters: 6.24.1 - babel-plugin-transform-es2015-shorthand-properties: 6.24.1 - babel-plugin-transform-es2015-spread: 6.22.0 - babel-plugin-transform-es2015-sticky-regex: 6.24.1 - babel-plugin-transform-es2015-template-literals: 6.22.0 - babel-plugin-transform-es2015-typeof-symbol: 6.23.0 - babel-plugin-transform-es2015-unicode-regex: 6.24.1 - babel-plugin-transform-regenerator: 6.26.0 - deprecated: "\U0001F64C Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update! " - dev: true - resolution: - integrity: sha1-1EBQ1rwsn+6nAqrzjXJ6AhBTiTk= - /babel-register/6.26.0: - dependencies: - babel-core: 6.26.0 - babel-runtime: 6.26.0 - core-js: 2.5.5 - home-or-tmp: 2.0.0 - lodash: 4.17.5 - mkdirp: 0.5.1 - source-map-support: 0.4.18 - dev: true - resolution: - integrity: sha1-btAhFz4vy0htestFxgCahW9kcHE= - /babel-runtime/6.26.0: - dependencies: - core-js: 2.5.5 - regenerator-runtime: 0.11.1 - dev: true - resolution: - integrity: sha1-llxwWGaOgrVde/4E/yM3vItWR/4= - /babel-template/6.26.0: - dependencies: - babel-runtime: 6.26.0 - babel-traverse: 6.26.0 - babel-types: 6.26.0 - babylon: 6.18.0 - lodash: 4.17.5 - dev: true - resolution: - integrity: sha1-3gPi0WOWsGn0bdn/+FIfsaDjXgI= - /babel-traverse/6.26.0: - dependencies: - babel-code-frame: 6.26.0 - babel-messages: 6.23.0 - babel-runtime: 6.26.0 - babel-types: 6.26.0 - babylon: 6.18.0 - debug: 2.6.9 - globals: 9.18.0 - invariant: 2.2.4 - lodash: 4.17.5 - dev: true - resolution: - integrity: sha1-RqnL1+3MYsjlwGTi0tjQ9ANXZu4= - /babel-types/6.26.0: - dependencies: - babel-runtime: 6.26.0 - esutils: 2.0.2 - lodash: 4.17.5 - to-fast-properties: 1.0.3 - dev: true - resolution: - integrity: sha1-o7Bz+Uq0nrb6Vc1lInozQ4BjJJc= - /babylon/6.18.0: - dev: true - resolution: - integrity: sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ== - /balanced-match/1.0.0: - dev: true - resolution: - integrity: sha1-ibTRmasr7kneFk6gK4nORi1xt2c= - /brace-expansion/1.1.11: - dependencies: - balanced-match: 1.0.0 - concat-map: 0.0.1 - dev: true - resolution: - integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA== - /chalk/1.1.3: - dependencies: - ansi-styles: 2.2.1 - escape-string-regexp: 1.0.5 - has-ansi: 2.0.0 - strip-ansi: 3.0.1 - supports-color: 2.0.0 - dev: true - engines: - node: '>=0.10.0' - resolution: - integrity: sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg= - /commander/2.13.0: - dev: true - resolution: - integrity: sha512-MVuS359B+YzaWqjCL/c+22gfryv+mCBPHAv3zyVI2GN8EY6IRP8VwtasXn8jyyhvvq84R4ImN1OKRtcbIasjYA== - /concat-map/0.0.1: - dev: true - resolution: - integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s= - /convert-source-map/1.5.1: - dev: true - resolution: - integrity: sha1-uCeAl7m8IpNl3lxiz1/K7YtVmeU= - /core-js/2.5.5: - dev: true - resolution: - integrity: sha1-sU3ek2xkDAV5prUMq8wTLdYSfjs= - /debug/2.6.9: - dependencies: - ms: 2.0.0 - dev: true - resolution: - integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA== - /detect-indent/4.0.0: - dependencies: - repeating: 2.0.1 - dev: true - engines: - node: '>=0.10.0' - resolution: - integrity: sha1-920GQ1LN9Docts5hnE7jqUdd4gg= - /escape-string-regexp/1.0.5: - dev: true - engines: - node: '>=0.8.0' - resolution: - integrity: sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ= - /estree-walker/0.2.1: - dev: true - resolution: - integrity: sha1-va/oCVOD2EFNXcLs9MkXO225QS4= - /esutils/2.0.2: - dev: true - engines: - node: '>=0.10.0' - resolution: - integrity: sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs= - /globals/9.18.0: - dev: true - engines: - node: '>=0.10.0' - resolution: - integrity: sha512-S0nG3CLEQiY/ILxqtztTWH/3iRRdyBLw6KMDxnKMchrtbj2OFmehVh0WUCfW3DUrIgx/qFrJPICrq4Z4sTR9UQ== - /has-ansi/2.0.0: - dependencies: - ansi-regex: 2.1.1 - dev: true - engines: - node: '>=0.10.0' - resolution: - integrity: sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE= - /home-or-tmp/2.0.0: - dependencies: - os-homedir: 1.0.2 - os-tmpdir: 1.0.2 - dev: true - engines: - node: '>=0.10.0' - resolution: - integrity: sha1-42w/LSyufXRqhX440Y1fMqeILbg= - /invariant/2.2.4: - dependencies: - loose-envify: 1.3.1 - dev: true - resolution: - integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA== - /is-finite/1.0.2: - dependencies: - number-is-nan: 1.0.1 - dev: true - engines: - node: '>=0.10.0' - resolution: - integrity: sha1-zGZ3aVYCvlUO8R6LSqYwU0K20Ko= - /js-tokens/3.0.2: - dev: true - resolution: - integrity: sha1-mGbfOVECEw449/mWvOtlRDIJwls= - /jsesc/0.5.0: - dev: true - resolution: - integrity: sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0= - /jsesc/1.3.0: - dev: true - resolution: - integrity: sha1-RsP+yMGJKxKwgz25vHYiF226s0s= - /json5/0.5.1: - dev: true - resolution: - integrity: sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE= - /lodash/4.17.5: - dev: true - resolution: - integrity: sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw== - /loose-envify/1.3.1: - dependencies: - js-tokens: 3.0.2 - dev: true - resolution: - integrity: sha1-0aitM/qc4OcT1l/dCsi3SNR4yEg= - /minimatch/3.0.4: - dependencies: - brace-expansion: 1.1.11 - dev: true - resolution: - integrity: sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA== - /minimist/0.0.8: - dev: true - resolution: - integrity: sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0= - /mkdirp/0.5.1: - dependencies: - minimist: 0.0.8 - dev: true - resolution: - integrity: sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM= - /ms/2.0.0: - dev: true - resolution: - integrity: sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g= - /number-is-nan/1.0.1: - dev: true - engines: - node: '>=0.10.0' - resolution: - integrity: sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0= - /os-homedir/1.0.2: - dev: true - engines: - node: '>=0.10.0' - resolution: - integrity: sha1-/7xJiDNuDoM94MFox+8VISGqf7M= - /os-tmpdir/1.0.2: - dev: true - engines: - node: '>=0.10.0' - resolution: - integrity: sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ= - /path-is-absolute/1.0.1: - dev: true - engines: - node: '>=0.10.0' - resolution: - integrity: sha1-F0uSaHNVNP+8es5r9TpanhtcX18= - /private/0.1.8: - dev: true - engines: - node: '>= 0.6' - resolution: - integrity: sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg== - /regenerate/1.3.3: - dev: true - resolution: - integrity: sha512-jVpo1GadrDAK59t/0jRx5VxYWQEDkkEKi6+HjE3joFVLfDOh9Xrdh0dF1eSq+BI/SwvTQ44gSscJ8N5zYL61sg== - /regenerator-runtime/0.11.1: - dev: true - resolution: - integrity: sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg== - /regenerator-transform/0.10.1: - dependencies: - babel-runtime: 6.26.0 - babel-types: 6.26.0 - private: 0.1.8 - dev: true - resolution: - integrity: sha512-PJepbvDbuK1xgIgnau7Y90cwaAmO/LCLMI2mPvaXq2heGMR3aWW5/BQvYrhJ8jgmQjXewXvBjzfqKcVOmhjZ6Q== - /regexpu-core/2.0.0: - dependencies: - regenerate: 1.3.3 - regjsgen: 0.2.0 - regjsparser: 0.1.5 - dev: true - resolution: - integrity: sha1-SdA4g3uNz4v6W5pCE5k45uoq4kA= - /regjsgen/0.2.0: - dev: true - resolution: - integrity: sha1-bAFq3qxVT3WCP+N6wFuS1aTtsfc= - /regjsparser/0.1.5: - dependencies: - jsesc: 0.5.0 - dev: true - resolution: - integrity: sha1-fuj4Tcb6eS0/0K4ijSS9lJ6tIFw= - /repeating/2.0.1: - dependencies: - is-finite: 1.0.2 - dev: true - engines: - node: '>=0.10.0' - resolution: - integrity: sha1-UhTFOpJtNVJwdSf7q0FdvAjQbdo= - /rollup-plugin-babel/3.0.3: - dependencies: - rollup-pluginutils: 1.5.2 - dev: true - peerDependencies: - babel-core: '6' - resolution: - integrity: sha512-5kzM/Rr4jQSRPLc2eN5NuD+CI/6AAy7S1O18Ogu4U3nq1Q42VJn0C9EMtqnvxtfwf1XrezOtdA9ro1VZI5B0mA== - /rollup-plugin-uglify/3.0.0: - dependencies: - uglify-es: 3.3.9 - dev: true - resolution: - integrity: sha512-dehLu9eRRoV4l09aC+ySntRw1OAfoyKdbk8Nelblj03tHoynkSybqyEpgavemi1LBOH6S1vzI58/mpxkZIe1iQ== - /rollup-pluginutils/1.5.2: - dependencies: - estree-walker: 0.2.1 - minimatch: 3.0.4 - dev: true - resolution: - integrity: sha1-HhVud4+UtyVb+hs9AXi+j1xVJAg= - /rollup/0.58.1: - dependencies: - '@types/estree': 0.0.38 - '@types/node': 9.6.5 - dev: true - resolution: - integrity: sha512-m423aUHITpMlcqz0grLddNGxMpBC2yYmgKwSlKNXxEi8PfNKTknh69JDo1bB1T9ezJQeqAoyFo2+U3qMQ4/I6g== - /slash/1.0.0: - dev: true - engines: - node: '>=0.10.0' - resolution: - integrity: sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU= - /source-map-support/0.4.18: - dependencies: - source-map: 0.5.7 - dev: true - resolution: - integrity: sha512-try0/JqxPLF9nOjvSta7tVondkP5dwgyLDjVoyMDlmjugT2lRZ1OfsrYTkCd2hkDnJTKRbO/Rl3orm8vlsUzbA== - /source-map/0.5.7: - dev: true - engines: - node: '>=0.10.0' - resolution: - integrity: sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w= - /source-map/0.6.1: - dev: true - engines: - node: '>=0.10.0' - resolution: - integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g== - /strip-ansi/3.0.1: - dependencies: - ansi-regex: 2.1.1 - dev: true - engines: - node: '>=0.10.0' - resolution: - integrity: sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8= - /supports-color/2.0.0: - dev: true - engines: - node: '>=0.8.0' - resolution: - integrity: sha1-U10EXOa2Nj+kARcIRimZXp3zJMc= - /to-fast-properties/1.0.3: - dev: true - engines: - node: '>=0.10.0' - resolution: - integrity: sha1-uDVx+k2MJbguIxsG46MFXeTKGkc= - /trim-right/1.0.1: - dev: true - engines: - node: '>=0.10.0' - resolution: - integrity: sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM= - /uglify-es/3.3.9: - dependencies: - commander: 2.13.0 - source-map: 0.6.1 - dev: true - engines: - node: '>=0.8.0' - resolution: - integrity: sha512-r+MU0rfv4L/0eeW3xZrd16t4NZfK8Ld4SWVglYBb7ez5uXFWHuVRs6xCTrf1yirs9a4j4Y27nn7SRfO6v67XsQ== -registry: 'https://registry.npmjs.org/' -shrinkwrapMinorVersion: 5 -shrinkwrapVersion: 3 -specifiers: - babel-core: ^6.26.0 - babel-preset-es2015: ^6.24.1 - rollup: ^0.58.0 - rollup-plugin-babel: ^3.0.3 - rollup-plugin-uglify: ^3.0.0 diff --git a/src/transition.js b/src/transition.js index e199902..a974c0d 100644 --- a/src/transition.js +++ b/src/transition.js @@ -1,46 +1,78 @@ export * from './easings.js'; +const transitions = []; + +function animate(time){ + transitions.forEach((t, i) => { + t._frame(time); + }); + + requestAnimationFrame(animate); +} + +requestAnimationFrame(animate); + export function transition(_options){ + if( !(this instanceof transition) ){ + return new transition(_options); + } + const options = { from: 0, to: 100, duration: 1000, + autostart: true, easing: v => v, onChange: () => {}, onDone: () => {} } - for(const attr in _options){ + for( let attr in _options ){ options[attr] = _options[attr]; } let start = 0; + let started = options.autostart; - const frame = time => { + // Gets called at the end of the transition or manually by the user + this.cancel = function(){ + // remove this transition from queue + transitions.splice(transitions.indexOf(this), 1); + } + + this.start = function(){ + started = true; + } + + this._frame = time => { + // Don't do anything until this transition has started + if( started !== true ){ + return; + } // Set the inital timestamp if( start <= 0 ){ - start = time; + start = time; } // Calculate the current progress in milliseconds const progress = time - start; // Check if the transition time already passed the duration - if(progress < options.duration){ + if( progress < options.duration ){ // Call the onChange event options.onChange( ( options.easing( Math.min( progress / options.duration, 1 ) ) * ( options.to - options.from ) ) + options.from ); - - requestAnimationFrame(frame); }else{ // Call the onChange the last time and ensure the last value emitted is the final value options.onChange(options.to); // Call the onDone event to finish this off options.onDone(); + + // Ensure nothing happens anymore + this.cancel(); } } - // Start the transition - requestAnimationFrame(frame); + transitions.push(this); } \ No newline at end of file diff --git a/test/index.html b/test/index.html new file mode 100644 index 0000000..84a7b68 --- /dev/null +++ b/test/index.html @@ -0,0 +1,34 @@ + + + + + +

0%

+ + + + \ No newline at end of file diff --git a/test/transition.es.js b/test/transition.es.js new file mode 100644 index 0000000..ff35ea5 --- /dev/null +++ b/test/transition.es.js @@ -0,0 +1,94 @@ +function easeIn(t) { + return -Math.cos(t * Math.PI * 0.5) + 1; +} + +function easeOut(t) { + return Math.sin(t * Math.PI * 0.5); +} + +function easeInOut(t) { + return -Math.cos(t * Math.PI) * 0.5 + 0.5; +} + +var transitions = []; + +function animate(time) { + transitions.forEach(function (t, i) { + t._frame(time); + }); + + requestAnimationFrame(animate); +} + +requestAnimationFrame(animate); + +function transition(_options) { + var _this = this; + + if (!(this instanceof transition)) { + return new transition(_options); + } + + var options = { + from: 0, + to: 100, + duration: 1000, + autostart: true, + easing: function easing(v) { + return v; + }, + onChange: function onChange() {}, + onDone: function onDone() {} + }; + + for (var attr in _options) { + options[attr] = _options[attr]; + } + + var start = 0; + var started = options.autostart; + + // Gets called at the end of the transition or manually by the user + this.cancel = function () { + // remove this transition from queue + transitions.splice(transitions.indexOf(this), 1); + }; + + this.start = function () { + started = true; + }; + + this._frame = function (time) { + // Don't do anything until this transition has started + if (started !== true) { + return; + } + + // Set the inital timestamp + if (start <= 0) { + start = time; + } + + // Calculate the current progress in milliseconds + var progress = time - start; + + // Check if the transition time already passed the duration + if (progress < options.duration) { + // Call the onChange event + options.onChange(options.easing(Math.min(progress / options.duration, 1)) * (options.to - options.from) + options.from); + } else { + // Call the onChange the last time and ensure the last value emitted is the final value + options.onChange(options.to); + + // Call the onDone event to finish this off + options.onDone(); + + // Ensure nothing happens anymore + _this.cancel(); + } + }; + + transitions.push(this); +} + +export { transition, easeIn, easeOut, easeInOut };