README
Victory Animation
victory-animation
is a React wrapper component that uses the D3 interpolate
and ease
libraries to provide transitions between prop sets.
Examples
The most basic set up you can use will require supplying a data
prop and rendering a functional child, as shown below:
<VictoryAnimation data={x: 500}>
{(data) => {
return <div style={{left: data.x}}/>
}}
</VictoryAnimation>
The way victory-animation
works is, when you supply the initial value for the data prop, the functional child gets called and your child/children are rendered with that data. Any subsequent data supplied via the data prop is interpolated against the original or current value, and the child is rerendered along a transition sequence until it reaches its final value, which is the prop that was supplied.
For example, lets check out a simple example using a button to toggle between data
prop values:
class App extends React.Component {
constructor(props) {
super(props);
this.clickHandler = this.clickHandler.bind(this);
this.state = {
x: 0
};
}
clickHandler() {
this.setState({
x: this.state.x === 0 ? 150 : 0
});
}
render() {
return (
<div>
<button type="button" onClick={this.clickHandler}>Toggle X</button>
<VictoryAnimation data={{x: this.state.x}}>
{(data) => {
return (
<div style={{left: data.x}} />
);
}}
</VictoryAnimation>
</div>
);
}
}
We can expand on this by adding multiple values, as VictoryAnimation
supports object interpolation with interpolation of any properties contained using any type supported by d3-interpolate
:
class App extends React.Component {
constructor(props) {
super(props);
this.clickHandler = this.clickHandler.bind(this);
this.state = {
x: 0,
w: 500,
h: 500,
br: 0,
color: "#3498db",
rotate: 0
};
}
clickHandler() {
this.setState({
x: this.state.x === 0 ? 150 : 0,
w: this.state.w === 500 ? 200 : 500,
h: this.state.h === 500 ? 200 : 500,
br: this.state.br === 500 ? 0 : 500,
color: this.state.color === "#3498db" ? "#2ecc71" : "#3498db",
rotate: this.state.rotate === 0 ? 360 : 0
});
}
render() {
return (
<div>
<button type="button" onClick={this.clickHandler}>Toggle X</button>
<VictoryAnimation data={
{
x: this.state.x,
w: this.state.w,
h: this.state.h,
color: this.state.color,
br: this.state.br,
rotate: this.state.rotate
}}>
{(data) => {
return (
<div style={
{
position: "relative",
left: data.x,
width: data.w,
height: data.h,
backgroundColor: data.color,
color: "white",
fontFamily: "Lucida Grande",
padding: 40,
borderRadius: data.br,
textAlign: "center",
alignItems: "center",
display: "flex",
fontSize: 40,
transform: "rotate(" + data.rotate + "deg)"
}}>
<div style={{textAlign: "center", width: "100%"}}>Test</div>
</div>
);
}}
</VictoryAnimation>
</div>
);
}
}
Check out the result below:
We can even take this a step further, as VictoryAnimation
supports arrays of objects as a type for data
. This results in chained ordered animations between multiple sets of properties:
class App extends React.Component {
constructor(props) {
super(props);
this.clickHandler = this.clickHandler.bind(this);
this.state = {
data: [
{
x: 0,
y: 0
}
]
};
}
clickHandler() {
this.setState({
data: [
{
x: 0,
y: 0
},
{
x: 250,
y: 0
},
{
x: 250,
y: 250
},
{
x: 0,
y: 250
},
{
x: 0,
y: 0
}
]
});
}
render() {
return (
<div>
<button type="button" onClick={this.clickHandler}>Toggle X</button>
<VictoryAnimation data={this.state.data}>
{(data) => {
return (
<div style={
{
position: "relative",
left: data.x,
top: data.y,
width: 200,
height: 200,
backgroundColor: "#2ecc71",
borderRadius: 500
}}>
</div>
);
}}
</VictoryAnimation>
</div>
);
}
}
The resulting render looks like:
API Documentation
Detailed documentation and interactive examples can be found at http://victory.formidable.com/docs/victory-animation/
Development
Please see DEVELOPMENT
Contributing
Please see CONTRIBUTING