Flutter組合動畫學習

如何使用動畫控制器和動畫來創建一個簡單的動畫效果。具體來說，它通過一個 `AnimationController` 來控制兩個動畫，一個用于旋轉，一個用于繪制。

前置知識點學習

SingleTickerProviderStateMixin

`SingleTickerProviderStateMixin` 是 Flutter 中一個常用的混入（mixin），用于提供 `Ticker` 對象的簡單實現。`Ticker` 是動畫時間驅動的核心組件，能夠在每一幀時調用回調方法。`SingleTickerProviderStateMixin` 通常用于需要一個 `AnimationController` 的 `State` 類中。

關鍵點

`Ticker`：它是一個計時器，在每一幀調用一個回調。用于驅動動畫。

`AnimationController`：依賴于 `Ticker` 來更新動畫的狀態。`AnimationController` 需要一個 `TickerProvider` 來提供 `Ticker`。

`SingleTickerProviderStateMixin`：提供一個 `Ticker`，適用于僅需要一個 `Ticker` 的動畫場景。

代碼示例

以下是一個簡單的例子，展示如何在 `State` 類中使用 `SingleTickerProviderStateMixin` 來創建一個動畫：

import 'package:flutter/material.dart';class MyAnimatedWidget2 extends StatefulWidget {const MyAnimatedWidget2({super.key});@override_MyAnimatedPageState createState() {return _MyAnimatedPageState();}
}class _MyAnimatedPageState extends State<MyAnimatedWidget2>with SingleTickerProviderStateMixin {late AnimationController _controller;late Animation<double> _animation;@overridevoid initState() {super.initState();// 初始化 AnimationController_controller = AnimationController(vsync: this,duration: const Duration(seconds: 2),);// 定義一個簡單的補間動畫（從 0 到 1）_animation = Tween<double>(begin: 0, end: 1).animate(_controller);// 啟動動畫_controller.forward();}@overridevoid dispose() {// 釋放資源_controller.dispose();super.dispose();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("Simple Animation"),),body: Center(child: AnimatedBuilder(animation: _animation,builder: (context, child) {return Opacity(opacity: _animation.value,child: Container(width: 200,height: 200,color: Colors.blue,),);},),),);}
}

### 解釋

`with SingleTickerProviderStateMixin`: 這個混入使得 `_MyHomePageState` 類能夠作為 `TickerProvider` 使用，提供給 `AnimationController` 使用。

`vsync: this`: 這里的 `vsync` 參數指定了 `TickerProvider`，通過 `SingleTickerProviderStateMixin`，`this` 就是當前的 `State`，因此可以直接使用。

`AnimationController`: 負責管理動畫的狀態和時間線。通過 `forward()`、`reverse()` 等方法來控制動畫的播放。

`Tween` 和 `Animation`: `Tween` 定義了動畫的值范圍，而 `Animation` 是驅動這個值變化的實際對象。

`AnimatedBuilder`: 用于構建依賴于動畫的 UI，每次動畫狀態改變時都會重新構建。

通過 `SingleTickerProviderStateMixin`，你可以輕松地在 Flutter 中實現簡單的動畫效果，而不必手動管理 `Ticker` 的生命周期。對于需要

總結

`SingleTickerProviderStateMixin` 是一個便捷的工具，用于實現需要單個 `Ticker` 的動畫場景。

Opacity

在 Flutter 中，`Opacity` 是一個用于控制子組件透明度的控件。通過調整透明度，你可以使一個組件部分或完全透明。這在構建具有視覺層次和動態效果的用戶界面時非常有用。

基本用法

`Opacity` 小部件接受一個 `opacity` 參數，該參數是一個 `double` 類型的值，范圍從 0.0 到 1.0：

`0.0` 表示完全透明（不可見）。

`1.0` 表示完全不透明（可見）。

示例

import 'package:flutter/material.dart';class OpacityExample extends StatelessWidget {const OpacityExample({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('Opacity Example'),),body: Center(child: Opacity(opacity: 0.5,child: Container(width: 100,height: 100,color: Colors.blue,),),),);}
}

關鍵點

1.性能考慮：`Opacity` 是一個相對簡單的控件，但在某些情況下可能會影響性能，特別是當它包裹著一個復雜的子組件時。對于簡單的顏色變化，使用 `Colors` 的 `withOpacity` 方法可能更高效。

2.動畫效果：與 `AnimationController` 和 `AnimatedBuilder` 配合使用，可以創建平滑的透明度動畫。例如，將 `Opacity` 結合 `Tween` 和 `Animation` 來實現淡入淡出效果。

3.子組件屬性：`Opacity` 影響其子組件的可見性，但它不會改變子組件的布局特性。即使完全透明，子組件仍然占據布局空間。

4.替代方法：在某些情況下，`FadeTransition` 可能是更好的選擇，特別是在需要動畫時。`FadeTransition` 專門用于處理透明度動畫，并直接與 `Animation` 對象集成。

?使用場景

視覺效果：在創建具有層次的 UI 時，使用透明度來突出顯示或淡化特定元素。

動畫：在創建淡入淡出效果時，使用 `Opacity` 結合動畫控制器。

動態 UI：在響應用戶交互時，通過透明度變化來反饋狀態變化。

通過靈活運用 `Opacity`，你可以在 Flutter 應用中創建豐富且動態的視覺效果。

RotationTransition

`RotationTransition` 是 Flutter 中的一個動畫小部件，用于在一段時間內對其子組件應用旋轉動畫。它是構建動畫的一種便捷方式，特別適合需要對組件進行旋轉效果的場景。

主要屬性

`turns`: 這是一個 `Animation` 類型的屬性，定義了旋轉的角度。角度是以圈（revolution）為單位的，比如 0.25 表示旋轉 90 度（即四分之一圈），1.0 表示旋轉 360 度（即一整圈）。

`child`: 需要旋轉的子組件。`RotationTransition` 將對這個組件施加旋轉效果。

?使用方法

`RotationTransition` 通常與 `AnimationController` 和 `Tween` 一起使用。`AnimationController` 用于控制動畫的時長和播放狀態，而 `Tween` 用于定義動畫的起始和結束值。

示例

以下是一個簡單的示例，展示如何使用 `RotationTransition` 實現一個簡單的旋轉動畫：

import 'package:flutter/material.dart';class RotationTransitionExample extends StatefulWidget {const RotationTransitionExample({super.key});@override_RotationTransitionExampleState createState() {return _RotationTransitionExampleState();}
}class _RotationTransitionExampleState extends State<RotationTransitionExample>with SingleTickerProviderStateMixin {late AnimationController _controller;@overridevoid initState() {super.initState();_controller = AnimationController(vsync: this,duration: const Duration(seconds: 2),)..repeat();}@overridevoid dispose() {_controller.dispose();super.dispose();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('RotationTransition Example'),),body: Center(child: RotationTransition(turns: _controller,child: Container(width: 100.0,height: 100.0,color: Colors.blue,),),),);}
}

解釋

`AnimationController`: 控制動畫的時長和播放方式。在 `initState` 中初始化，并設置為循環播放。

`RotationTransition`: 使用 `AnimationController` 的值作為 `turns` 屬性。這個值從 0.0 到 1.0 不斷變化，實現旋轉效果。

`child`: 被旋轉的組件，在這個例子中是一個藍色的 `Container`。

?使用場景

旋轉圖標或按鈕：可以用來制作旋轉加載指示器、旋轉按鈕等。

動態效果：在用戶交互時，通過旋轉來提供視覺反饋。

動畫過渡：在組件狀態變化時，使用旋轉動畫增強用戶體驗。

通過使用 `RotationTransition`，你可以輕松地在 Flutter 應用中實現旋轉動畫效果，增強應用的動態交互體驗。

Tween

在 Flutter 中，`Tween` 是動畫框架中一個核心組件，用于定義從一個值到另一個值的插值（interpolation）。它提供了一種簡單的方式來指定動畫的起始值和結束值，并在動畫過程中計算這些值之間的中間值。

主要功能

`Tween` 的主要功能是生成一系列的值，這些值在動畫的生命周期內從起始值逐漸變化到結束值。這對于創建平滑的動畫效果非常重要。

基本屬性

`begin`: 動畫的起始值。

`end`: 動畫的結束值。

工作原理

`Tween` 通過一個 `Animation` 對象（通常是 `Animation`）來驅動，其 `value` 屬性在 0.0 到 1.0 之間變化。

`Tween` 的 `lerp(double t)` 方法用于計算動畫的當前值，其中 `t` 是 `Animation` 的當前進度。

常見使用場景

1.簡單的數值動畫: 使用 `Tween` 在兩個數值之間插值。

2.顏色動畫: 使用 `ColorTween` 在兩種顏色之間過渡。

3.尺寸和位置動畫: 使用 `SizeTween` 或 `RectTween` 在不同的尺寸或位置之間插值。

示例代碼

以下是一個簡單的例子，展示如何使用 `Tween` 和 `AnimationController` 創建一個從 0 到 300 的動畫：

import 'package:flutter/material.dart';class TweenExample extends StatefulWidget {const TweenExample({super.key});@override_TweenExampleState createState() {return _TweenExampleState();}
}class _TweenExampleState extends State<TweenExample>with SingleTickerProviderStateMixin {late AnimationController _controller;late Animation<double> _animation;@overridevoid initState() {super.initState();_controller = AnimationController(duration: const Duration(seconds: 2),vsync: this,);// 定義一個 Tween 從 0 到 300_animation = Tween<double>(begin: 0, end: 300).animate(_controller)..addListener(() {setState(() {});});// 啟動動畫_controller.forward();}@overridevoid dispose() {_controller.dispose();super.dispose();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('Tween Example'),),body: Center(child: Container(width: _animation.value,height: _animation.value,color: Colors.blue,),),);}
}

解釋

`AnimationController`: 控制動畫的時長和進度。

`Tween(begin: 0, end: 300)`: 定義了一個從 0 到 300 的插值。

`animate(_controller)`: 將 `Tween` 連接到 `AnimationController`，以便在動畫進度更改時計算當前值。

`addListener`: 每當動畫的值改變時，重新構建 UI。

Paint

在 Flutter 中，`Paint` 是一個用于配置繪圖操作的類。它包含了關于如何繪制圖形、文本和圖像的詳細信息。`Paint` 可以用來指定顏色、樣式、陰影、混合模式等屬性，是自定義繪制的核心工具之一。

基本屬性

`Paint` 有許多屬性可以配置繪圖行為，以下是一些常用的屬性：

`color`: 設置繪制內容的顏色。

`style`: 定義繪制的風格，可以是 `PaintingStyle.fill`（填充）或 `PaintingStyle.stroke`（描邊）。

`strokeWidth`: 描邊的寬度，僅在 `style` 為 `stroke` 時有效。

`blendMode`: 定義顏色如何與現有的繪制內容混合。

`shader`: 用于漸變或復雜的著色效果。

`maskFilter`: 用于模糊和其他效果。

`filterQuality`: 定義圖片的質量（如在縮放時）。

`isAntiAlias`: 是否對繪制進行抗鋸齒處理。

`strokeCap`: 描邊的末端形狀，可以是 `StrokeCap.round`、`StrokeCap.butt`、或 `StrokeCap.square`。

`strokeJoin`: 描邊的連接方式，可以是 `StrokeJoin.miter`、`StrokeJoin.round`、或 `StrokeJoin.bevel`。

使用場景

`Paint` 通常與 `Canvas` 結合使用，通過 `CustomPainter` 來實現自定義繪制。`CustomPainter` 提供了兩個主要方法：`paint(Canvas, Size)` 和 `shouldRepaint(CustomPainter oldDelegate)`。

代碼示例

import 'package:flutter/material.dart';
class CirclePainter extends CustomPainter {@overridevoid paint(Canvas canvas, Size size) {final paint = Paint()..color = Colors.blue..style = PaintingStyle.fill; // 濉厖鏍峰紡final center = Offset(size.width / 2, size.height / 2);final radius = size.width / 4;canvas.drawCircle(center, radius, paint);}@overridebool shouldRepaint(CustomPainter oldDelegate) => false;
}
class PaintExample extends StatelessWidget {const PaintExample({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('Paint Example'),),body: Center(child: CustomPaint(size: const Size(200, 200),painter: CirclePainter(),),),);}
}

解釋

`CustomPainter`: 一個抽象類，用于自定義繪制。通過實現 `paint` 方法來定義繪制邏輯。

`Canvas`: 提供了用于繪制的基本操作，比如 `drawCircle`、`drawRect`、`drawPath` 等。

`Paint`: 配置繪制操作的細節，比如顏色和樣式。

`CustomPaint`: 一個小部件，用于在 Flutter UI 中展示自定義繪制的內容。

CustomPaint

`CustomPaint` 是 Flutter 中的一個小部件，用于在屏幕上繪制自定義圖形。通過結合 `CustomPainter` 類，`CustomPaint` 可以實現復雜的繪制邏輯。

主要組成部分

1.`CustomPainter`: 一個抽象類，你需要繼承并實現它的 `paint` 方法來定義繪制邏輯。`CustomPainter` 是 `CustomPaint` 的核心部分。

2.`CustomPaint` 小部件: 它包含一個 `painter` 屬性，該屬性接收一個 `CustomPainter`

屬性

`painter`: 一個 `CustomPainter` 對象，負責繪制主要內容。

`foregroundPainter`: 類似于 `painter`，但繪制在子組件的前景（在子組件上面）。

`child`: 可選的子組件，當需要在自定義繪制的背景或前景上疊加組件時使用。

`size`: 指定 `CustomPaint` 的大小。如果未設置，將會使用子組件的大小。

示例

以下是一個使用 `CustomPaint` 繪制簡單圖形的示例：

import 'package:flutter/material.dart';class MyPainter extends CustomPainter {@overridevoid paint(Canvas canvas, Size size) {final paint = Paint()..color = Colors.blue..style = PaintingStyle.fill;// 繪制一個圓形final circleCenter = Offset(size.width / 2, size.height / 2);final circleRadius = size.width / 4;canvas.drawCircle(circleCenter, circleRadius, paint);// 繪制一個矩形final rect = Rect.fromLTWH(50, 50, size.width - 100, size.height - 100);paint.color = Colors.red;canvas.drawRect(rect, paint);}@overridebool shouldRepaint(CustomPainter oldDelegate) => false;
}class CustomPaintExample extends StatelessWidget {const CustomPaintExample({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('CustomPaint Example'),),body: Center(child: CustomPaint(size: const Size(200, 200),painter: MyPainter(),),),);}
}

組合動畫代碼學習

import 'package:flutter/material.dart';class MyAnimaDemoPage extends StatefulWidget {const MyAnimaDemoPage({super.key});@override_MyAnimaDemoPageState createState() {return _MyAnimaDemoPageState();}
}class _MyAnimaDemoPageState extends State<MyAnimaDemoPage>with SingleTickerProviderStateMixin {late AnimationController controller1;late Animation animation2;Animation? animation1;@overridevoid initState() {super.initState();controller1 =AnimationController(vsync: this, duration: const Duration(seconds: 3));animation1 = Tween(begin: 0.0, end: 200.0).animate(controller1)..addListener(() {setState(() {});});animation2 = Tween(begin: 0.0, end: 1.0).animate(controller1);controller1.repeat();}@overridevoid dispose() {controller1.dispose();super.dispose();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("AnimaDemoPage"),),body: RotationTransition(turns: animation2 as Animation<double>,child: Center(child: Container(height: 200,width: 200,color: Colors.blue,child: CustomPaint(foregroundPainter: _MyAnimationPainter(animation1),),),),),);}
}class _MyAnimationPainter extends CustomPainter {final Paint _paint = Paint();Animation? animation;_MyAnimationPainter(this.animation);@overridevoid paint(Canvas canvas, Size size) {_paint..color = Colors.redAccent..strokeWidth = 4..style = PaintingStyle.stroke;canvas.drawCircle(const Offset(100, 100), animation!.value * 1.5, _paint);}@overridebool shouldRepaint(covariant CustomPainter oldDelegate) {return true;}}