Latest Threat Research:SANDWORM_MODE: Shai-Hulud-Style npm Worm Hijacks CI Workflows and Poisons AI Toolchains.Details →
react-tween-state
Advanced tools
react-tween-state - npm Package Compare versions
| {"version":3,"sources":["webpack:///webpack/universalModuleDefinition?5ca6","webpack:///webpack/bootstrap c352d24ce4d8a021d261?bb5b","webpack:///./index.js","webpack:///./~/tween-functions/index.js"],"names":[],"mappings":"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CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAK;AACL;AACA;AACA,IAAG;AACH;AACA;AACA;AACA,IAAG;AACH;AACA;AACA;AACA,IAAG;AACH;AACA;AACA;AACA;AACA,MAAK;AACL;AACA;AACA,IAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAK;AACL;AACA;AACA;AACA,IAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAK;AACL;AACA;AACA;AACA,IAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAK;AACL;AACA;AACA;AACA;AACA,MAAK;AACL;AACA;AACA,IAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA,IAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA,IAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAK;AACL;AACA;AACA,IAAG;AACH;AACA;AACA;AACA;AACA;AACA,IAAG;AACH;AACA;AACA;AACA;AACA,MAAK;AACL;AACA,MAAK;AACL;AACA,MAAK;AACL;AACA;AACA,IAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA,MAAK;AACL;AACA;AACA;AACA;AACA;;AAEA","file":"./lib/index.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"tweenState\"] = factory();\n\telse\n\t\troot[\"tweenState\"] = factory();\n})(this, function() {\nreturn \n\n\n/** WEBPACK FOOTER **\n ** webpack/universalModuleDefinition\n **/"," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\texports: {},\n \t\t\tid: moduleId,\n \t\t\tloaded: false\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.loaded = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(0);\n\n\n\n/** WEBPACK FOOTER **\n ** webpack/bootstrap c352d24ce4d8a021d261\n **/","'use strict';\n\nimport easingTypes, {easeInOutQuad} from 'tween-functions';\n\n// additive is the new iOS 8 default. In most cases it simulates a physics-\n// looking overshoot behavior (especially with easeInOut. You can test that in\n// the example\nlet DEFAULT_STACK_BEHAVIOR = 'ADDITIVE';\nlet DEFAULT_EASING = easeInOutQuad;\nlet DEFAULT_DURATION = 300;\nlet DEFAULT_DELAY = 0;\n\nexport {easingTypes};\nexport let stackBehavior = {\n ADDITIVE: 'ADDITIVE',\n DESTRUCTIVE: 'DESTRUCTIVE',\n};\nexport let Mixin = {\n getInitialState: function() {\n return {\n tweenQueue: [],\n };\n },\n\n tweenState: function(path, {easing, duration, delay, beginValue, endValue, onEnd, stackBehavior: configSB}) {\n this.setState(state => {\n let cursor = state;\n let stateName;\n // see comment below on pash hash\n let pathHash;\n if (typeof path === 'string') {\n stateName = path;\n pathHash = path;\n } else {\n for (let i = 0; i < path.length - 1; i++) {\n cursor = cursor[path[i]];\n }\n stateName = path[path.length - 1];\n pathHash = path.join('|');\n }\n // see the reasoning for these defaults at the top of file\n let newConfig = {\n easing: easing || DEFAULT_EASING,\n duration: duration == null ? DEFAULT_DURATION : duration,\n delay: delay == null ? DEFAULT_DELAY : delay,\n beginValue: beginValue == null ? cursor[stateName] : beginValue,\n endValue: endValue,\n onEnd: onEnd,\n stackBehavior: configSB || DEFAULT_STACK_BEHAVIOR,\n };\n\n let newTweenQueue = state.tweenQueue;\n if (newConfig.stackBehavior === stackBehavior.DESTRUCTIVE) {\n newTweenQueue = state.tweenQueue.filter(item => item.pathHash !== pathHash);\n }\n\n // we store path hash, so that during value retrieval we can use hash\n // comparison to find the path. See the kind of shitty thing you have to\n // do when you don't have value comparison for collections?\n newTweenQueue.push({\n pathHash: pathHash,\n config: newConfig,\n initTime: Date.now() + newConfig.delay,\n });\n\n // sorry for mutating. For perf reasons we don't want to deep clone.\n // guys, can we please all start using persistent collections so that\n // we can stop worrying about nonesense like this\n cursor[stateName] = newConfig.endValue;\n if (newTweenQueue.length === 1) {\n this.startRaf();\n }\n\n // this will also include the above mutated update\n return {tweenQueue: newTweenQueue};\n });\n },\n\n getTweeningValue: function(path) {\n let state = this.state;\n\n let tweeningValue;\n let pathHash;\n if (typeof path === 'string') {\n tweeningValue = state[path];\n pathHash = path;\n } else {\n tweeningValue = state;\n for (let i = 0; i < path.length; i++) {\n tweeningValue = tweeningValue[path[i]];\n }\n pathHash = path.join('|');\n }\n let now = Date.now();\n\n for (let i = 0; i < state.tweenQueue.length; i++) {\n let item = state.tweenQueue[i];\n if (item.pathHash !== pathHash) {\n continue;\n }\n\n let progressTime = now - item.initTime > item.config.duration ?\n item.config.duration :\n Math.max(0, now - item.initTime);\n // `now - item.initTime` can be negative if initTime is scheduled in the\n // future by a delay. In this case we take 0\n\n let contrib = -item.config.endValue + item.config.easing(\n progressTime,\n item.config.beginValue,\n item.config.endValue,\n item.config.duration,\n // TODO: some funcs accept a 5th param\n );\n tweeningValue += contrib;\n }\n\n return tweeningValue;\n },\n\n _rafCb: function() {\n let state = this.state;\n if (state.tweenQueue.length === 0) {\n return;\n }\n\n let now = Date.now();\n let newTweenQueue = [];\n\n for (let i = 0; i < state.tweenQueue.length; i++) {\n let item = state.tweenQueue[i];\n if (now - item.initTime < item.config.duration) {\n newTweenQueue.push(item);\n } else {\n item.config.onEnd && item.config.onEnd();\n }\n }\n\n // onEnd might trigger a parent callback that removes this component\n if (!this.isMounted()) {\n return;\n }\n\n this.setState({\n tweenQueue: newTweenQueue,\n });\n\n requestAnimationFrame(this._rafCb);\n },\n\n startRaf: function() {\n requestAnimationFrame(this._rafCb);\n },\n};\n\n\n\n/** WEBPACK FOOTER **\n ** ./index.js\n **/","'use strict';\n\n// t: current time, b: beginning value, _c: final value, d: total duration\nvar tweenFunctions = {\n linear: function(t, b, _c, d) {\n var c = _c - b;\n return c * t / d + b;\n },\n easeInQuad: function(t, b, _c, d) {\n var c = _c - b;\n return c * (t /= d) * t + b;\n },\n easeOutQuad: function(t, b, _c, d) {\n var c = _c - b;\n return -c * (t /= d) * (t - 2) + b;\n },\n easeInOutQuad: function(t, b, _c, d) {\n var c = _c - b;\n if ((t /= d / 2) < 1) {\n return c / 2 * t * t + b;\n } else {\n return -c / 2 * ((--t) * (t - 2) - 1) + b;\n }\n },\n easeInCubic: function(t, b, _c, d) {\n var c = _c - b;\n return c * (t /= d) * t * t + b;\n },\n easeOutCubic: function(t, b, _c, d) {\n var c = _c - b;\n return c * ((t = t / d - 1) * t * t + 1) + b;\n },\n easeInOutCubic: function(t, b, _c, d) {\n var c = _c - b;\n if ((t /= d / 2) < 1) {\n return c / 2 * t * t * t + b;\n } else {\n return c / 2 * ((t -= 2) * t * t + 2) + b;\n }\n },\n easeInQuart: function(t, b, _c, d) {\n var c = _c - b;\n return c * (t /= d) * t * t * t + b;\n },\n easeOutQuart: function(t, b, _c, d) {\n var c = _c - b;\n return -c * ((t = t / d - 1) * t * t * t - 1) + b;\n },\n easeInOutQuart: function(t, b, _c, d) {\n var c = _c - b;\n if ((t /= d / 2) < 1) {\n return c / 2 * t * t * t * t + b;\n } else {\n return -c / 2 * ((t -= 2) * t * t * t - 2) + b;\n }\n },\n easeInQuint: function(t, b, _c, d) {\n var c = _c - b;\n return c * (t /= d) * t * t * t * t + b;\n },\n easeOutQuint: function(t, b, _c, d) {\n var c = _c - b;\n return c * ((t = t / d - 1) * t * t * t * t + 1) + b;\n },\n easeInOutQuint: function(t, b, _c, d) {\n var c = _c - b;\n if ((t /= d / 2) < 1) {\n return c / 2 * t * t * t * t * t + b;\n } else {\n return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;\n }\n },\n easeInSine: function(t, b, _c, d) {\n var c = _c - b;\n return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;\n },\n easeOutSine: function(t, b, _c, d) {\n var c = _c - b;\n return c * Math.sin(t / d * (Math.PI / 2)) + b;\n },\n easeInOutSine: function(t, b, _c, d) {\n var c = _c - b;\n return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;\n },\n easeInExpo: function(t, b, _c, d) {\n var c = _c - b;\n var _ref;\n return (_ref = t === 0) !== null ? _ref : {\n b: c * Math.pow(2, 10 * (t / d - 1)) + b\n };\n },\n easeOutExpo: function(t, b, _c, d) {\n var c = _c - b;\n var _ref;\n return (_ref = t === d) !== null ? _ref : b + {\n c: c * (-Math.pow(2, -10 * t / d) + 1) + b\n };\n },\n easeInOutExpo: function(t, b, _c, d) {\n var c = _c - b;\n if (t === 0) {\n b;\n }\n if (t === d) {\n b + c;\n }\n if ((t /= d / 2) < 1) {\n return c / 2 * Math.pow(2, 10 * (t - 1)) + b;\n } else {\n return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;\n }\n },\n easeInCirc: function(t, b, _c, d) {\n var c = _c - b;\n return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;\n },\n easeOutCirc: function(t, b, _c, d) {\n var c = _c - b;\n return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;\n },\n easeInOutCirc: function(t, b, _c, d) {\n var c = _c - b;\n if ((t /= d / 2) < 1) {\n return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;\n } else {\n return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;\n }\n },\n easeInElastic: function(t, b, _c, d) {\n var c = _c - b;\n var a, p, s;\n s = 1.70158;\n p = 0;\n a = c;\n if (t === 0) {\n b;\n } else if ((t /= d) === 1) {\n b + c;\n }\n if (!p) {\n p = d * 0.3;\n }\n if (a < Math.abs(c)) {\n a = c;\n s = p / 4;\n } else {\n s = p / (2 * Math.PI) * Math.asin(c / a);\n }\n return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;\n },\n easeOutElastic: function(t, b, _c, d) {\n var c = _c - b;\n var a, p, s;\n s = 1.70158;\n p = 0;\n a = c;\n if (t === 0) {\n b;\n } else if ((t /= d) === 1) {\n b + c;\n }\n if (!p) {\n p = d * 0.3;\n }\n if (a < Math.abs(c)) {\n a = c;\n s = p / 4;\n } else {\n s = p / (2 * Math.PI) * Math.asin(c / a);\n }\n return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;\n },\n easeInOutElastic: function(t, b, _c, d) {\n var c = _c - b;\n var a, p, s;\n s = 1.70158;\n p = 0;\n a = c;\n if (t === 0) {\n b;\n } else if ((t /= d / 2) === 2) {\n b + c;\n }\n if (!p) {\n p = d * (0.3 * 1.5);\n }\n if (a < Math.abs(c)) {\n a = c;\n s = p / 4;\n } else {\n s = p / (2 * Math.PI) * Math.asin(c / a);\n }\n if (t < 1) {\n return -0.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;\n } else {\n return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * 0.5 + c + b;\n }\n },\n easeInBack: function(t, b, _c, d, s) {\n var c = _c - b;\n if (s === void 0) {\n s = 1.70158;\n }\n return c * (t /= d) * t * ((s + 1) * t - s) + b;\n },\n easeOutBack: function(t, b, _c, d, s) {\n var c = _c - b;\n if (s === void 0) {\n s = 1.70158;\n }\n return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;\n },\n easeInOutBack: function(t, b, _c, d, s) {\n var c = _c - b;\n if (s === void 0) {\n s = 1.70158;\n }\n if ((t /= d / 2) < 1) {\n return c / 2 * (t * t * (((s *= 1.525) + 1) * t - s)) + b;\n } else {\n return c / 2 * ((t -= 2) * t * (((s *= 1.525) + 1) * t + s) + 2) + b;\n }\n },\n easeInBounce: function(t, b, _c, d) {\n var c = _c - b;\n var v;\n v = tweenFunctions.easeOutBounce(d - t, 0, c, d);\n return c - v + b;\n },\n easeOutBounce: function(t, b, _c, d) {\n var c = _c - b;\n if ((t /= d) < 1 / 2.75) {\n return c * (7.5625 * t * t) + b;\n } else if (t < 2 / 2.75) {\n return c * (7.5625 * (t -= 1.5 / 2.75) * t + 0.75) + b;\n } else if (t < 2.5 / 2.75) {\n return c * (7.5625 * (t -= 2.25 / 2.75) * t + 0.9375) + b;\n } else {\n return c * (7.5625 * (t -= 2.625 / 2.75) * t + 0.984375) + b;\n }\n },\n easeInOutBounce: function(t, b, _c, d) {\n var c = _c - b;\n var v;\n if (t < d / 2) {\n v = tweenFunctions.easeInBounce(t * 2, 0, c, d);\n return v * 0.5 + b;\n } else {\n v = tweenFunctions.easeOutBounce(t * 2 - d, 0, c, d);\n return v * 0.5 + c * 0.5 + b;\n }\n }\n};\n\nmodule.exports = tweenFunctions;\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/tween-functions/index.js\n ** module id = 161\n ** module chunks = 1\n **/"],"sourceRoot":""} |
Sorry, the diff of this file is not supported yet
| module.exports = { | ||
| entry: { | ||
| // https://github.com/webpack/webpack/issues/300 | ||
| lib: ['./index.js'], | ||
| examples: './examples/index.jsx', | ||
| }, | ||
| output: { | ||
| filename: './[name]/index.js', | ||
| libraryTarget: 'umd', | ||
| library: 'tweenState', | ||
| }, | ||
| module: { | ||
| loaders: [ | ||
| { | ||
| test: /\.jsx?$/, | ||
| exclude: /node_modules/, | ||
| loader: 'babel?stage=0', | ||
| }, | ||
| ] | ||
| }, | ||
| resolve: { | ||
| extensions: ['', '.js', '.jsx'] | ||
| } | ||
| }; |
+7
-0
@@ -5,2 +5,9 @@ Legend: | ||
| ## 0.1.0 (June 21th 2015) | ||
| **Note**: this version is not compatible with React < 0.13. | ||
| - [I] Better API! See the [updated examples](https://github.com/chenglou/react-tween-state/tree/master/examples). | ||
| - [I] Library converted to ES7 with Babel. | ||
| - [I] Compatible with UMD. | ||
| - [F] See the note [here](https://github.com/chenglou/react-tween-state/wiki/Change-from-React-0.12-to-0.13). | ||
| ### 0.0.5 (March 17th 2015) | ||
@@ -7,0 +14,0 @@ **Note**: this is the last release compatible with React < 0.13! |
+8
-4
| { | ||
| "name": "react-tween-state", | ||
| "version": "0.0.5", | ||
| "version": "0.1.0", | ||
| "description": "React animation.", | ||
| "main": "index.js", | ||
| "main": "lib/index.js", | ||
| "directories": { | ||
@@ -11,3 +11,3 @@ "examples": "examples" | ||
| "test": "echo \"Error: no test specified\" && exit 1", | ||
| "build-bower": "./node_modules/.bin/browserify -s tweenState index.js > index-bower.js" | ||
| "build": "webpack -w -d" | ||
| }, | ||
@@ -35,3 +35,7 @@ "repository": { | ||
| "devDependencies": { | ||
| "browserify": "^6.3.2" | ||
| "babel-core": "^5.6.1", | ||
| "babel-loader": "^5.1.4", | ||
| "node-libs-browser": "^0.5.2", | ||
| "react": "^0.13.3", | ||
| "webpack": "^1.9.11" | ||
| }, | ||
@@ -38,0 +42,0 @@ "dependencies": { |
+11
-47
| # [React](http://facebook.github.io/react/) Tween State | ||
| For React 0.13+ users: see the subtle differences [here] vs 0.12. | ||
| The equivalent of React's `this.setState`, but for animated tweens: `this.tweenState`. | ||
| The equivalent of React's `this.setState`, but for animated tweening: `this.tweenState`. | ||
| [Live demo](https://rawgit.com/chenglou/react-tween-state/master/examples/index.html) and [source](https://github.com/chenglou/react-tween-state/tree/master/examples). | ||
@@ -19,4 +17,2 @@ | ||
| *For Bower*: the single source file is `index-bower.js`. | ||
| ## API | ||
@@ -55,11 +51,11 @@ | ||
| ### General | ||
| The library exports `Mixin`, `easingTypes` and `stackBehavior`. | ||
| #### `this.tweenState(stateNameString, configurationObject)` | ||
| #### `this.tweenState(path: String | Array<String>, configuration: Object)` | ||
| This immediately calls `setState` on your state name under the hood, and also creates a virtual "layer", in which your state didn't jump straight to the final value: rather, it is being tweened. `this.getTweeningValue(stateNameString)` lets you access the tweening value on that layer. Formal API below. | ||
| This first calls `setState` **and puts your fields straight to their final value**. Under the hood, it creates a layer that interpolates from the old value to the new. You can retrieve that tweening value using `getTweeningValue` below. | ||
| `stateNameString` is the name of the state you want to tween. | ||
| `path` is the name of the state field you want to tween. If it's deeply nested, e.g. to animate `c` in {a: {b: {c: 1}}}, provide the path as `['a', 'b', 'c']` | ||
| `configurationObject` is an object of the following format: | ||
| `configuration` is of the following format: | ||
@@ -78,9 +74,9 @@ ```js | ||
| - `easing` (default: `tweenState.easingTypes.easeInOutQuad`): the interpolation function used. react-tween-state provides [frequently used interpolation](https://github.com/chenglou/react-tween-state/blob/master/easingTypes.js) (all exposed inside `tweenState.easingTypes`). In case you ever create your own, the function signature is: `(currentTime: Number, beginValue: Number, endValue: Number, totalDuration: Number): Number`. | ||
| - `easing` (default: `easingTypes.easeInOutQuad`): the interpolation function used. react-tween-state provides [frequently used interpolation](https://github.com/chenglou/tween-functions/blob/master/index.js) (exposed under `easingTypes`). To plug in your own, the function signature is: `(currentTime: Number, beginValue: Number, endValue: Number, totalDuration: Number): Number`. | ||
| - `duration` (default: `300`). | ||
| - `delay` (default: `0`). * | ||
| - `beginValue` (default: the current value the state being tweened, `this.state[stateNameString]`). | ||
| - `beginValue` (default: the current value of the state field). | ||
| - `endValue`. | ||
| - `onEnd`: the callback to trigger when the animation's done. ** | ||
| - `stackBehavior` (default: `tweenState.stackBehavior.ADDITIVE`). Subsequent tweening to the same state value will be stacked (added together). This gives a smooth tweening effect that is iOS 8's new default. [This blog post](http://ronnqvi.st/multiple-animations/) describes it well. The other option is `tweenState.stackBehavior.DESTRUCTIVE`, which replaces all current animations of that state value by this new one. | ||
| - `stackBehavior` (default: `stackBehavior.ADDITIVE`). Subsequent tween to the same state value will be stacked (added together). This gives a smooth tween effect that is iOS 8's new default. [This blog post](http://ronnqvi.st/multiple-animations/) describes it well. The other option is `stackBehavior.DESTRUCTIVE`, which replaces all current animations of that state value by this new one. | ||
@@ -91,38 +87,6 @@ \* For a destructive animation, starting the next one with a delay still immediately kills the previous tween. If that's not your intention, try `setTimeout` or additive animation. `DESTRUCTIVE` + `duration` 0 effectively cancels all in-flight animations. | ||
| #### `this.getTweeningValue(stateNameString)` | ||
| #### `this.getTweeningValue(path: String | Array<String>)` | ||
| Get the current tweening value of the state field. Typically used in `render`. | ||
| After you call `this.tweenState(...)`, the state value is set just like after a normal `setState()`. To actually get the current, tweening value of that state, you'd use `this.getTweeningValue(stateNameString)` (typically used in `render`). | ||
| ### Advanced | ||
| #### `this.tweenState(stateRefFunction, stateNameString, configurationObject)` | ||
| Sometimes, you want to tween not `this.state.myValue`, but the value in `this.state.myObject.myArray[4]`, in which case passing only a string of the state name isn't enough. The second form of `tweenState()` accepts a function and expects you to return the state path of the value you tween, like this: | ||
| ```js | ||
| getInitialState: function() { | ||
| return { | ||
| rectangles: [ | ||
| {x: 10, y: 20}, | ||
| {x: 10, y: 40} | ||
| ] | ||
| }; | ||
| } | ||
| // ... tween this.state.rectangles[0].x | ||
| this.tweenState(function(state) {return state.rectangles[0]}, 'x', configurationObject); | ||
| ``` | ||
| `configurationObject` is the same. | ||
| #### `this.getTweeningValue(stateRefFunction, stateNameString)` | ||
| See above. Usage: `this.getTweeningValue(function(state) {return state.rectangles[0]}, 'x')`. | ||
| ## Goal of this library | ||
| React's powerful model allows us to build apps the functional way. Having a sensible API for animation is a less explored area. This library leverages React's concept of state and render to let you specify transitions declaratively. If everything goes alright, we can make React expose powerful hooks to make this even better. | ||
| Part of a few animation API experimentations. | ||
| ## License | ||
| BSD. |
-169
| 'use strict'; | ||
| var easingTypes = require('tween-functions'); | ||
| // additive is the new iOS 8 default. In most cases it simulates a physics- | ||
| // looking overshoot behavior (especially with easeInOut. You can test that in | ||
| // the example | ||
| var DEFAULT_STACK_BEHAVIOR = 'ADDITIVE'; | ||
| var DEFAULT_EASING = easingTypes.easeInOutQuad; | ||
| var DEFAULT_DURATION = 300; | ||
| var DEFAULT_DELAY = 0; | ||
| // see usage below | ||
| function returnState(state) { | ||
| return state; | ||
| } | ||
| var tweenState = { | ||
| easingTypes: easingTypes, | ||
| stackBehavior: { | ||
| ADDITIVE: 'ADDITIVE', | ||
| DESTRUCTIVE: 'DESTRUCTIVE', | ||
| } | ||
| }; | ||
| tweenState.Mixin = { | ||
| getInitialState: function() { | ||
| return { | ||
| tweenQueue: [], | ||
| }; | ||
| }, | ||
| tweenState: function(a, b, c) { | ||
| // tweenState(stateNameString, config) | ||
| // tweenState(stateRefFunc, stateNameString, config) | ||
| // passing a state name string and retrieving it later from this.state | ||
| // doesn't work for values in deeply nested collections (unless you design | ||
| // the API to be able to parse 'this.state.my.nested[1]', meh). Passing a | ||
| // direct, resolved reference wouldn't work either, since that reference | ||
| // points to the old state rather than the subsequent new ones. | ||
| if (typeof a === 'string') { | ||
| c = b; | ||
| b = a; | ||
| a = returnState; | ||
| } | ||
| this._tweenState(a, b, c); | ||
| }, | ||
| _tweenState: function(stateRefFunc, stateName, config) { | ||
| // _pendingState doesn't exist in React 0.13 anymore. No harm leaving it | ||
| // here for backward compat | ||
| var state = this._pendingState || this.state; | ||
| var stateRef = stateRefFunc(state); | ||
| // see the reasoning for these defaults at the top | ||
| var newConfig = { | ||
| easing: config.easing || DEFAULT_EASING, | ||
| duration: config.duration == null ? DEFAULT_DURATION : config.duration, | ||
| delay: config.delay == null ? DEFAULT_DELAY : config.delay, | ||
| beginValue: config.beginValue == null ? stateRef[stateName] : config.beginValue, | ||
| endValue: config.endValue, | ||
| onEnd: config.onEnd, | ||
| stackBehavior: config.stackBehavior || DEFAULT_STACK_BEHAVIOR, | ||
| }; | ||
| var newTweenQueue = state.tweenQueue; | ||
| if (newConfig.stackBehavior === tweenState.stackBehavior.DESTRUCTIVE) { | ||
| newTweenQueue = state.tweenQueue.filter(function(item) { | ||
| return item.stateName !== stateName || item.stateRefFunc(state) !== stateRef; | ||
| }); | ||
| } | ||
| newTweenQueue.push({ | ||
| stateRefFunc: stateRefFunc, | ||
| stateName: stateName, | ||
| config: newConfig, | ||
| initTime: Date.now() + newConfig.delay, | ||
| }); | ||
| // tweenState calls setState | ||
| // sorry for mutating. No idea where in the state the value is | ||
| stateRef[stateName] = newConfig.endValue; | ||
| // this will also include the above update | ||
| this.setState({tweenQueue: newTweenQueue}); | ||
| if (newTweenQueue.length === 1) { | ||
| this.startRaf(); | ||
| } | ||
| }, | ||
| getTweeningValue: function(a, b) { | ||
| // see tweenState API | ||
| if (typeof a === 'string') { | ||
| b = a; | ||
| a = returnState; | ||
| } | ||
| return this._getTweeningValue(a, b); | ||
| }, | ||
| _getTweeningValue: function(stateRefFunc, stateName) { | ||
| var state = this.state; | ||
| var stateRef = stateRefFunc(state); | ||
| var tweeningValue = stateRef[stateName]; | ||
| var now = Date.now(); | ||
| for (var i = 0; i < state.tweenQueue.length; i++) { | ||
| var item = state.tweenQueue[i]; | ||
| var itemStateRef = item.stateRefFunc(state); | ||
| if (item.stateName !== stateName || itemStateRef !== stateRef) { | ||
| continue; | ||
| } | ||
| var progressTime = now - item.initTime > item.config.duration ? | ||
| item.config.duration : | ||
| Math.max(0, now - item.initTime); | ||
| // `now - item.initTime` can be negative if initTime is scheduled in the | ||
| // future by a delay. In this case we take 0 | ||
| var contrib = -item.config.endValue + item.config.easing( | ||
| progressTime, | ||
| item.config.beginValue, | ||
| item.config.endValue, | ||
| item.config.duration | ||
| // TODO: some funcs accept a 5th param | ||
| ); | ||
| tweeningValue += contrib; | ||
| } | ||
| return tweeningValue; | ||
| }, | ||
| _rafCb: function() { | ||
| var state = this.state; | ||
| if (state.tweenQueue.length === 0) { | ||
| return; | ||
| } | ||
| var now = Date.now(); | ||
| var newTweenQueue = []; | ||
| for (var i = 0; i < state.tweenQueue.length; i++) { | ||
| var item = state.tweenQueue[i]; | ||
| if (now - item.initTime < item.config.duration) { | ||
| newTweenQueue.push(item); | ||
| } else { | ||
| item.config.onEnd && item.config.onEnd(); | ||
| } | ||
| } | ||
| // onEnd might trigger a parent callback that removes this component | ||
| if (!this.isMounted()) { | ||
| return; | ||
| } | ||
| this.setState({ | ||
| tweenQueue: newTweenQueue, | ||
| }); | ||
| requestAnimationFrame(this._rafCb); | ||
| }, | ||
| startRaf: function() { | ||
| requestAnimationFrame(this._rafCb); | ||
| }, | ||
| }; | ||
| module.exports = tweenState; |
Sorry, the diff of this file is not supported yet
Fixed alerts
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
26758
106.24%- Number of package files
8
33.33%- Number of low supply chain risk alerts
0
-100%Worsened metrics
- Dev dependency count
5
400%- Lines of code
24
-82.98%- Number of lines in readme file
89
-28.8%No dependency changes