flutter的进阶之路之手势、动画

Praise 2019年09月03日 364次浏览

手势篇

概述

Flutter中的手势分为两层,第一层是触摸原始指针(Pointer)事件,描述了屏幕上指针(如触摸、鼠标和触控笔)的位置和移动。 指针(Pointer)代表用户与屏幕交互的原始数据,有四种事件类型:

PointerDownEvent: 指针接触到屏幕 PointerMoveEvent: 指针从屏幕上的一个位置移动到另一个位置 PointerUpEvent: 指针停止接触屏幕 PointerCancelEvent: 指针的输入事件不再针对此应用(事件取消)

第二层就是我们可以检测到的手势,主要分为三大类:轻击、拖动和缩放。

GestureDetector

GestureDetector可以进行手势检测,如单击,双击,长按,垂直、水平拖动等。

GestureDetector事件描述

事件名描述
onTapDown点击屏幕立即触发
onTapUp手指离开屏幕
onTap点击屏幕
onTapCancel点击事件结束,onTapDown不会再触发点击事件
onDoubleTap快速连续两次在同一位置点击屏幕
onLongPress长按
onVerticalDragStart与屏幕接触,可能会开始垂直移动
onVerticalDragUpdate与屏幕接触,已经沿垂直移动
onVerticalDragEnd先前与屏幕接触并垂直移动的指针不再与屏幕接触,并且在停止接触屏幕时以特定速度移动
onHorizontalDragStart与屏幕接触,可能会开始水平移动
onHorizontalDragUpdate与屏幕接触,已经沿水平移动
onHorizontalDragEnd先前与屏幕接触并水平移动的指针不再与屏幕接触,并在停止接触屏幕时以特定速度移动

Dissmissible

可用于实现滑动删除。

常见属性

属性名类型说明
onDismissedDismissDirectionCallback当包裹的组件消失后回调
movementDurationDuration定义组件消失的时长
onResizeVoidCallback组件大小改变时的回调
resizedDurationDuration组件大小改变时长
childWidget子元素,滑动时显示的组件

动画篇

概述

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