mirror of
https://github.com/rive-app/rive-flutter.git
synced 2025-06-27 18:28:18 +08:00
Updates RiveAnimation with custom controllers
This commit is contained in:
@ -1,3 +1,7 @@
|
|||||||
|
## [0.7.18] - 2021-06-14 12:00:00
|
||||||
|
- Adds ability to pass controllers into RiveAnimation widgets
|
||||||
|
- Adds autoplay option to SimpleAnimation controller
|
||||||
|
|
||||||
## [0.7.17] - 2021-06-11 18:00:00
|
## [0.7.17] - 2021-06-11 18:00:00
|
||||||
- Exposes antialiasing option in Rive and RiveAnimation widgets.
|
- Exposes antialiasing option in Rive and RiveAnimation widgets.
|
||||||
|
|
||||||
|
@ -8,7 +8,7 @@ Runtime docs are available in [Rive's help center](https://help.rive.app/runtime
|
|||||||
|
|
||||||
```yaml
|
```yaml
|
||||||
dependencies:
|
dependencies:
|
||||||
rive: ^0.7.17
|
rive: ^0.7.18
|
||||||
```
|
```
|
||||||
|
|
||||||
## Quick Start
|
## Quick Start
|
||||||
|
@ -12,12 +12,11 @@ class _PlayPauseAnimationState extends State<PlayPauseAnimation> {
|
|||||||
// Controller for playback
|
// Controller for playback
|
||||||
late RiveAnimationController _controller;
|
late RiveAnimationController _controller;
|
||||||
|
|
||||||
// This will toggle between play and pause states for the animation
|
// Toggles between play and pause animation states
|
||||||
void _togglePlay() {
|
void _togglePlay() =>
|
||||||
setState(() => _controller.isActive = !_controller.isActive);
|
setState(() => _controller.isActive = !_controller.isActive);
|
||||||
}
|
|
||||||
|
|
||||||
/// Tracks if the animation is playing by whether controller is running.
|
/// Tracks if the animation is playing by whether controller is running
|
||||||
bool get isPlaying => _controller.isActive;
|
bool get isPlaying => _controller.isActive;
|
||||||
|
|
||||||
@override
|
@override
|
||||||
@ -33,9 +32,11 @@ class _PlayPauseAnimationState extends State<PlayPauseAnimation> {
|
|||||||
title: const Text('Animation Example'),
|
title: const Text('Animation Example'),
|
||||||
),
|
),
|
||||||
body: Center(
|
body: Center(
|
||||||
child: RiveControllerAnimation.network(
|
child: RiveAnimation.network(
|
||||||
'https://cdn.rive.app/animations/vehicles.riv',
|
'https://cdn.rive.app/animations/vehicles.riv',
|
||||||
controllers: [_controller],
|
controllers: [_controller],
|
||||||
|
// Update the play state when the widget's initialized
|
||||||
|
onInit: () => setState(() {}),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
floatingActionButton: FloatingActionButton(
|
floatingActionButton: FloatingActionButton(
|
||||||
|
@ -17,12 +17,21 @@ import 'package:rive/src/runtime_artboard.dart';
|
|||||||
class SimpleAnimation extends RiveAnimationController<RuntimeArtboard> {
|
class SimpleAnimation extends RiveAnimationController<RuntimeArtboard> {
|
||||||
LinearAnimationInstance? _instance;
|
LinearAnimationInstance? _instance;
|
||||||
|
|
||||||
|
/// Animation name
|
||||||
final String animationName;
|
final String animationName;
|
||||||
|
|
||||||
|
/// Stops the animation on the next apply
|
||||||
|
///
|
||||||
bool _stopOnNextApply = false;
|
bool _stopOnNextApply = false;
|
||||||
|
|
||||||
|
/// Pauses the animation when it's created
|
||||||
|
final bool autoplay;
|
||||||
|
|
||||||
|
/// Mix value for the animation, value between 0 and 1
|
||||||
double _mix;
|
double _mix;
|
||||||
|
|
||||||
// Controls the level of mix for the animation, clamped between 0 and 1
|
// Controls the level of mix for the animation, clamped between 0 and 1
|
||||||
SimpleAnimation(this.animationName, {double mix = 1})
|
SimpleAnimation(this.animationName, {double mix = 1, this.autoplay = true})
|
||||||
: _mix = mix.clamp(0, 1).toDouble();
|
: _mix = mix.clamp(0, 1).toDouble();
|
||||||
LinearAnimationInstance? get instance => _instance;
|
LinearAnimationInstance? get instance => _instance;
|
||||||
double get mix => _mix;
|
double get mix => _mix;
|
||||||
@ -51,7 +60,7 @@ class SimpleAnimation extends RiveAnimationController<RuntimeArtboard> {
|
|||||||
@override
|
@override
|
||||||
bool init(RuntimeArtboard artboard) {
|
bool init(RuntimeArtboard artboard) {
|
||||||
_instance = artboard.animationByName(animationName);
|
_instance = artboard.animationByName(animationName);
|
||||||
isActive = true;
|
isActive = autoplay;
|
||||||
return _instance != null;
|
return _instance != null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,7 +1,10 @@
|
|||||||
|
import 'dart:ui' show VoidCallback;
|
||||||
|
|
||||||
import 'package:flutter/widgets.dart';
|
import 'package:flutter/widgets.dart';
|
||||||
import 'package:rive/rive.dart';
|
import 'package:rive/rive.dart';
|
||||||
import 'package:rive/src/rive_core/artboard.dart';
|
import 'package:rive/src/rive_core/artboard.dart';
|
||||||
|
|
||||||
|
/// Specifies whether a source is from an asset bundle or http
|
||||||
enum _Source {
|
enum _Source {
|
||||||
asset,
|
asset,
|
||||||
network,
|
network,
|
||||||
@ -32,11 +35,18 @@ class RiveAnimation extends StatefulWidget {
|
|||||||
/// Alignment for the animation in the widget
|
/// Alignment for the animation in the widget
|
||||||
final Alignment? alignment;
|
final Alignment? alignment;
|
||||||
|
|
||||||
|
/// Widget displayed while the rive is loading
|
||||||
|
final Widget? placeHolder;
|
||||||
|
|
||||||
/// Enable/disable antialiasing when rendering
|
/// Enable/disable antialiasing when rendering
|
||||||
final bool antialiasing;
|
final bool antialiasing;
|
||||||
|
|
||||||
/// Widget displayed while the rive is loading
|
/// Controllers for instanced animations and state machines; use this
|
||||||
final Widget? placeHolder;
|
/// to directly control animation states instead of passing names.
|
||||||
|
final List<RiveAnimationController> controllers;
|
||||||
|
|
||||||
|
/// Callback fired when Riveanimation has initialized
|
||||||
|
final VoidCallback? onInit;
|
||||||
|
|
||||||
/// Creates a new RiveAnimation from an asset bundle
|
/// Creates a new RiveAnimation from an asset bundle
|
||||||
const RiveAnimation.asset(
|
const RiveAnimation.asset(
|
||||||
@ -48,6 +58,8 @@ class RiveAnimation extends StatefulWidget {
|
|||||||
this.alignment,
|
this.alignment,
|
||||||
this.placeHolder,
|
this.placeHolder,
|
||||||
this.antialiasing = true,
|
this.antialiasing = true,
|
||||||
|
this.controllers = const [],
|
||||||
|
this.onInit,
|
||||||
}) : src = _Source.asset;
|
}) : src = _Source.asset;
|
||||||
|
|
||||||
const RiveAnimation.network(
|
const RiveAnimation.network(
|
||||||
@ -59,6 +71,8 @@ class RiveAnimation extends StatefulWidget {
|
|||||||
this.alignment,
|
this.alignment,
|
||||||
this.placeHolder,
|
this.placeHolder,
|
||||||
this.antialiasing = true,
|
this.antialiasing = true,
|
||||||
|
this.controllers = const [],
|
||||||
|
this.onInit,
|
||||||
}) : src = _Source.network;
|
}) : src = _Source.network;
|
||||||
|
|
||||||
@override
|
@override
|
||||||
@ -83,7 +97,7 @@ class _RiveAnimationState extends State<RiveAnimation> {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/// Initializes the artboard, animation, and controller
|
/// Initializes the artboard, animations, state machines and controllers
|
||||||
void _init(RiveFile file) {
|
void _init(RiveFile file) {
|
||||||
final artboard = widget.artboard != null
|
final artboard = widget.artboard != null
|
||||||
? file.artboardByName(widget.artboard!)
|
? file.artboardByName(widget.artboard!)
|
||||||
@ -96,11 +110,11 @@ class _RiveAnimationState extends State<RiveAnimation> {
|
|||||||
throw FormatException('No animations in artboard ${artboard.name}');
|
throw FormatException('No animations in artboard ${artboard.name}');
|
||||||
}
|
}
|
||||||
|
|
||||||
// Create animations
|
// Create animations If there are no animations, state machines, or
|
||||||
// If there are no animations or state machines specified, select a default
|
// controller specified, select a default animation
|
||||||
// animation
|
final animationNames = widget.animations.isEmpty &&
|
||||||
final animationNames =
|
widget.stateMachines.isEmpty &&
|
||||||
widget.animations.isEmpty && widget.stateMachines.isEmpty
|
widget.controllers.isEmpty
|
||||||
? [artboard.animations.first.name]
|
? [artboard.animations.first.name]
|
||||||
: widget.animations;
|
: widget.animations;
|
||||||
|
|
||||||
@ -117,7 +131,13 @@ class _RiveAnimationState extends State<RiveAnimation> {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Add any user-created contollers
|
||||||
|
widget.controllers.forEach(artboard.addController);
|
||||||
|
|
||||||
setState(() => _artboard = artboard);
|
setState(() => _artboard = artboard);
|
||||||
|
|
||||||
|
// Call the onInit callback if provided
|
||||||
|
widget.onInit?.call();
|
||||||
}
|
}
|
||||||
|
|
||||||
@override
|
@override
|
||||||
|
@ -1,115 +0,0 @@
|
|||||||
import 'package:flutter/widgets.dart';
|
|
||||||
import 'package:rive/rive.dart';
|
|
||||||
import 'package:rive/src/rive_core/artboard.dart';
|
|
||||||
|
|
||||||
enum _Source {
|
|
||||||
asset,
|
|
||||||
network,
|
|
||||||
}
|
|
||||||
|
|
||||||
/// High level widget that plays an animation from a Rive file. If artboard or
|
|
||||||
/// animation are not specified, the default artboard and first animation fonund
|
|
||||||
/// within it are used.
|
|
||||||
class RiveControllerAnimation extends StatefulWidget {
|
|
||||||
/// The asset name or url
|
|
||||||
final String name;
|
|
||||||
|
|
||||||
/// The type of source used to retrieve the asset
|
|
||||||
final _Source src;
|
|
||||||
|
|
||||||
/// The name of the artboard to use; default artboard if not specified
|
|
||||||
final String? artboard;
|
|
||||||
|
|
||||||
/// List of Rive controllers to attach
|
|
||||||
final List<RiveAnimationController> controllers;
|
|
||||||
|
|
||||||
/// Fit for the animation in the widget
|
|
||||||
final BoxFit? fit;
|
|
||||||
|
|
||||||
/// Alignment for the animation in the widget
|
|
||||||
final Alignment? alignment;
|
|
||||||
|
|
||||||
/// Enable/disable antialiasing when rendering
|
|
||||||
final bool antialiasing;
|
|
||||||
|
|
||||||
/// Widget displayed while the rive is loading
|
|
||||||
final Widget? placeHolder;
|
|
||||||
|
|
||||||
/// Creates a new RiveControllerAnimation from an asset bundle
|
|
||||||
const RiveControllerAnimation.asset(
|
|
||||||
this.name, {
|
|
||||||
this.artboard,
|
|
||||||
this.controllers = const [],
|
|
||||||
this.fit,
|
|
||||||
this.alignment,
|
|
||||||
this.placeHolder,
|
|
||||||
this.antialiasing = true,
|
|
||||||
}) : src = _Source.asset;
|
|
||||||
|
|
||||||
const RiveControllerAnimation.network(
|
|
||||||
this.name, {
|
|
||||||
this.artboard,
|
|
||||||
this.controllers = const [],
|
|
||||||
this.fit,
|
|
||||||
this.alignment,
|
|
||||||
this.placeHolder,
|
|
||||||
this.antialiasing = true,
|
|
||||||
}) : src = _Source.network;
|
|
||||||
|
|
||||||
@override
|
|
||||||
_RiveControllerAnimationState createState() =>
|
|
||||||
_RiveControllerAnimationState();
|
|
||||||
}
|
|
||||||
|
|
||||||
class _RiveControllerAnimationState extends State<RiveControllerAnimation> {
|
|
||||||
/// Rive controller
|
|
||||||
final _controllers = <RiveAnimationController>[];
|
|
||||||
|
|
||||||
/// Active artboard
|
|
||||||
Artboard? _artboard;
|
|
||||||
|
|
||||||
@override
|
|
||||||
void initState() {
|
|
||||||
super.initState();
|
|
||||||
|
|
||||||
if (widget.src == _Source.asset) {
|
|
||||||
RiveFile.asset(widget.name).then(_init);
|
|
||||||
} else if (widget.src == _Source.network) {
|
|
||||||
RiveFile.network(widget.name).then(_init);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/// Initializes the artboard, animation, and controller
|
|
||||||
void _init(RiveFile file) {
|
|
||||||
final artboard = widget.artboard != null
|
|
||||||
? file.artboardByName(widget.artboard!)
|
|
||||||
: file.mainArtboard;
|
|
||||||
|
|
||||||
if (artboard == null) {
|
|
||||||
throw const FormatException('Unable to load artboard');
|
|
||||||
}
|
|
||||||
if (artboard.animations.isEmpty) {
|
|
||||||
throw FormatException('No animations in artboard ${artboard.name}');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Attach each controller to the artboard
|
|
||||||
widget.controllers.forEach(artboard.addController);
|
|
||||||
setState(() => _artboard = artboard);
|
|
||||||
}
|
|
||||||
|
|
||||||
@override
|
|
||||||
void dispose() {
|
|
||||||
_controllers.forEach((c) => c.dispose());
|
|
||||||
super.dispose();
|
|
||||||
}
|
|
||||||
|
|
||||||
@override
|
|
||||||
Widget build(BuildContext context) => _artboard != null
|
|
||||||
? Rive(
|
|
||||||
artboard: _artboard!,
|
|
||||||
fit: widget.fit,
|
|
||||||
alignment: widget.alignment,
|
|
||||||
antialiasing: widget.antialiasing,
|
|
||||||
)
|
|
||||||
: widget.placeHolder ?? const SizedBox();
|
|
||||||
}
|
|
@ -1,6 +1,6 @@
|
|||||||
name: rive
|
name: rive
|
||||||
description: Rive 2 Flutter Runtime. This package provides runtime functionality for playing back and interacting with animations built with the Rive editor available at https://rive.app.
|
description: Rive 2 Flutter Runtime. This package provides runtime functionality for playing back and interacting with animations built with the Rive editor available at https://rive.app.
|
||||||
version: 0.7.17
|
version: 0.7.18
|
||||||
repository: https://github.com/rive-app/rive-flutter
|
repository: https://github.com/rive-app/rive-flutter
|
||||||
homepage: https://rive.app
|
homepage: https://rive.app
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user