Flare React
A React component to display and animate your Flare files. Based off of Flare-JS
Installation
npm install flare-reactUsage
Import FlareComponent from the installed package.
import FlareComponent from 'flare-react';Add the FlareComponent and reference the file and animation to play.
<FlareComponent width={200} height={200} animationName="walk" file="penguin.flr"/>Controllers
If you want to dynamically mix animations or move nodes (like an IK target) in response to events, inputs, etc, you'll need to use a controller. A controller gets initialized when the artboard becomes available. This is the appropriate moment to query for any animations, nodes, etc you expect to modify at runtime. The example controller below is for the Flare file here: https://www.2dimensions.com/a/JuanCarlos/files/flare/penguin/preview
class PenguinController extends FlareComponent.Controller
{
constructor()
{
super();
this._MusicWalk = null;
this._Walk = null;
this._WalkTime = 0;
}
initialize(artboard)
{
this._MusicWalk = artboard.getAnimation("music_walk");
this._Walk = artboard.getAnimation("walk");
}
advance(artboard, elapsed)
{
// advance the walk time
this._WalkTime += elapsed;
const { _MusicWalk: musicWalk, _Walk: walk, _WalkTime: walkTime } = this;
// mix the two animations together by applying one and then the other (note that order matters).
walk.apply(walkTime % walk.duration, artboard, 1.0);
// if you want to slowly disable the head bobbing (musicWalk animation) you could ramp down the
// final argument (the mix argument) to 0.0 over some time. For now we're mixing at full strength.
musicWalk.apply(walkTime % musicWalk.duration, artboard, 1.0);
// keep rendering
return true;
}
}You can now instance your PenguinController and tell your FlareComponent to use it:
class MyComponent extends React.Component
{
constructor()
{
this.state = { penguinController: new PenguinController() };
}
render()
{
return <FlareComponent controller={this.state.penguinController} /*... more properties here ...*/ />;
}
}Support
Please open an issue for support.
Contributing
Github Flow
Please contribute using Github Flow. Create a branch, add commits, and open a pull request.
Code Formatting
The codebase is formatted with js-beautify. Please run any modifications through the formatter with the supplied .jsbeautifyrc file.