如何在 Flutter 中使用自定義動(dòng)畫(huà)和剪裁（clipping）實(shí)現(xiàn)一個(gè)簡(jiǎn)單的動(dòng)畫(huà)效果。

前置知識(shí)點(diǎn)學(xué)習(xí)

AnimationController

`AnimationController` 是 Flutter 動(dòng)畫(huà)框架中的一個(gè)核心類(lèi)，用于控制動(dòng)畫(huà)的生命周期和狀態(tài)。它提供了一種靈活的方式來(lái)定義動(dòng)畫(huà)的開(kāi)始、結(jié)束、暫停、反向和速度調(diào)節(jié)等功能。

主要屬性

• `duration`: 定義動(dòng)畫(huà)的時(shí)長(zhǎng)?？梢允?`Duration` 類(lèi)型的值，如 `Duration(milliseconds: 500)`。

• `vsync`: 一個(gè) `TickerProvider`，用于防止動(dòng)畫(huà)在不需要時(shí)消耗資源。通常在 `State` 類(lèi)中通過(guò) `SingleTickerProviderStateMixin` 提供。

• `value`: 表示動(dòng)畫(huà)當(dāng)前的進(jìn)度，范圍通常是 0.0 到 1.0。

• `lowerBound` 和 `upperBound`: 定義動(dòng)畫(huà)值的范圍，默認(rèn)是 0.0 到 1.0。

主要方法

• `forward()`: 正向播放動(dòng)畫(huà)，從當(dāng)前值到 `upperBound`。

• `reverse()`: 反向播放動(dòng)畫(huà)，從當(dāng)前值到 `lowerBound`。

• `repeat()`: 循環(huán)播放動(dòng)畫(huà)，可以設(shè)置次數(shù)和是否反向。

• `stop()`: 停止動(dòng)畫(huà)。

• `reset()`: 將動(dòng)畫(huà)值重置為 `lowerBound`。

• `dispose()`: 銷(xiāo)毀控制器，釋放資源。在 `State` 的 `dispose` 方法中調(diào)用。

監(jiān)聽(tīng)器

• `addListener()`: 添加一個(gè)回調(diào)函數(shù)，每當(dāng)動(dòng)畫(huà)的值改變時(shí)調(diào)用。

• `addStatusListener()`: 添加一個(gè)回調(diào)函數(shù)，每當(dāng)動(dòng)畫(huà)的狀態(tài)改變時(shí)調(diào)用，比如開(kāi)始、結(jié)束、正向播放、反向播放等。

使用示例

以下是一個(gè)簡(jiǎn)單的例子，演示如何使用 `AnimationController` 創(chuàng)建一個(gè)簡(jiǎn)單的透明度動(dòng)畫(huà)：

import 'package:flutter/material.dart';class MyAnimationControllerExample extends StatefulWidget {const MyAnimationControllerExample({super.key});@override_MyAnimationControllerExampleState createState() {return _MyAnimationControllerExampleState();}
}class _MyAnimationControllerExampleStateextends State<MyAnimationControllerExample>with SingleTickerProviderStateMixin {late AnimationController _controller;@overridevoid initState() {super.initState();_controller =AnimationController(vsync: this, duration: const Duration(seconds: 2));_controller.addListener(() {setState(() {});});_controller.forward();}@overridevoid dispose() {_controller.dispose();super.dispose();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('AnimationController Example')),body: Center(child: Opacity(opacity: _controller.value,child: Container(width: 100,height: 100,color: Colors.blue,),),),);}
}

解釋

• `AnimationController`: 控制動(dòng)畫(huà)的時(shí)長(zhǎng)和進(jìn)度。

• `SingleTickerProviderStateMixin`: 為 `vsync` 提供 `TickerProvider`，防止不必要的資源消耗。

• `addListener`: 在動(dòng)畫(huà)值改變時(shí)更新 UI。

• `forward`: 使動(dòng)畫(huà)從 `lowerBound` 開(kāi)始到 `upperBound` 結(jié)束。

FloatingActionButton

`FloatingActionButton`（FAB）是 Flutter 中一個(gè)用于執(zhí)行主操作的圓形按鈕。它通常懸浮在應(yīng)用界面的某個(gè)位置，用戶(hù)可以通過(guò)點(diǎn)擊它來(lái)觸發(fā)特定的操作或功能。FAB 是 Material Design 的一部分，常見(jiàn)于各種應(yīng)用中，用于吸引用戶(hù)注意并方便地進(jìn)行交互。

關(guān)鍵屬性

• `child`: 該屬性用于指定按鈕內(nèi)部的內(nèi)容，通常是一個(gè)圖標(biāo)（`Icon`）或文本（`Text`）。這個(gè)內(nèi)容會(huì)在按鈕的中心顯示。

• `onPressed`: 一個(gè)回調(diào)函數(shù)，當(dāng)用戶(hù)點(diǎn)擊按鈕時(shí)會(huì)被調(diào)用。這個(gè)屬性是必需的，因?yàn)樗x了按鈕的行為。

• `tooltip`: 當(dāng)用戶(hù)長(zhǎng)按按鈕時(shí)顯示的提示文本，通常用于描述按鈕的功能。

• `backgroundColor`: 按鈕的背景顏色。

• `foregroundColor`: 按鈕內(nèi)容（如圖標(biāo)或文本）的顏色。

• `elevation`: 按鈕的陰影深度，影響按鈕的浮動(dòng)效果。

• `shape`: 定義按鈕的形狀，默認(rèn)是圓形，也可以自定義為其他形狀。

• `heroTag`: 用于在頁(yè)面切換時(shí)標(biāo)識(shí) FAB 的唯一標(biāo)識(shí)符，默認(rèn)提供避免動(dòng)畫(huà)沖突。

使用示例

下面是一個(gè)使用 `FloatingActionButton` 的簡(jiǎn)單示例：

import 'package:flutter/material.dart';class FloatingActionButtonExample extends StatelessWidget {const FloatingActionButtonExample({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('FloatingActionButton Example'),),body: const Center(child: Text("Press the button below!"),),floatingActionButton: FloatingActionButton(onPressed: () {print("FAB clicked!");},tooltip: 'Increment',child: const Icon(Icons.add),),floatingActionButtonLocation: FloatingActionButtonLocation.endDocked);}
}

解釋

• `Scaffold`: Flutter 提供的一個(gè)布局結(jié)構(gòu)，支持 Material Design 的組件，包括 FAB。

• `floatingActionButton`: `Scaffold` 的一個(gè)屬性，用于指定屏幕上的 FAB。

• `onPressed`: 定義當(dāng) FAB 被點(diǎn)擊時(shí)的行為。在這個(gè)例子中，它只是打印一條消息。

• `Icon`: 在 FAB 中展示的內(nèi)容，在這個(gè)例子中是一個(gè)加號(hào)圖標(biāo)。

• `floatingActionButtonLocation`: 用于定義 FAB 在屏幕中的位置，如居中、靠右或靠左等。

常見(jiàn)使用場(chǎng)景

• 主要操作: FAB 通常用于執(zhí)行應(yīng)用的主要操作，如在郵件應(yīng)用中創(chuàng)建新郵件、在社交應(yīng)用中發(fā)布新內(nèi)容等。

• 輔助功能: 在一些應(yīng)用中，FAB 可以用于快速訪問(wèn)某些輔助功能。

• 動(dòng)態(tài)操作: 在某些應(yīng)用中，FAB 的功能可能會(huì)根據(jù)上下文動(dòng)態(tài)變化，比如在不同的頁(yè)面中執(zhí)行不同的操作。

通過(guò) `FloatingActionButton`，開(kāi)發(fā)者可以在 Flutter 應(yīng)用中輕松實(shí)現(xiàn)符合 Material Design 指導(dǎo)原則的交互元素。它是一個(gè)非常直觀且易于使用的組件，用于增強(qiáng)用戶(hù)體驗(yàn)。

CustomClipper

`CustomClipper` 是 Flutter 提供的一個(gè)抽象類(lèi)，用于創(chuàng)建自定義剪裁（clipping）效果。通過(guò)實(shí)現(xiàn) `CustomClipper`，你可以定義任意形狀的剪裁路徑，應(yīng)用于組件的外觀。

主要方法

`CustomClipper` 包含兩個(gè)主要方法，你需要在子類(lèi)中實(shí)現(xiàn)它們：

1.`getClip(Size size)`:

• 返回一個(gè) `Path` 對(duì)象，該對(duì)象定義了應(yīng)該如何剪裁組件。

• `Size` 參數(shù)提供了組件的大小，你可以根據(jù)這個(gè)大小來(lái)計(jì)算剪裁路徑。

2.`shouldReclip(CustomClipper oldClipper)`:

• 返回一個(gè)布爾值，決定是否需要重新剪裁。當(dāng)剪裁路徑依賴(lài)于某些動(dòng)態(tài)變化的參數(shù)時(shí)，你需要在這個(gè)方法中進(jìn)行判斷。
• 通常，如果你的剪裁路徑是固定不變的，可以返回 `false`。

使用方法

1.創(chuàng)建一個(gè) `CustomClipper` 子類(lèi):

• 實(shí)現(xiàn) `getClip` 方法來(lái)定義剪裁路徑。

• 實(shí)現(xiàn) `shouldReclip` 方法來(lái)決定何時(shí)重新剪裁。

2.使用 `ClipPath` 或其他 `Clip*` 組件:

• 將自定義 `CustomClipper` 實(shí)例傳遞給 `ClipPath`、`ClipRect`、`ClipOval` 等組件的 `clipper` 屬性。

示例

以下是一個(gè)簡(jiǎn)單的示例，展示如何使用 `CustomClipper` 來(lái)創(chuàng)建一個(gè)三角形剪裁效果：

import 'package:flutter/material.dart';class TriangleClipper extends CustomClipper<Path> {@overridePath getClip(Size size) {final path = Path();path.moveTo(size.width / 2, 0);path.lineTo(size.width, size.height);path.lineTo(0, size.height);path.close();return path;}@overridebool shouldReclip(covariant CustomClipper<Path> oldClipper) {// 如果路徑不依賴(lài)外部狀態(tài)，可以返回 falsereturn false;}
}class CustomClipperExample extends StatelessWidget {const CustomClipperExample({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('CustomClipper Example'),),body: Center(child: ClipPath(clipper: TriangleClipper(), // 使用自定義的 TriangleClipperchild: Container(width: 200,height: 200,color: Colors.blue,),),),);}
}

解釋

• TriangleClipper`: 自定義的剪裁器，實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的三角形路徑。

• `getClip` 方法: 定義了一個(gè)三角形的路徑。

• `ClipPath`: 使用 `TriangleClipper` 將子組件剪裁成三角形。

使用場(chǎng)景

• 自定義形狀: 當(dāng)你需要超出標(biāo)準(zhǔn)形狀的剪裁效果時(shí)，比如特定的波浪形、星形等。

• 動(dòng)態(tài)剪裁: 如果剪裁形狀需要根據(jù)某些動(dòng)態(tài)參數(shù)變化，可以通過(guò) `shouldReclip` 來(lái)控制重新剪裁。

• 視覺(jué)效果: 增強(qiáng) UI 的視覺(jué)效果，通過(guò)不規(guī)則的形狀吸引用戶(hù)注意力。

lerpDouble函數(shù)解析

在 Flutter 中，`lerpDouble` 是一個(gè)用于在兩個(gè) `double` 值之間進(jìn)行線性插值的方法。它通常用于動(dòng)畫(huà)和其他需要平滑過(guò)渡的場(chǎng)景。

主要功能

`lerpDouble` 的主要功能是根據(jù)給定的插值因子 `t`，計(jì)算出兩個(gè) `double` 值之間的中間值。這個(gè)過(guò)程稱(chēng)為線性插值（linear interpolation），簡(jiǎn)稱(chēng) lerp。

方法簽名

double? lerpDouble(num? a,num? b,double t,
)

參數(shù)

• `a`: 起始值，可以是 `double` 或 `null`。如果為 `null`，則在計(jì)算時(shí)視為 0.0。

• `b`: 結(jié)束值，可以是 `double` 或 `null`。如果為 `null`，則在計(jì)算時(shí)視為 0.0。

• `t`: 插值因子，是一個(gè)介于 0.0 到 1.0 之間的 `double`。當(dāng) `t` 為 0.0 時(shí)，返回 `a`；當(dāng) `t` 為 1.0 時(shí)，返回 `b`；在這之間返回 `a` 和 `b` 的插值。

返回值

返回一個(gè) `double` 類(lèi)型的值，表示 `a` 和 `b` 之間的插值。如果 `a` 和 `b` 都為 `null`，則返回 `null`。

用法示例

以下是一個(gè)簡(jiǎn)單的示例，展示如何使用 `lerpDouble` 計(jì)算兩個(gè)值之間的插值：

import 'dart:ui';void main() {double? start = 10.0;double? end = 20.0;double t = 0.25; // 插值因子double? interpolatedValue = lerpDouble(start, end, t);print('Interpolated Value: $interpolatedValue'); // 輸出: Interpolated Value: 12.5
}

解釋

• 在上面的例子中，`start` 是 10.0，`end` 是 20.0，`t` 是 0.25。

• `lerpDouble` 返回兩個(gè)值之間的 25% 位置上的值，即 12.5。

使用場(chǎng)景

• 動(dòng)畫(huà): 在動(dòng)畫(huà)過(guò)程中，計(jì)算屬性的中間值，比如位置、大小、透明度等。

• 過(guò)渡效果: 在不同狀態(tài)之間平滑過(guò)渡，例如顏色漸變、尺寸變化等。

• 自定義插值: 在需要自定義插值邏輯的情況下，用于計(jì)算中間值。

`lerpDouble` 是一個(gè)簡(jiǎn)單卻強(qiáng)大的工具，允許開(kāi)發(fā)者在兩個(gè)數(shù)值之間創(chuàng)建平滑的過(guò)渡效果，非常適合用于動(dòng)畫(huà)和動(dòng)態(tài) UI 變化中。

Path

在 Flutter 中，`Path` 是一個(gè)用于定義向量形狀的類(lèi)。它允許開(kāi)發(fā)者創(chuàng)建復(fù)雜的幾何圖形，通過(guò)一系列的直線和曲線來(lái)定義路徑。`Path` 類(lèi)可以用于繪制形狀、創(chuàng)建剪裁區(qū)域以及生成自定義繪制效果。

基本用法

`Path` 提供了一系列方法，用于定義形狀的邊界。以下是一些常用的方法：

• `moveTo(double x, double y)`: 移動(dòng)當(dāng)前點(diǎn)到指定的坐標(biāo)，開(kāi)始新的子路徑。

• `lineTo(double x, double y)`: 從當(dāng)前點(diǎn)繪制一條直線到指定的坐標(biāo)。

• `arcTo(Rect rect, double startAngle, double sweepAngle, bool forceMoveTo)`: 繪制一個(gè)圓弧，基于一個(gè)矩形的邊界。

• `quadraticBezierTo(double x1, double y1, double x2, double y2)`: 繪制一個(gè)二次貝塞爾曲線。

• `cubicTo(double x1, double y1, double x2, double y2, double x3, double y3)`: 繪制一個(gè)三次貝塞爾曲線。

• `close()`: 關(guān)閉當(dāng)前子路徑，連接最后一個(gè)點(diǎn)到第一個(gè)點(diǎn)，形成一個(gè)封閉的形狀。

示例

下面是一個(gè)簡(jiǎn)單的示例，使用 `Path` 繪制一個(gè)三角形：

import 'package:flutter/material.dart';class PathExampleDemo extends StatelessWidget {const PathExampleDemo({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('Path Example'),),body: Center(child: CustomPaint(size: const Size(200, 200),painter: TrianglePainter(),),),);}
}class TrianglePainter extends CustomPainter {@overridevoid paint(Canvas canvas, Size size) {final paint = Paint()..color = Colors.blue..style = PaintingStyle.fill;final path = Path();//頂點(diǎn)path.moveTo(size.width / 2, 0);//右下角path.lineTo(size.width, size.height);//左下角path.lineTo(0, size.height);path.close();canvas.drawPath(path, paint);}@overridebool shouldRepaint(covariant CustomPainter oldDelegate) {return false;}
}

解釋

• `CustomPainter`: 用于自定義繪制。`paint` 方法中使用 `Canvas` 對(duì)象進(jìn)行繪制。

• `Path`: 定義路徑的形狀。在這個(gè)例子中，繪制了一個(gè)簡(jiǎn)單的三角形。

• `Canvas.drawPath`: 使用 `Path` 和 `Paint` 對(duì)象在畫(huà)布上繪制路徑。

使用場(chǎng)景

• 自定義形狀: `Path` 可以定義任意形狀，用于自定義繪制或剪裁。

• 復(fù)雜圖形: 使用貝塞爾曲線和弧形，可以創(chuàng)建復(fù)雜的圖形和路徑。

• 動(dòng)畫(huà)路徑: 在動(dòng)畫(huà)中，可以使用 `Path` 來(lái)定義對(duì)象的運(yùn)動(dòng)軌跡。

注意事項(xiàng)

• 路徑方向: 在定義路徑時(shí)，方向（順時(shí)針或逆時(shí)針）可能會(huì)影響填充規(guī)則。

• 性能: 復(fù)雜路徑可能會(huì)影響性能，尤其是在動(dòng)畫(huà)中，請(qǐng)合理使用。

AnimatedBuilder

`AnimatedBuilder` 是 Flutter 動(dòng)畫(huà)框架中的一個(gè)小部件，用于將動(dòng)畫(huà)與 UI 組件進(jìn)行綁定。它提供了一種高效的方法來(lái)重建與動(dòng)畫(huà)相關(guān)的部分 UI，而無(wú)需重建整個(gè) widget 樹(shù)。

核心概念

`AnimatedBuilder` 通過(guò)監(jiān)聽(tīng)一個(gè) `Listenable` 對(duì)象（通常是 `AnimationController` 或其他 `Animation` 對(duì)象）來(lái)決定何時(shí)重建 UI。當(dāng)動(dòng)畫(huà)對(duì)象的值發(fā)生變化時(shí)，`AnimatedBuilder` 會(huì)調(diào)用其構(gòu)建方法，從而更新與動(dòng)畫(huà)相關(guān)的 UI。

主要屬性

• `animation`: 一個(gè) `Listenable` 對(duì)象，通常是 `Animation` 或 `AnimationController`。`AnimatedBuilder` 監(jiān)聽(tīng)這個(gè)對(duì)象的變化。

• `builder`: 一個(gè)回調(diào)函數(shù)，接受兩個(gè)參數(shù)：`BuildContext` 和 `Widget`。在這個(gè)函數(shù)中，你可以根據(jù)動(dòng)畫(huà)的當(dāng)前狀態(tài)來(lái)構(gòu)建和返回一個(gè)新的 widget 樹(shù)。

• `child`: 一個(gè)可選的小部件，當(dāng)它在動(dòng)畫(huà)變化時(shí)不需要重建時(shí)，可以作為優(yōu)化傳遞給 `builder`。這樣可以避免不必要的重建。

使用示例

以下是一個(gè)使用 `AnimatedBuilder` 的簡(jiǎn)單示例，展示如何創(chuàng)建一個(gè)旋轉(zhuǎn)動(dòng)畫(huà)：

import 'package:flutter/material.dart';class AnimatedBuilderExample extends StatefulWidget {const AnimatedBuilderExample({super.key});@override_AnimatedBuilderExampleState createState() {return _AnimatedBuilderExampleState();}
}class _AnimatedBuilderExampleState extends State<AnimatedBuilderExample>with SingleTickerProviderStateMixin {late AnimationController _controller;@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('AnimatedBuilder Example')),body: Center(child: AnimatedBuilder(animation: _controller,builder: (context, child) {return Transform.rotate(angle: _controller.value * 2.0 * 3.14,child: child,);},child: Container(width: 100,height: 100,color: Colors.blue,),),),);}@overridevoid initState() {super.initState();_controller =AnimationController(vsync: this, duration: const Duration(seconds: 2))..repeat(); //無(wú)限循環(huán)動(dòng)畫(huà)}@overridevoid dispose() {_controller.dispose();super.dispose();}
}

解釋

• `AnimationController`: 控制動(dòng)畫(huà)的時(shí)長(zhǎng)和進(jìn)度。在這個(gè)例子中，`_controller` 在 2 秒內(nèi)從 0.0 到 1.0 循環(huán)。

• `AnimatedBuilder`: 監(jiān)聽(tīng) `_controller` 的變化，并在 `builder` 回調(diào)中根據(jù)動(dòng)畫(huà)的當(dāng)前值更新 UI。

• `Transform.rotate`: 根據(jù)動(dòng)畫(huà)的當(dāng)前值旋轉(zhuǎn) `child`，實(shí)現(xiàn)旋轉(zhuǎn)效果。

• `child`: 傳遞給 `AnimatedBuilder` 的 `child` 是一個(gè)藍(lán)色的方塊，它在動(dòng)畫(huà)期間不會(huì)重建。

使用場(chǎng)景

• 動(dòng)畫(huà)優(yōu)化: 當(dāng)只有部分 UI 需要隨著動(dòng)畫(huà)更新時(shí)，`AnimatedBuilder` 可以避免整個(gè) widget 樹(shù)的重建。

• 復(fù)雜動(dòng)畫(huà): 在需要多個(gè)動(dòng)畫(huà)組合或復(fù)雜動(dòng)畫(huà)效果時(shí)，`AnimatedBuilder` 提供了一種靈活的方式來(lái)管理和應(yīng)用這些動(dòng)畫(huà)。

自定義動(dòng)畫(huà)代碼學(xué)習(xí)

import 'dart:math';
import 'dart:ui';import 'package:flutter/material.dart';class AnimaDemoPage22 extends StatefulWidget {const AnimaDemoPage22({super.key});@override_AnimaDemoPageState22 createState() {return _AnimaDemoPageState22();}
}class _AnimaDemoPageState22 extends State<AnimaDemoPage22>with SingleTickerProviderStateMixin {late AnimationController controller;Animation? animation;@overridevoid initState() {super.initState();controller = AnimationController(vsync: this,duration: const Duration(milliseconds: 500),);animation = CurvedAnimation(parent: controller, curve: Curves.easeInSine);}@overridevoid dispose() {controller.dispose();super.dispose();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("AnimaDemoPage22"),),body: Container(color: Colors.blueGrey,child: MyCRAnimation(minR: 0,maxR: 250,offset: Offset(MediaQuery.sizeOf(context).width / 2,MediaQuery.sizeOf(context).height / 2),animation: animation as Animation<double>?,child: Center(child: Container(alignment: Alignment.center,height: 250,width: 250,color: Colors.greenAccent,child: const Text("動(dòng)畫(huà)測(cè)試"),),),),),floatingActionButton: FloatingActionButton(onPressed: () {if (controller.status == AnimationStatus.completed ||controller.status == AnimationStatus.forward) {controller.reverse();} else {controller.forward();}},child: const Text("點(diǎn)擊"),),);}
}class MyCRAnimation extends StatelessWidget {final Offset? offset;final double? minR;final double? maxR;final Widget child;final Animation<double>? animation;const MyCRAnimation({super.key,required this.child,required this.animation,this.offset,this.minR,this.maxR});@overrideWidget build(BuildContext context) {return AnimatedBuilder(animation: animation!,builder: (_, __) {return ClipPath(clipper: MyAnimationClipper(value: animation!.value,minR: minR,maxR: maxR,offset: offset),child: child,);});}
}class MyAnimationClipper extends CustomClipper<Path> {final double? value;final double? minR;final double? maxR;final Offset? offset;MyAnimationClipper({this.value, this.offset, this.minR, this.maxR});@overridePath getClip(Size size) {var path = Path();var offset = this.offset ?? Offset(size.width / 2, size.height / 2);var maxRadius = minR ?? radiusSize(size, offset);var minRadius = maxR ?? 0;var radius = lerpDouble(minRadius, maxRadius, value!)!;var rect = Rect.fromCircle(center: offset, radius: radius);path.addOval(rect);return path;}@overridebool shouldReclip(covariant CustomClipper<Path> oldClipper) {return true;}double radiusSize(Size size, Offset offset) {final height = max(offset.dy, size.height - offset.dy);final width = max(offset.dx, size.width - offset.dx);return sqrt(width * width + height * height);}
}