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中很常见,避免了子组件中不变的部分被反复创建。

相关推荐
孤鸿玉17 小时前
Fluter InteractiveViewer 与ScrollView滑动冲突问题解决
flutter
叽哥1 天前
Flutter Riverpod上手指南
android·flutter·ios
BG2 天前
Flutter 简仿Excel表格组件介绍
flutter
zhangmeng2 天前
FlutterBoost在iOS26真机运行崩溃问题
flutter·app·swift
恋猫de小郭2 天前
对于普通程序员来说 AI 是什么?AI 究竟用的是什么?
前端·flutter·ai编程
卡尔特斯2 天前
Flutter A GlobalKey was used multipletimes inside one widget'schild list.The ...
flutter
w_y_fan2 天前
Flutter 滚动组件总结
前端·flutter
醉过才知酒浓2 天前
Flutter Getx 的页面传参
flutter
火柴就是我3 天前
flutter 之真手势冲突处理
android·flutter
Speed1233 天前
`mockito` 的核心“打桩”规则
flutter·dart