flutter的進階之路之手勢、動畫

手勢篇

概述

Flutter中的手勢分爲兩層，第一層是觸摸原始指針(Pointer)事件，描述了屏幕上指針（如觸摸、鼠標和觸控筆）的位置和移動。 指針(Pointer)表明用戶與屏幕交互的原始數據，有四種事件類型：

PointerDownEvent: 指針接觸到屏幕 PointerMoveEvent: 指針從屏幕上的一個位置移動到另外一個位置 PointerUpEvent: 指針中止接觸屏幕 PointerCancelEvent: 指針的輸入事件再也不針對此應用(事件取消)

第二層就是咱們能夠檢測到的手勢，主要分爲三大類：輕擊、拖動和縮放。

GestureDetector

GestureDetector能夠進行手勢檢測，如單擊，雙擊，長按，垂直、水平拖動等。

GestureDetector事件描述

事件名	描述
onTapDown	點擊屏幕當即觸發
onTapUp	手指離開屏幕
onTap	點擊屏幕
onTapCancel	點擊事件結束，onTapDown不會再觸發點擊事件
onDoubleTap	快速連續兩次在同一位置點擊屏幕
onLongPress	長按
onVerticalDragStart	與屏幕接觸，可能會開始垂直移動
onVerticalDragUpdate	與屏幕接觸，已經沿垂直移動
onVerticalDragEnd	先前與屏幕接觸並垂直移動的指針再也不與屏幕接觸，而且在中止接觸屏幕時以特定速度移動
onHorizontalDragStart	與屏幕接觸，可能會開始水平移動
onHorizontalDragUpdate	與屏幕接觸，已經沿水平移動
onHorizontalDragEnd	先前與屏幕接觸並水平移動的指針再也不與屏幕接觸，並在中止接觸屏幕時以特定速度移動

Dissmissible

可用於實現滑動刪除。

常見屬性

屬性名	類型	說明
onDismissed	DismissDirectionCallback	當包裹的組件消失後回調
movementDuration	Duration	定義組件消失的時長
onResize	VoidCallback	組件大小改變時的回調
resizedDuration	Duration	組件大小改變時長
child	Widget	子元素，滑動時顯示的組件

動畫篇

概述

Flutter中的動畫分爲補間(Tween)動畫和基於物理(Physics-based)的動畫。

• 在補間動畫中，定義了開始點和結束點、時間線以及定義轉換時間和速度的曲線，而後由框架自動計算如何從開始點過渡到結束點。
• 在基於物理的動畫(遵循物理學定律)中，運動被模擬爲與真實世界的行爲類似，能夠模擬彈簧、阻尼、重力等物理效果。例如，當你擲球時，它在何處落地，取決於拋球速度有多快、球有多重、距離地面有多遠。相似地，將鏈接在彈簧上的球落下（並彈起）與鏈接到繩子上的球放下的方式也是不一樣。

Animation

四種狀態：

• dismissed：動畫初始狀態
• forward：動畫從頭至尾播放狀態
• reverse：動畫從尾到頭播放狀態
• completed：動畫完成狀態

Animation類是Flutter動畫中核心的抽象類，它包含動畫的當前值和狀態兩個屬性。定義了動畫的一系列監聽回調。

• 值監聽：addListener、removeListener
• 狀態監聽：addStatusListener、removeStatusListener

AnimationController

動畫的控制。

• AnimationController是一個特殊的Animation對象，在屏幕刷新的每一幀，就會生成一個新的值，默認狀況下，AnimationController在給定的時間段內會線性的生成從0.0到1.0的數字
• 屬於Animation類型
• 具備控制動畫的方法，例如，.forward()方法能夠啓動動畫
• 當建立一個AnimationController時，須要傳遞一個vsync參數，存在vsync時會防止屏幕外動畫（動畫的UI不在當前屏幕時）消耗沒必要要的資源。
• 經過將SingleTickerProviderStateMixin添加到類定義中，能夠將stateful對象做爲vsync的值。若是要使用自定義的State對象做爲vsync時，請包含TickerProviderStateMixin。
• 特別注意：在不使用時須要調用dispose方法，不然會形成資源泄露

Curve

定義了時間和數值的抽象類。Flutter封裝定義了一系列的插值器，如linear、decelerate、ease、bounce、cubic等。固然Flutter提供的不知足需求的話，也能夠自定義插值器。

Tween

線性估值器。Flutter還封裝定義了不一樣類型的估值器：

• ReverseTween
• ColorTween
• SizeTween
• RectTween
• IntTween
• StepTween
• ConstantTween