数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚学
法律学使用 Flutter 实现圆形揭示动画
什么是 Flutter 中的圆形揭示动画？
圆形揭示是一种动画类型，在许多 Android 应用程序中可以看到，当图像以添加动画的方式显示时。在许多 Android 应用程序中，例如支付应用程序，当用户因付款而获得任何奖励时，奖励会以添加特定动画的方式显示。这样就实现了圆形动画。
圆形揭示动画的实现
我们将创建一个简单的应用程序来在 Flutter 中显示圆形揭示动画。我们将创建一个按钮，点击该按钮，我们将对我们的图像进行动画处理。我们将按照分步指南在 Android 应用程序中实现吐司消息。
步骤 1：在 Android Studio 中创建新的 Flutter 项目
导航到 Android Studio，如下面的屏幕所示。在下面的屏幕中，点击“新建项目”以创建一个新的 Flutter 项目。
点击“新建项目”后，您将看到下面的屏幕。
在此屏幕中，您必须选择 Flutter Application，然后点击“下一步”，您将看到下面的屏幕。
在此屏幕中，您必须指定项目名称，然后只需点击“下一步”即可创建新的 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 文件夹。
# To add assets to your application, add an assets section, like this: assets: - assets/
在 pubspec.yaml 文件中添加上述代码后。只需点击右上角出现的“Pub get”选项即可安装依赖项。如果您看到“获取依赖项”选项，则点击它以安装所有依赖项。
步骤 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(
// on below line adding title for our application.
title: 'Flutter Demo',
// on below line specifying theme data for our application
theme: ThemeData(
primarySwatch: Colors.blue,
),
// on below line calling our home page.
home: MyHomePage(),
// on below line disabling our debug check mode banner
debugShowCheckedModeBanner: false,
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
// on below line creating variables for animation controller, animation and button text.
late AnimationController animationController;
late Animation<double> animation;
var buttonText = "Show Image";
@override
void initState() {
super.initState();
// on below line initializing animation controller.
animationController = AnimationController(
vsync: this,
// on below line specifying duration
duration: Duration(milliseconds: 1000),
);
// on below line creating our animation to be added on image.
animation = CurvedAnimation(
// on below line specifying parent and curve for it
parent: animationController,
curve: Curves.easeIn,
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
// on below line creating app bar for our app
appBar: AppBar(
// specifying text in our app bar
title: Text("Android Application"),
),
// adding padding for it.
body: Padding(
padding: const EdgeInsets.all(16.0),
// wrapping our column to center of screen.
child: Center(
child: Column(
// aligning column on below line.
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
// specifying main axis size on below line.
mainAxisSize: MainAxisSize.min,
// creating childrens to be displayed on below line.
children: <Widget>[
// creating a text for circular animation on below line.
const Text(
"Circular Reveal Animation in Android",
// specifying text alignment, max lines, style for our text
textAlign: TextAlign.center,
maxLines: 1,
style: TextStyle(
color: Colors.black,
fontSize: 20.0,
fontWeight: FontWeight.bold),
),
// creating a sized box on below line.
const SizedBox(
height: 10,
),
// creating a circular reveal animation on below line.
CircularRevealAnimation(
// specifying image for it on below line.
child: Image.asset('assets/logo.png'),
// adding animation for image on below line.
animation: animation,
// adding center offset for our image on below line.
centerOffset: Offset(130, 100),
),
// adding sized box for image
const SizedBox(
height: 10,
),
// adding elevated button to start and stop our animation
ElevatedButton(
// adding text for our button
child: Text(
// on below line specifying button text and style for our button.
buttonText,
style: const TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
// adding on pressed for our button
onPressed: () {
// checking for current image state and setting animation for it.
if (animationController.status == AnimationStatus.forward ||
animationController.status ==
AnimationStatus.completed) {
// reversing the animation for image.
animationController.reverse();
// changing the button text on below line.
setState(() {
buttonText = "Show Image";
});
} else {
// changing the button text on below line.
setState(() {
buttonText = "Hide Image";
});
// setting animation controller to animated button on below line.
animationController.forward();
}
}
)
],
),
),
),
);
}
}
说明 - 在上面的代码中，我们可以看到 main 方法，在该方法中，我们调用了我们下面创建的 MyApp 类作为无状态小部件。在此无状态小部件中，我们创建了一个 build 方法，在其中我们返回我们的 material app。在 material app 中，我们指定了应用程序标题、应用程序主题、要显示的主页以及调试检查模式横幅为 false。
之后，我们创建了一个 Home Page 状态方法，它将扩展 Home Page 的状态。现在，在此类中，我们为动画控制器、动画以及必须在按钮中显示的文本创建了变量。
然后，我们通过调用 initstate 方法初始化我们的状态。在此方法中，我们初始化了我们的动画控制器和动画。
之后，我们创建了一个 build 方法，在其中我们指定了我们的 app bar 并为其添加了标题。之后，我们从所有侧面为屏幕添加了填充。然后，我们将应用程序中的所有子项添加到屏幕的中心。在其中，我们指定了列。在此列中，我们创建了将在垂直方向上对齐的不同子项。在此列中，我们首先创建一个文本小部件以显示应用程序标题。
之后，我们创建了一个 sized box 小部件以在文本小部件和圆形揭示动画小部件之间添加间隙。在此小部件之后，我们创建了一个圆形揭示动画小部件，在其中我们指定了动画后必须显示的图像。之后，我们再次添加了 sized box。然后，我们创建了一个 elevated button，我们将使用它通过圆形揭示动画显示和隐藏我们的图像。在按钮的 onPressed 方法中，我们显示和隐藏我们的图像。同时，我们也在更新按钮的文本。
添加上述代码后，现在我们只需点击顶部栏中的绿色图标即可在移动设备上运行我们的应用程序。
注意 - 确保您已连接到您的真实设备或模拟器。
结论
在上面的教程中，我们学习了什么是 Android 中的圆形揭示动画，以及如何使用 Flutter 在 Android 应用程序中使用该动画。
701 次查看
