如何在 Flutter 中使用自定義動畫和剪裁（clipping）實現(xiàn)一個簡單的動畫效果。

前置知識點學習

AnimationController

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

主要屬性

• `duration`: 定義動畫的時長。可以是 `Duration` 類型的值，如 `Duration(milliseconds: 500)`。

• `vsync`: 一個 `TickerProvider`，用于防止動畫在不需要時消耗資源。通常在 `State` 類中通過 `SingleTickerProviderStateMixin` 提供。

• `value`: 表示動畫當前的進度，范圍通常是 0.0 到 1.0。

• `lowerBound` 和 `upperBound`: 定義動畫值的范圍，默認是 0.0 到 1.0。

主要方法

• `forward()`: 正向播放動畫，從當前值到 `upperBound`。

• `reverse()`: 反向播放動畫，從當前值到 `lowerBound`。

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

• `stop()`: 停止動畫。

• `reset()`: 將動畫值重置為 `lowerBound`。

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

監(jiān)聽器

• `addListener()`: 添加一個回調(diào)函數(shù)，每當動畫的值改變時調(diào)用。

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

使用示例

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

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`: 控制動畫的時長和進度。

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

• `addListener`: 在動畫值改變時更新 UI。

• `forward`: 使動畫從 `lowerBound` 開始到 `upperBound` 結(jié)束。

FloatingActionButton

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

關(guān)鍵屬性

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

• `onPressed`: 一個回調(diào)函數(shù)，當用戶點擊按鈕時會被調(diào)用。這個屬性是必需的，因為它定義了按鈕的行為。

• `tooltip`: 當用戶長按按鈕時顯示的提示文本，通常用于描述按鈕的功能。

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

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

• `elevation`: 按鈕的陰影深度，影響按鈕的浮動效果。

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

• `heroTag`: 用于在頁面切換時標識 FAB 的唯一標識符，默認提供避免動畫沖突。

使用示例

下面是一個使用 `FloatingActionButton` 的簡單示例：

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 提供的一個布局結(jié)構(gòu)，支持 Material Design 的組件，包括 FAB。

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

• `onPressed`: 定義當 FAB 被點擊時的行為。在這個例子中，它只是打印一條消息。

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

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

常見使用場景

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

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

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

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

CustomClipper

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

主要方法

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

1.`getClip(Size size)`:

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

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

2.`shouldReclip(CustomClipper oldClipper)`:

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

使用方法

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

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

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

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

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

示例

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

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) {// 如果路徑不依賴外部狀態(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`: 自定義的剪裁器，實現(xiàn)了一個簡單的三角形路徑。

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

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

使用場景

• 自定義形狀: 當你需要超出標準形狀的剪裁效果時，比如特定的波浪形、星形等。

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

• 視覺效果: 增強 UI 的視覺效果，通過不規(guī)則的形狀吸引用戶注意力。

lerpDouble函數(shù)解析

在 Flutter 中，`lerpDouble` 是一個用于在兩個 `double` 值之間進行線性插值的方法。它通常用于動畫和其他需要平滑過渡的場景。

主要功能

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

方法簽名

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

參數(shù)

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

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

• `t`: 插值因子，是一個介于 0.0 到 1.0 之間的 `double`。當 `t` 為 0.0 時，返回 `a`；當 `t` 為 1.0 時，返回 `b`；在這之間返回 `a` 和 `b` 的插值。

返回值

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

用法示例

以下是一個簡單的示例，展示如何使用 `lerpDouble` 計算兩個值之間的插值：

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` 返回兩個值之間的 25% 位置上的值，即 12.5。

使用場景

• 動畫: 在動畫過程中，計算屬性的中間值，比如位置、大小、透明度等。

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

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

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

Path

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

基本用法

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

• `moveTo(double x, double y)`: 移動當前點到指定的坐標，開始新的子路徑。

• `lineTo(double x, double y)`: 從當前點繪制一條直線到指定的坐標。

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

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

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

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

示例

下面是一個簡單的示例，使用 `Path` 繪制一個三角形：

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();//頂點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` 對象進行繪制。

• `Path`: 定義路徑的形狀。在這個例子中，繪制了一個簡單的三角形。

• `Canvas.drawPath`: 使用 `Path` 和 `Paint` 對象在畫布上繪制路徑。

使用場景

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

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

• 動畫路徑: 在動畫中，可以使用 `Path` 來定義對象的運動軌跡。

注意事項

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

• 性能: 復雜路徑可能會影響性能，尤其是在動畫中，請合理使用。

AnimatedBuilder

`AnimatedBuilder` 是 Flutter 動畫框架中的一個小部件，用于將動畫與 UI 組件進行綁定。它提供了一種高效的方法來重建與動畫相關(guān)的部分 UI，而無需重建整個 widget 樹。

核心概念

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

主要屬性

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

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

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

使用示例

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

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(); //無限循環(huán)動畫}@overridevoid dispose() {_controller.dispose();super.dispose();}
}

解釋

• `AnimationController`: 控制動畫的時長和進度。在這個例子中，`_controller` 在 2 秒內(nèi)從 0.0 到 1.0 循環(huán)。

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

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

• `child`: 傳遞給 `AnimatedBuilder` 的 `child` 是一個藍色的方塊，它在動畫期間不會重建。

使用場景

• 動畫優(yōu)化: 當只有部分 UI 需要隨著動畫更新時，`AnimatedBuilder` 可以避免整個 widget 樹的重建。

• 復雜動畫: 在需要多個動畫組合或復雜動畫效果時，`AnimatedBuilder` 提供了一種靈活的方式來管理和應(yīng)用這些動畫。

自定義動畫代碼學習

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("動畫測試"),),),),),floatingActionButton: FloatingActionButton(onPressed: () {if (controller.status == AnimationStatus.completed ||controller.status == AnimationStatus.forward) {controller.reverse();} else {controller.forward();}},child: const Text("點擊"),),);}
}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);}
}