資料結構
網路
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 次檢視
