Flare React
A React component to display and animate your Flare files. Based off of Flare-JS
Installation
npm install flare-react
Usage
Import FlareComponent from the installed package.
;
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
Controller { super; this_MusicWalk = null; this_Walk = null; this_WalkTime = 0; } this_MusicWalk = artboard; this_Walk = artboard; // 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; // 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; // keep rendering return true;
You can now instance your PenguinController and tell your FlareComponent to use it:
Component { thisstate = penguinController: ; } return <FlareComponent controller=thisstatepenguinController /*... 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.