diff --git a/CHANGELOG.md b/CHANGELOG.md index 611711b..b697c8a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,8 @@ ## [0.7.18] - 2021-06-14 12:00:00 - Adds ability to pass controllers into RiveAnimation widgets - Adds autoplay option to SimpleAnimation controller +- Adds one-shot animation contoller +- Updates examples ## [0.7.17] - 2021-06-11 18:00:00 - Exposes antialiasing option in Rive and RiveAnimation widgets. diff --git a/README.md b/README.md index 74c6d47..3ba7df2 100644 --- a/README.md +++ b/README.md @@ -98,6 +98,63 @@ class _PlayPauseAnimationState extends State { } ``` +Play a one-shot animation repeatedly on demand + +```dart +/// Demonstrates playing a one-shot animation on demand + +import 'package:flutter/material.dart'; +import 'package:rive/rive.dart'; + +class PlayOneShotAnimation extends StatefulWidget { + const PlayOneShotAnimation({Key? key}) : super(key: key); + + @override + _PlayOneShotAnimationState createState() => _PlayOneShotAnimationState(); +} + +class _PlayOneShotAnimationState extends State { + /// Controller for playback + late RiveAnimationController _controller; + + /// Is the animation currently playing? + bool _isPlaying = false; + + @override + void initState() { + super.initState(); + _controller = OnShotAnimation( + 'bounce', + autoplay: false, + onStop: () => setState(() => _isPlaying = false), + onStart: () => setState(() => _isPlaying = true), + ); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar( + title: const Text('One-Shot Example'), + ), + body: Center( + child: RiveAnimation.network( + 'https://cdn.rive.app/animations/vehicles.riv', + animations: const ['idle', 'curves'], + controllers: [_controller], + ), + ), + floatingActionButton: FloatingActionButton( + // disable the button while playing the animation + onPressed: () => _isPlaying ? null : _controller.isActive = true, + tooltip: 'Play', + child: const Icon(Icons.arrow_upward), + ), + ); + } +} +``` + ## Antialiasing If you want to disable antialiasing (usually for performance reasons), you can set `antialiasing` to `false` on the `Rive` and `RiveAnimation` widgets. diff --git a/example/lib/play_one_shot_animation.dart b/example/lib/play_one_shot_animation.dart index a24080e..0e9b392 100644 --- a/example/lib/play_one_shot_animation.dart +++ b/example/lib/play_one_shot_animation.dart @@ -1,4 +1,4 @@ -/// Demonstrates play a one-shot animation on demand +/// Demonstrates playing a one-shot animation on demand import 'package:flutter/material.dart'; import 'package:rive/rive.dart'; @@ -36,7 +36,7 @@ class _PlayOneShotAnimationState extends State { ), body: Center( child: RiveAnimation.network( - 'https://cdn.rive.app/vehicles.riv', + 'https://cdn.rive.app/animations/vehicles.riv', animations: const ['idle', 'curves'], controllers: [_controller], ),