mirror of
https://github.com/rive-app/rive-flutter.git
synced 2025-06-27 10:18:12 +08:00
Adding ability to control state machine.
This commit is contained in:
Luigi Rosso
67
example/lib/example_animation.dart
Normal file
67
example/lib/example_animation.dart
Normal file
@ -0,0 +1,67 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
import 'package:flutter/widgets.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() {
|
||||
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/dino.riv').then(
|
||||
(data) async {
|
||||
final file = RiveFile();
|
||||
|
||||
// Load the RiveFile from the binary data.
|
||||
if (file.import(data)) {
|
||||
// The artboard is the root of the animation and gets drawn in the
|
||||
// Rive widget.
|
||||
final artboard = file.mainArtboard;
|
||||
// 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('Run'));
|
||||
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,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
83
example/lib/example_state_machine.dart
Normal file
83
example/lib/example_state_machine.dart
Normal file
@ -0,0 +1,83 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
import 'package:flutter/widgets.dart';
|
||||
import 'package:rive/rive.dart';
|
||||
|
||||
class ExampleStateMachine extends StatefulWidget {
|
||||
const ExampleStateMachine({Key key}) : super(key: key);
|
||||
|
||||
@override
|
||||
_ExampleStateMachineState createState() => _ExampleStateMachineState();
|
||||
}
|
||||
|
||||
class _ExampleStateMachineState extends State<ExampleStateMachine> {
|
||||
void _togglePlay() {
|
||||
setState(() => _controller.isActive = !_controller.isActive);
|
||||
}
|
||||
|
||||
/// Tracks if the animation is playing by whether controller is running.
|
||||
bool get isPlaying => _controller?.isActive ?? false;
|
||||
|
||||
Artboard _riveArtboard;
|
||||
StateMachineController _controller;
|
||||
StateMachineInput<bool> _hoverInput;
|
||||
StateMachineInput<bool> _pressInput;
|
||||
|
||||
@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/rocket.riv').then(
|
||||
(data) async {
|
||||
final file = RiveFile();
|
||||
|
||||
// Load the RiveFile from the binary data.
|
||||
if (file.import(data)) {
|
||||
// The artboard is the root of the animation and gets drawn in the
|
||||
// Rive widget.
|
||||
final artboard = file.mainArtboard;
|
||||
var controller =
|
||||
StateMachineController.fromArtboard(artboard, 'Button');
|
||||
if (controller != null) {
|
||||
artboard.addController(controller);
|
||||
_hoverInput = controller.findInput('Hover');
|
||||
_pressInput = controller.findInput('Press');
|
||||
}
|
||||
setState(() => _riveArtboard = artboard);
|
||||
}
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
backgroundColor: Colors.grey,
|
||||
appBar: AppBar(
|
||||
title: const Text('State Machine Example'),
|
||||
),
|
||||
body: Center(
|
||||
child: _riveArtboard == null
|
||||
? const SizedBox()
|
||||
: MouseRegion(
|
||||
onEnter: (_) => _hoverInput.value = true,
|
||||
onExit: (_) => _hoverInput.value = false,
|
||||
child: GestureDetector(
|
||||
onTapDown: (_) => _pressInput.value = true,
|
||||
onTapCancel: () => _pressInput.value = false,
|
||||
onTapUp: (_) => _pressInput.value = false,
|
||||
child: SizedBox(
|
||||
width: 250,
|
||||
height: 250,
|
||||
child: Rive(
|
||||
artboard: _riveArtboard,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,77 +1,49 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
import 'package:rive/rive.dart';
|
||||
import 'package:rive_example/example_animation.dart';
|
||||
import 'package:rive_example/example_state_machine.dart';
|
||||
|
||||
void main() => runApp(MyApp());
|
||||
|
||||
class MyApp extends StatefulWidget {
|
||||
@override
|
||||
_MyAppState createState() => _MyAppState();
|
||||
}
|
||||
|
||||
class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return const MaterialApp(
|
||||
home: MyHomePage(),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class MyHomePage extends StatefulWidget {
|
||||
const MyHomePage({Key key}) : super(key: key);
|
||||
|
||||
@override
|
||||
_MyHomePageState createState() => _MyHomePageState();
|
||||
}
|
||||
|
||||
class _MyHomePageState extends State<MyHomePage> {
|
||||
void _togglePlay() {
|
||||
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 {
|
||||
final file = RiveFile();
|
||||
|
||||
// Load the RiveFile from the binary data.
|
||||
if (file.import(data)) {
|
||||
// The artboard is the root of the animation and gets drawn in the
|
||||
// Rive widget.
|
||||
final artboard = file.mainArtboard;
|
||||
// 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);
|
||||
}
|
||||
},
|
||||
);
|
||||
}
|
||||
void main() => runApp(MaterialApp(
|
||||
title: 'Navigation Basics',
|
||||
home: Home(),
|
||||
));
|
||||
|
||||
class Home extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: _riveArtboard == null
|
||||
? const SizedBox()
|
||||
: Rive(artboard: _riveArtboard),
|
||||
appBar: AppBar(
|
||||
title: const Text('Rive Examples'),
|
||||
),
|
||||
floatingActionButton: FloatingActionButton(
|
||||
onPressed: _togglePlay,
|
||||
tooltip: isPlaying ? 'Pause' : 'Play',
|
||||
child: Icon(
|
||||
isPlaying ? Icons.pause : Icons.play_arrow,
|
||||
body: Center(
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
ElevatedButton(
|
||||
child: const Text('Animation'),
|
||||
onPressed: () {
|
||||
Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute<void>(
|
||||
builder: (context) => const ExampleAnimation(),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
const SizedBox(
|
||||
height: 10,
|
||||
),
|
||||
ElevatedButton(
|
||||
child: const Text('State Machine'),
|
||||
onPressed: () {
|
||||
Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute<void>(
|
||||
builder: (context) => const ExampleStateMachine(),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user