https://github.com/mjohnsullivan/rive-by-example

A set of examples showing how to use Rive's runtimes.
https://github.com/mjohnsullivan/rive-by-example

animation rive

Last synced: 4 days ago
JSON representation

A set of examples showing how to use Rive's runtimes.

• Host: GitHub
• URL: https://github.com/mjohnsullivan/rive-by-example
• Owner: mjohnsullivan
• License: mit
• Created: 2020-12-08T20:48:23.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2021-06-12T00:37:28.000Z (over 3 years ago)
• Last Synced: 2024-04-18T04:14:00.554Z (7 months ago)
• Topics: animation, rive
• Language: JavaScript
• Homepage: https://rive.app
• Size: 86.9 KB
• Stars: 49
• Watchers: 5
• Forks: 9
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Rive By Example

A collection of repositories showing how to use the [Rive](http://beta.rive.app) runtimes.

## Flutter

Run ```flutter create .``` in a Flutter project directry to generate platform support files.

### Examples

1. [*Simple looping Animation*](https://github.com/mjohnsullivan/rive-by-example/tree/main/flutter/f_01_looping_animation) - continuously play a looping animation.

2. [*Start/Stop Animation*](https://github.com/mjohnsullivan/rive-by-example/tree/main/flutter/f_02_start_stop_animation) - control starting and stopping a looping animation.

3. [*Mixing Animations*](https://github.com/mjohnsullivan/rive-by-example/tree/main/flutter/f_03_mixing_animations) - Mixing animations together.

4. [*Controlling Mix*](https://github.com/mjohnsullivan/rive-by-example/tree/main/flutter/f_04_controlling_mix) - Control the level/strength of mix between animations.

5. [*Custom Controller*](https://github.com/mjohnsullivan/rive-by-example/tree/main/flutter/f_05_custom_controller) - basic custom controller demonstrating how to customize animation behavior.

6. [*Callback Controller*](https://github.com/mjohnsullivan/rive-by-example/tree/main/flutter/f_06_callback_controller) - custom controller demonstrating how to have a callback when an animation completes, and how to replay an animation.

## Web

Pure web examples use [express-generator](http://expressjs.com/en/starter/generator.html) for [simple local hosting](https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/get-started). Run ```npm install``` in the example's root directory, and then ```npm run``` to serve the app.

If you'd like to learn step-by-step how the web runtimes work, have a look at the example READMEs in order.

### Examples

1. [*Load Rive File*](https://github.com/mjohnsullivan/rive-by-example/tree/main/web/01_load_animation) - demonstrates how to load a Rive file and show the first frame of an animation.

2. [*Looping Animation*](https://github.com/mjohnsullivan/rive-by-example/tree/main/web/02_looping_animation) - demonstrates how to continuously play a looping animation.

3. [*Mixing Animations*](https://github.com/mjohnsullivan/rive-by-example/tree/main/web/03_mixing_animations) - demonstrates how to mix different animations together.

4. *Coming soon ...*

5. [*React Component*](https://github.com/mjohnsullivan/rive-by-example/tree/main/web/05_react_component) - sample React component for playing Rive animations