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 return <div =/> </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:
Component { ; thisclickHandler = thisclickHandler; thisstate = x: 0 ; } { this; } { return <div> <button ="button" =>Toggle X</button> <VictoryAnimation => data return <div = /> ; </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
:
Component { ; thisclickHandler = thisclickHandler; thisstate = x: 0 w: 500 h: 500 br: 0 color: "#3498db" rotate: 0 ; } { this; } { return <div> <button ="button" =>Toggle X</button> <VictoryAnimation => data return <div => <div =>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:
Component{superprops;thisclickHandler = thisclickHandler;thisstate =data:x: 0y: 0;}{this;}{return<div><button type="button" onClick=thisclickHandler>Toggle X</button><VictoryAnimation data=thisstatedata>{return<div style=position: "relative"left: dataxtop: dataywidth: 200height: 200backgroundColor: "#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