以下是一个简单的例子,展示了如何使用 Flutter 中的 AnimationController 来控制 Rive 动画:

  1. 首先,需要在 pubspec.yaml 文件中添加依赖:
dependencies:
  rive: ^0.7.8+1
  1. 在 Flutter 中使用 Rive,需要先将 Rive 文件导入到项目中。可以使用 Rive 官方提供的工具 Rive2Flare 将 Rive 文件转换为 Flare 文件,然后使用 Flutter 中的 flare_flutter 插件加载 Flare 文件。

  2. 创建一个 AnimationController 对象,并在 initState() 方法中初始化它:

AnimationController _controller;

@override
void initState() {
  super.initState();
  _controller = AnimationController(
    vsync: this,
    duration: Duration(milliseconds: 500),
  );
}
  1. 在 build() 方法中创建一个 RiveAnimation.asset() 小部件,并将 AnimationController 对象传递给它:
@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: RiveAnimation.asset(
        'assets/rive_file.flr',
        animation: 'animation_name',
        fit: BoxFit.cover,
        controllers: [_controller],
      ),
    ),
  );
}
  1. 现在可以在需要时使用 AnimationController 的方法来控制动画了。例如,可以使用如下方法来开始、停止、暂停和恢复动画:
void startAnimation() {
  _controller.forward();
}

void stopAnimation() {
  _controller.stop();
}

void pauseAnimation() {
  _controller.pause();
}

void resumeAnimation() {
  _controller.forward();
}
  1. 如果想要在动画完成时执行某些操作,可以添加一个 AnimationStatusListener 来监听动画状态:
_controller.addStatusListener((status) {
  if (status == AnimationStatus.completed) {
    // 动画完成后执行的操作
  }
});
  1. 如果想要在动画开始或结束时执行某些操作,可以添加一个 AnimationControllerListener 来监听动画控制器的状态:
_controller.addListener(() {
  if (_controller.status == AnimationStatus.completed) {
    // 动画完成后执行的操作
  } else if (_controller.status == AnimationStatus.dismissed) {
    // 动画结束后执行的操作
  }
});

使用参数控制动画状态:

  • 'start': 动画开始
  • 'Finish': 动画结束
  • 'Bfinish': 动画倒放结束
  • 'Break': 动画暂停

代码示例:

void startAnimation() {
  _controller.forward(from: 0.0);
}

void finishAnimation() {
  _controller.forward(to: 1.0);
}

void bfinishAnimation() {
  _controller.reverse(from: 1.0);
}

void breakAnimation() {
  _controller.stop();
}

通过以上代码,您可以轻松地使用 AnimationController 控制 Rive 动画,并根据您的需求添加不同的参数,以实现更丰富的动画效果。

Flutter Rive 动画控制: 使用 AnimationController 实现动画参数控制

原文地址: https://www.cveoy.top/t/topic/obU4 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录