首先,需要在 pubspec.yaml 文件中添加 rive_flutter 插件。

然后,可以使用 RiveAnimationController 控制动画状态,根据需要在 onTap 回调方法中设置不同的状态。

代码示例:

import 'package:flutter/material.dart';
import 'package:rive_flutter/rive_flutter.dart';

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  RiveAnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = SimpleAnimation('Idle');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animation Controller'),
      ),
      body: Center(
        child: RiveAnimation.asset(
          'assets/birds.riv',
          controllers: [_controller],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _controller.isActive = true;
          _controller.play('起飞');
          Future.delayed(Duration(seconds: 2), () {
            _controller.play('保持飞翔');
            Future.delayed(Duration(seconds: 2), () {
              _controller.play('降落');
              Future.delayed(Duration(seconds: 2), () {
                _controller.play('行走');
              });
            });
          });
        },
        child: Icon(Icons.play_arrow),
      ),
    );
  }
}

在这个示例中,我们创建了一个 RiveAnimationController 对象,将其传递给 RiveAnimation 小部件的 controllers 属性。在 onTap 回调方法中,我们设置了不同的状态,并使用 Future.delayed 方法实现了一些延时操作。注意,这里的动画状态名称需要根据实际情况进行调整。

Flutter 使用 Rive 动画库实现起飞、飞行、降落和行走动画

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

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