Flare-react NPM

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.

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 ...*/ />;
	}
}