使用 Flutter 实现圆形显示动画
Flutter 中的圆形显示动画是什么?
圆形显示动画是一种动画类型，在许多 Android 应用程序中都可以看到，它通过添加动画来显示图像。在许多 Android 应用程序中，例如支付应用程序，当用户因付款而获得奖励时，会显示奖励并添加特定的动画。圆形动画就是通过这种方式实现的。
圆形显示动画的实现
我们将在 Flutter 中创建一个简单的应用程序来显示圆形显示动画。我们将创建一个按钮，点击该按钮时会显示动画。我们将按照分步指南在 Android 应用程序中实现 Toast 消息。
步骤 1:在 Android Studio 中创建一个新的 Flutter 项目
按照下图所示导航到 Android Studio。在下面的屏幕中，点击"新建项目"以创建一个新的 Flutter 项目。
点击"新建项目"后，您将看到以下屏幕。
在此屏幕中，您必须选择"Flutter 应用程序"，然后点击"下一步"，您将看到以下屏幕。
在此屏幕中，您必须指定项目名称然后点击"下一步"即可创建您的 Flutter 项目。
步骤 2:添加依赖项以在 Flutter 中使用圆形显示动画
要添加新的依赖项以在 Flutter 中使用圆形显示动画，请从左侧窗格导航到您的项目名称，然后导航到 pubspec.yaml 文件，并在 dev_dependencies 部分中添加以下依赖项以实现圆形显示动画。
dev_dependencies:
flutter_test:
sdk: flutter
circular_reveal_animation: ^2.0.1
添加依赖项后，我们还必须在项目中添加 assets 文件夹位置。要添加 assets 文件夹位置，请转到第 62 行，在 pubspec.yaml 文件中添加 assets 文件夹。
# 要将资源添加到您的应用程序，请添加一个 assets 部分，如下所示:
assets:
- assets/
在 pubspec.yaml 文件中添加上述代码后，只需点击右上角出现的 Pub get 选项即可安装依赖项。如果您看到 get Dependencies 选项，请点击它以安装所有依赖项。
步骤 3:在 Flutter 项目中添加图片
现在，由于我们将在显示效果后显示图片，因此必须在项目中添加图片。要添加图片，请复制图片。然后导航到您的项目，并在其中右键单击您的项目目录>新建>目录，并将其命名为 assets。然后将复制的图片粘贴到该目录中。请确保图片名称为 logo.png，因为我们在代码中指定图片时会使用相同的名称。
步骤 4:使用 main.dart 文件
导航到您的项目>lib>main.dart 文件，并向其中添加以下代码。代码中添加了注释，以便您详细了解。
import 'package:circular_reveal_animation/circular_reveal_animation.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
// 下面一行为我们的应用添加标题。
title: 'Flutter Demo',
// 下面一行为我们的应用指定主题数据
theme: ThemeData(
primarySwatch: Colors.blue,
),
// 下面一行调用我们的主页。
home: MyHomePage(),
// 下面一行禁用我们的调试检查模式横幅
debugShowCheckedModeBanner: false,
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
// 在下面一行创建动画控制器、动画和按钮文本的变量。
late AnimationController animationController;
late Animation<double> animation;
var buttonText = "Show Image";
@override
void initState() {
super.initState();
// 下面一行初始化动画控制器。
animationController = AnimationController(
vsync: this,
// 在下一行指定持续时间
duration: Duration(milliseconds: 1000),
);
// 在下面的行中创建要添加到图像上的动画。
animation = CurvedAnimation(
// 在下方指定父级和曲线的线上
parent: animationController,
curve: Curves.easeIn,
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
// 下面一行用于为我们的应用创建应用栏
appBar: AppBar(
// 指定应用栏中的文本
title: Text("Android Application"),
),
// 为其添加内边距。
body: Padding(
padding: const EdgeInsets.all(16.0),
// 将我们的列包裹到屏幕的中心。
child: Center(
child: Column(
// 将列对齐到下一行。
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
// 指定下一行主轴的大小。
mainAxisSize: MainAxisSize.min,
// 创建要显示在下一行的子项。
children: <Widget>[
// 在下面一行上创建圆形动画的文本。
const Text(
"Circular Reveal Animation in Android",
// 指定文本对齐方式、最大行数、文本样式
textAlign: TextAlign.center,
maxLines: 1,
style: TextStyle(
color: Colors.black,
fontSize: 20.0,
fontWeight: FontWeight.bold),
),
// 在下方创建一个大小合适的框。
const SizedBox(
height: 10,
),
// 在下一行创建圆形显示动画。
CircularRevealAnimation(
// 为下一行指定图片。
child: Image.asset('assets/logo.png'),
// 为下一行的图片添加动画。
animation: animation,
// 为下一行的图片添加中心偏移。
centerOffset: Offset(130, 100),
),
// 为图片添加尺寸框
const SizedBox(
height: 10,
),
// 添加升高的按钮来启动和停止动画
ElevatedButton(
// 为我们的按钮添加文本
child: Text(
// 在下面的行中指定按钮的文本和样式。
buttonText,
style: const TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
// 添加按下按钮
onPressed: () {
// 检查当前图像状态并为其设置动画。
if (animationController.status == AnimationStatus.forward ||
animationController.status ==
AnimationStatus.completed) {
// 反转图像的动画。
animationController.reverse();
// 更改下面一行的按钮文本。
setState(() {
buttonText = "Show Image";
});
} else {
// 更改下面一行的按钮文本。
setState(() {
buttonText = "Hide Image";
});
// 将动画控制器设置为下面一行的动画按钮。
animationController.forward();
}
}
)
],
),
),
),
);
}
}
说明 - 在上面的代码中，我们可以看到 main 方法，该方法调用了我们在下面创建的 MyApp 类，并将其作为无状态小部件。在这个无状态小部件中，我们创建了一个 build 方法，并在该方法中返回 Material 应用。在 Material 应用中，我们指定了应用标题、应用主题、需要显示的主页，并将调试检查模式横幅设置为 false。
之后，我们创建一个 Home Page 状态方法，该方法将扩展 Home Page 的状态。现在，在这个类中，我们为动画控制器、动画以及需要在按钮内显示的文本创建变量。
然后，我们通过调用 initstate 方法来初始化状态。在这个方法中，我们初始化了动画控制器和动画。
之后，我们创建一个 build 方法，并在该方法中指定应用栏并为其添加标题。之后，我们为屏幕的所有边缘添加了内边距。然后，我们将应用程序中的所有子组件添加到屏幕中央。在子组件内部，我们指定列。在此列中，我们创建不同的子组件，它们将以垂直方式对齐。在此列中，我们首先创建一个文本小部件来显示应用程序标题。
之后，我们创建一个大小合适的框小部件，用于在文本小部件和圆形显示动画小部件之间添加间隙。在此小部件之后，我们创建一个圆形显示动画小部件，在其中指定动画结束后要显示的图像。之后，我们再次添加大小合适的框。然后，我们创建一个提升按钮，我们将使用它来通过圆形显示动画显示和隐藏图像。在按钮的 onPressed 方法中，我们显示和隐藏图像。除此之外，我们还同时更新了按钮的文本。
添加上述代码后，现在只需点击顶部栏中的绿色图标即可在移动设备上运行我们的应用程序。
注意 - 确保您已连接到真实设备或模拟器。
结论
在以上教程中，我们学习了什么是 Android 中的圆形显示动画，以及如何使用 Flutter 在 Android 应用程序中使用该动画。
