WIP on simplifying controller use

This commit is contained in:
matt Sullivan
2021-06-11 18:45:57 -07:00
parent c751bd7d41
commit 7d82d06c79
8 changed files with 190 additions and 102 deletions

View File

@ -1,67 +0,0 @@
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:rive/rive.dart';
class ExampleAnimation extends StatefulWidget {
const ExampleAnimation({Key? key}) : super(key: key);
@override
_ExampleAnimationState createState() => _ExampleAnimationState();
}
class _ExampleAnimationState extends State<ExampleAnimation> {
void _togglePlay() {
if (_controller == null) {
return;
}
setState(() => _controller!.isActive = !_controller!.isActive);
}
/// Tracks if the animation is playing by whether controller is running.
bool get isPlaying => _controller?.isActive ?? false;
Artboard? _riveArtboard;
RiveAnimationController? _controller;
@override
void initState() {
super.initState();
// Load the animation file from the bundle, note that you could also
// download this. The RiveFile just expects a list of bytes.
rootBundle.load('assets/off_road_car.riv').then(
(data) async {
// Load the RiveFile from the binary data.
final file = RiveFile.import(data);
// The artboard is the root of the animation and gets drawn in the
// Rive widget.
final artboard = file.mainArtboard.instance();
// Add a controller to play back a known animation on the main/default
// artboard. We store a reference to it so we can toggle playback.
artboard.addController(_controller = SimpleAnimation('idle'));
setState(() => _riveArtboard = artboard);
},
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Animation Example'),
),
body: Center(
child: _riveArtboard == null
? const SizedBox()
: Rive(artboard: _riveArtboard!),
),
floatingActionButton: FloatingActionButton(
onPressed: _togglePlay,
tooltip: isPlaying ? 'Pause' : 'Play',
child: Icon(
isPlaying ? Icons.pause : Icons.play_arrow,
),
),
);
}
}

View File

@ -1,5 +1,5 @@
import 'package:flutter/material.dart';
import 'package:rive_example/example_animation.dart';
import 'package:rive_example/play_pause_animation.dart';
import 'package:rive_example/example_state_machine.dart';
import 'package:rive_example/liquid_download.dart';
import 'package:rive_example/little_machine.dart';
@ -42,7 +42,7 @@ class Home extends StatelessWidget {
Navigator.push(
context,
MaterialPageRoute<void>(
builder: (context) => const ExampleAnimation(),
builder: (context) => const PlayPauseAnimation(),
),
);
},

View File

@ -0,0 +1,50 @@
import 'package:flutter/material.dart';
import 'package:rive/rive.dart';
class PlayPauseAnimation extends StatefulWidget {
const PlayPauseAnimation({Key? key}) : super(key: key);
@override
_PlayPauseAnimationState createState() => _PlayPauseAnimationState();
}
class _PlayPauseAnimationState extends State<PlayPauseAnimation> {
// Controller for playback
late RiveAnimationController _controller;
// This will toggle between play and pause states for the animation
void _togglePlay() {
setState(() => _controller.isActive = !_controller.isActive);
}
/// Tracks if the animation is playing by whether controller is running.
bool get isPlaying => _controller.isActive;
@override
void initState() {
super.initState();
_controller = SimpleAnimation('idle');
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Animation Example'),
),
body: Center(
child: RiveControllerAnimation.network(
'https://cdn.rive.app/animations/vehicles.riv',
controllers: [_controller],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _togglePlay,
tooltip: isPlaying ? 'Pause' : 'Play',
child: Icon(
isPlaying ? Icons.pause : Icons.play_arrow,
),
),
);
}
}