Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-tween-state
Advanced tools
react-tween-state - npm Package Compare versions
Comparing version 0.0.5 to 0.1.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! |
| { | ||
| "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": { |
| # [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. |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by106.24%
26758
- Number of package files
- increased by33.33%
8
Worsened metrics
- Dev dependency count
- increased by400%
5
- Lines of code
- decreased by-82.98%
24
- Number of lines in readme file
- decreased by-28.8%
89
No dependency changes