A Controller maintains state for an arbitrary set of properties.
When a controller is created, all properties passed into its constructor will be stored in state.
| Property | Type | Description |
|---|---|---|
| state | object | The controller's current state. |
| connected | any | Any data stored using the connect method. |
| animation | AnimeInstance | Any data stored using the connect method. |
| isAnimating | Whether the controller's current animation is animating. |
| Method | Description |
|---|---|
| setState(state) | Merges the provided values into the controller's state. |
| animate(options, path?) | Animate the controller's state. Uses animejs. If animating an object property, use the key of the object property as the second parameter. (e.g. If animating the top property of controller.state.something, use controller.animate({top: 100}, 'something').) Returns an anime instance that can be paused and resumed. |
| connect(data) | Stores the provided data as the controller's connected property. |
| reset() | Resets the controller to its initial state. |
| stopAnimation() | Stop any current animation. |
| pauseAnimation() | Pause any current animation. |
| resumeAnimation() | Resume any current animation. |
In addition, the Controller class has three protected life cycle methods. If
you're writing a class that extends Controller, you can overwrite these
methods in your class.
| Protected Method | Description |
|---|---|
| onUpdate(state: State, connected: any) | A lifecycle method fired when the controller's state updates. |
| onConnect(state: State, connected: any) | A lifecycle method fired when the controller connects to data. |
| onReset(state: State, connected: any) | A lifecycle method fired when the controller resets its state. |
Example: