Flutter 使用 Rive 动画库实现起飞、飞行、降落和行走动画
首先,需要在 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 方法实现了一些延时操作。注意,这里的动画状态名称需要根据实际情况进行调整。
原文地址: https://www.cveoy.top/t/topic/ob9q 著作权归作者所有。请勿转载和采集!