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