Flutter动画(二)内建隐式动画Widget

动画效果介绍中给出了选择动画的决策树:

使用动画框架不在我们讨论的话题内。flutter支持的动画包括隐式动画和显式动画。

隐式动画和显式动画

隐式动画显示动画是两种不同的动画实现方式,它们的主要区别在于控制权和动画的重复性。

隐式动画:

  • 自动完成:隐式动画是由系统框架自动完成的,不需要用户手动控制动画过程。
  • 单向且一次性的:隐式动画是一次性的,单方向的,由某个属性值的变化驱动,例如透明度从0到1的变化。
  • 无法自动重复:隐式动画无法实现动画效果从0到1再到0的自动重复。
  • 无法停止:一旦隐式动画开始,就无法中途停止,直到动画完成。
  • 简单易用:隐式动画只能控制duration和curve,不需要创建控制器,只需几行代码就可实现简单的动画效果。

显示动画:

  • 用户控制:显示动画需要用户自己通过AnimationController创建的动画。
  • 灵活且复杂:显示动画可以随时控制动画的开始和暂停,并且可以实现循环的,交错的变化效果。
  • 定义完整流程:显示动画不像隐式动画那样默认从一个初始状态线性变化到目标状态,而是需要显式地定义完整的动画流程。
  • 更灵活:显示动画可以更加灵活地实现更加复杂的动画效果,例如在x和y轴方向上不断缩放的动画对象。

需要注意的是,使用隐式动画后,View会暂时不能接收用户的触摸、滑动等手势,这可能会导致在列表滚动时,如果对其中的view使用了隐式动画,滚动无法主动停止下来,必须等动画结束了才能停止。

flutter既提供了内置的隐式和显式动画相关widget,也提供了相关自定义的widget。

内建隐式动画Widget

本篇介绍flutter内建的隐式动画Widget。常见的内建隐式动画Widget:

AnimatedAlign

AnimatedContainer

AnimatedDefaultTextStyle

AnimatedFractionallySizedBox

AnimatedScale

AnimatedRotation

AnimatedSlide

AnimatedOpacity、SliverAnimatedOpacity

AnimatedPadding

AnimatedPhysicalModel

AnimatedPositioned

AnimatedPositionedDirectional

AnimatedTheme

AnimatedCrossFade

AnimatedSize

AnimatedSwitcher

TweenAnimationBuilder

AnimatedSwitcher

9.6 动画切换组件(AnimatedSwitcher) | 《Flutter实战·第二版》

AnimatedCrossFade

AnimatedSwitcher不同的是,AnimatedCrossFade是针对两个子元素,而AnimatedSwitcher是在一个子元素的新旧值之间切换。

TweenAnimationBuilder

TweenAnimationBuilder可以用于实现自定义的隐式动画。TweenAnimationBuilder用法比较简单,首先需要一个动画时长参数:

Dart 复制代码
TweenAnimationBuilder<double>(
	duration: Duration(seconds: 2),
)

可以设置tween(动画的值),比如需要一个100到200的差值:

Dart 复制代码
tween: Tween<double>(begin: 100.0, end: 200),

如果需要颜色值使用ColorTween,这样我们的动画组件就可以动起来了。

我们也可以设置动画曲线,设置如下:

Dart 复制代码
TweenAnimationBuilder<double>(
	 curve: Curves.bounceIn,
)

通过onEnd监听动画完成通知,用法如下:

Dart 复制代码
TweenAnimationBuilder<double>(
	 onEnd: () {}
)

然后添加一个builder方法来提供widget消费动画值,用法如下:

Dart 复制代码
builder: (context, value, child) {
        return Container(
          height: value,
          width: value,
          child: child,
        );
      }

builder方法有3个参数,第一个是BuildContext,第二个value的类型取决于你要做动画的数据,比如:

Dart 复制代码
TweenAnimationBuilder<double>(
	builder: (context, value, child) {
	}
)

value的类型就是double,如果是TweenAnimationBuilder<Color>,value的类型就是Color。

第三个就是TweenAnimationBuilder的子组件,用于优化。这种优化在flutter中很常见,避免了子组件中不变的部分被反复创建。

相关推荐
愿天深海29 分钟前
Flutter TextPainter 计算文本高度和行数
flutter
LuiChun1 小时前
webview_flutter_android 4.3.0使用
android·flutter
Android西红柿12 小时前
flutter-android混合编译,原生接入
android·flutter
sunly_2 天前
Flutter:搜索页,搜索bar封装
开发语言·javascript·flutter
一人前行2 天前
Flutter_学习记录_导航和其他
javascript·学习·flutter
古希腊被code拿捏的神2 天前
【Flutter】旋转元素(Transform、RotatedBox )
flutter
前端没钱2 天前
flutter入门系列教程<三>:tabbar的高度自适用,支持无限滚动
javascript·flutter
玫瑰花开一片一片2 天前
Flutter android debug 编译报错问题。插件编译报错
android·flutter
TimeDoor2 天前
Dart语言和flutter框架的特性
flutter·dart
玫瑰花开一片一片2 天前
Flutter 给安卓签名时 使用 Android Studio 找不到 Generate Signed Bundle/APK 菜单问题
android·flutter·android studio