如何在onTap 上播放rive 动画？

Question

我很高兴 bcs 有 flare 包的简单解决方案，但不幸的是现在我有 .riv 格式，所以只有 rive 包适合我。

我看到的所有示例都是在屏幕加载后立即播放动画，但我需要它以功能（按钮、按下等）启动。


class Animation extends StatefulWidget {
  @override
  _AnimationState createState() => _AnimationState();
}

class _AnimationState extends State<Animation> {
  RiveAnimationController controller;

  @override
  void initState() {
    super.initState();
    controller = SimpleAnimation('Animation 1');
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: RiveAnimation.asset(
          'match.riv',
          controllers: [controller],
        ),
      ),
    );
  }
}

提前致谢

Answer 1

来自rive的官方文档，给SimpleAnimation多传一个参数

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;

  // Toggles between play and pause animation states
  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('Animation 1', autoplay: false);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RiveAnimation.network(
          'match.riv',
          controllers: [_controller],
          // Update the play state when the widget's initialized
          onInit: (_) => setState(() {}),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _togglePlay,
        tooltip: isPlaying ? 'Pause' : 'Play',
        child: Icon(
          isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }
}

如何在onTap 上播放rive 动画？

How to play rive animation onTap?

dart

flutter

rive