react-tween-state

WebJar for react-tween-state

License

License

BSD
Categories

Categories

React User Interface Web Frameworks
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

react-tween-state
Last Version

Last Version

0.1.5
Release Date

Release Date

Type

Type

jar
Description

Description

react-tween-state
WebJar for react-tween-state
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/chenglou/react-tween-state

Download react-tween-state

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/react-tween-state/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>react-tween-state</artifactId>
    <version>0.1.5</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/react-tween-state/
implementation 'org.webjars.npm:react-tween-state:0.1.5'
// https://jarcasting.com/artifacts/org.webjars.npm/react-tween-state/
implementation ("org.webjars.npm:react-tween-state:0.1.5")
'org.webjars.npm:react-tween-state:jar:0.1.5'
<dependency org="org.webjars.npm" name="react-tween-state" rev="0.1.5">
  <artifact name="react-tween-state" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='react-tween-state', version='0.1.5')
)
libraryDependencies += "org.webjars.npm" % "react-tween-state" % "0.1.5"
[org.webjars.npm/react-tween-state "0.1.5"]

Dependencies

compile (2)

Group / Artifact Type Version
org.webjars.npm : raf jar [3.1.0,4)
org.webjars.npm : tween-functions jar [1.0.1,2)

Project Modules

There are no modules declared in this project.

React Tween State

The equivalent of React's this.setState, but for animated tweens: this.tweenState.

Live demo and source.

Npm:

npm install react-tween-state

Bower:

bower install react-tween-state

API

Example usage:

var tweenState = require('react-tween-state');
var React = require('react');

var App = React.createClass({
  mixins: [tweenState.Mixin],
  getInitialState: function() {
    return {left: 0};
  },
  handleClick: function() {
    this.tweenState('left', {
      easing: tweenState.easingTypes.easeInOutQuad,
      duration: 500,
      endValue: this.state.left === 0 ? 400 : 0
    });
  },
  render: function() {
    var style = {
      position: 'absolute',
      width: 50,
      height: 50,
      backgroundColor: 'lightblue',
      left: this.getTweeningValue('left')
    };
    return <div style={style} onClick={this.handleClick} />;
  }
});

The library exports Mixin, easingTypes and stackBehavior.

this.tweenState(path: String | Array<String>, configuration: Object)

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.

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']

configuration is of the following format:

{
  easing: easingFunction,
  duration: timeInMilliseconds,
  delay: timeInMilliseconds,
  beginValue: aNumber,
  endValue: aNumber,
  onEnd: endCallback,
  stackBehavior: behaviorOption
}
  • easing (default: easingTypes.easeInOutQuad): the interpolation function used. react-tween-state provides frequently used interpolation (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 of the state field).
  • endValue.
  • onEnd: the callback to trigger when the animation's done. **
  • 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 describes it well. The other option is stackBehavior.DESTRUCTIVE, which replaces all current animations of that state value by this new one.

* 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, skipping the easing function.

** For an additive animation, since the tweens stack and never get destroyed, the end callback is effectively fired at the end of duration.

this.getTweeningValue(path: String | Array<String>)

Get the current tweening value of the state field. Typically used in render.

License

BSD.

Versions

Version
0.1.5