Flutter 初识：动画与过渡

Flutter 中的动画和过渡是 UI 设计的重要组成部分，它可以使应用程序更加生动和吸引人。以下是一些常见的动画和过渡实现示例：

AnimationController

AnimationController 是一个 Flutter 类，用于控制动画的状态和行为。它提供了对动画的开始、停止、方向、速度等的精细控制。

属性解析

AnimationController({
    double? value,
    this.duration,
    this.reverseDuration,
    this.debugLabel,
    this.lowerBound = 0.0,
    this.upperBound = 1.0,
    this.animationBehavior = AnimationBehavior.normal,
    required TickerProvider vsync,
  })

• value
  类型：double?
  说明：初始值，可以在 lowerBound 和 upperBound 之间。默认值为 lowerBound。
• duration
  类型：Duration?
  说明：正向动画的持续时间。
• reverseDuration
  类型：Duration?
  说明：反向动画的持续时间。如果未设置，将使用 duration 的值。
• debugLabel
  类型：String?
  说明：用于调试的标签。
• lowerBound
  类型：double
  说明：动画值的下界。默认值为 0.0。
• upperBound
  类型：double
  说明：动画值的上界。默认值为 1.0.
• animationBehavior
  类型：AnimationBehavior
  说明：动画行为，决定在设备休眠或其他情况下的行为。默认值为 AnimationBehavior.normal。
• vsync (required)
  类型：TickerProvider
  说明：用于同步动画的 TickerProvider，通常是在有状态 widget 中使用 this 作为参数。

常用方法

• forward({double from = 0.0}):
  启动动画，从指定的位置开始（默认从 0.0 开始）。

  Future<void> forward({double from = 0.0});
  

• reverse({double from}):
  反向启动动画，从指定的位置开始。

  Future<void> reverse({double from});
  

• reset():
  将动画重置到初始状态。

  void reset();
  

• stop({bool canceled = true}):
  停止动画，可选择是否通知监听器。

  void stop({bool canceled = true});
  

• animateTo(double target, {Duration duration, Curve curve = Curves.linear}):
  动画运行到目标值，可以指定持续时间和曲线。

  Future<void> animateTo(double target, {Duration duration, Curve curve = Curves.linear});
  

• animateBack(double target, {Duration duration, Curve curve = Curves.linear}):
  反向动画运行到目标值，可以指定持续时间和曲线。

  Future<void> animateBack(double target, {Duration duration, Curve curve = Curves.linear});
  

 
 

Animation

在 Flutter 中，Animation 是动画框架的核心部分，用来处理动画的值变化。

Animation 的常用属性

• value:
  当前动画的值，根据动画曲线随时间变化。
  • T get value;
• status:
  动画的当前状态，可以是 dismissed, forward, reverse, 或 completed。
  dart
  • AnimationStatus get status;

Animation 的常用方法

• addListener(VoidCallback listener):
  添加一个监听器，当动画的值发生变化时会被调用。

  void addListener(VoidCallback listener);
  

• removeListener(VoidCallback listener):
  移除一个先前添加的监听器。

  void removeListener(VoidCallback listener);
  

• addStatusListener(AnimationStatusListener listener):
  添加一个状态监听器，当动画的状态发生变化时会被调用。

  void addStatusListener(AnimationStatusListener listener);
  

• removeStatusListener(AnimationStatusListener listener):
  移除一个先前添加的状态监听器。

  void removeStatusListener(AnimationStatusListener listener);
  

 
 

CurvedAnimation

CurvedAnimation 是一个 Flutter 类，用于将线性的 Animation 转换为一个非线性的动画曲线（例如，缓入、缓出、弹性等）。它通常与 AnimationController 一起使用，以创建更复杂的动画效果。

属性解析

CurvedAnimation({
    required this.parent,
    required this.curve,
    this.reverseCurve,
  })

• parent (required)
  类型：Animation
  说明：父动画对象，通常是一个 AnimationController。
• curve (required)
  类型：Curve
  说明：正向动画的曲线类型，如 Curves.easeIn、Curves.bounceOut 等。
• reverseCurve
  类型：Curve?
  说明：反向动画的曲线类型。如果不设置，将使用 curve 的值。

 
 

简单的透明度动画（Fade Transition）

FadeTransition 是一个 Flutter widget，用于实现淡入淡出的动画效果。该 widget 使用 Animation 来控制其子 widget 的透明度

属性解析

 const FadeTransition({
    super.key,
    required this.opacity,
    this.alwaysIncludeSemantics = false,
    super.child,
  })

• key
  类型：Key?
  说明：控件的键值，用于标识控件。
• opacity (required)
  类型：Animation
  说明：用于控制透明度变化的动画对象。取值范围应在 0.0 到 1.0 之间。
• alwaysIncludeSemantics
  类型：bool
  说明：是否始终包括语义信息，即使透明度为 0.0。默认为 false。
• child
  类型：Widget?
  说明：要应用动画效果的子 widget。

示例

class FadeTransitionExample extends StatefulWidget {
  @override
  _FadeTransitionExampleState createState() => _FadeTransitionExampleState();
}

class _FadeTransitionExampleState extends State<FadeTransitionExample>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);
    _animation = CurvedAnimation(parent: _controller, curve: Curves.easeIn);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: FadeTransition(
        opacity: _animation,
        child: FlutterLogo(size: 150),
      ),
    );
  }
}

 
 

缩放过渡（Scale Transition）

ScaleTransition 是一个 Flutter widget，用于对子 widget 应用缩放动画。它通过 Animation 控制缩放比例，可以实现放大或缩小的效果。

属性解析

 const ScaleTransition({
    super.key,
    required Animation<double> scale,
    super.alignment = Alignment.center,
    super.filterQuality,
    super.child,
  })

• key
  类型：Key?
  说明：控件的键值，用于标识控件。
• scale (required)
  类型：Animation
  说明：用于控制缩放比例的动画对象。取值范围通常在 0.0 到任意正数之间。
• alignment
  类型：Alignment
  说明：缩放动画的对齐方式，决定缩放动画的中心点。默认值为 Alignment.center。
• filterQuality
  类型：FilterQuality?
  说明：图像渲染的质量，当有子 widget 时使用。
• child
  类型：Widget?
  说明：要应用缩放动画的子 widget。

示例

class ScaleTransitionExample extends StatefulWidget {
  @override
  _ScaleTransitionExampleState createState() => _ScaleTransitionExampleState();
}

class _ScaleTransitionExampleState extends State<ScaleTransitionExample>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);
    _animation = CurvedAnimation(parent: _controller, curve: Curves.easeInOut);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ScaleTransition(
        scale: _animation,
        child: FlutterLogo(size: 150),
      ),
    );
  }
}

 
 

平移动画（Slide Transition）

SlideTransition 是一个 Flutter 小部件，用于对子小部件应用滑动动画。它使用 Animation 来控制滑动的位置，可以实现从屏幕边缘或其他位置滑入滑出的效果。

属性解析

• key
  类型：Key?
  说明：控件的键值，用于标识控件。
• position (required)
  类型：Animation
  说明：用于控制滑动位置的动画对象。Offset 包含两个双精度浮点数，分别表示 x 和 y 轴上的偏移量。
• transformHitTests
  类型：bool
  说明：是否在变换后对子组件进行命中测试。默认值为 true。
• textDirection
  类型：TextDirection?
  说明：文本方向，用于处理 RTL（从右到左）语言。如果提供了这个参数，Offset 会根据文本方向进行相应调整。
• child
  类型：Widget?
  说明：要应用滑动动画的子 widget。

示例

class SlideTransitionExample extends StatefulWidget {
  @override
  _SlideTransitionExampleState createState() => _SlideTransitionExampleState();
}

class _SlideTransitionExampleState extends State<SlideTransitionExample>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<Offset> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);
    _animation = Tween<Offset>(
      begin: Offset(-1.0, 0.0),
      end: Offset(1.0, 0.0),
    ).animate(CurvedAnimation(parent: _controller, curve: Curves.easeInOut));
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: SlideTransition(
        position: _animation,
        child: FlutterLogo(size: 150),
      ),
    );
  }
}

 
 

旋转动画（Rotation Transition）

RotationTransition 是一个 Flutter widget，用于对子 widget 应用旋转动画。它通过 Animation 控制旋转的角度，可以实现顺时针或逆时针的旋转效果。

属性解析

const RotationTransition({
    super.key,
    required Animation<double> turns,
    super.alignment = Alignment.center,
    super.filterQuality,
    super.child,
  })

• key
  类型：Key?
  说明：控件的键值，用于标识控件。
• turns (required)
  类型：Animation
  说明：用于控制旋转角度的动画对象。该值表示旋转的圈数，例如，0.5 表示半圈，1.0 表示一整圈。
• alignment
  类型：Alignment
  说明：旋转动画的对齐方式，决定旋转动画的中心点。默认值为 Alignment.center。
• filterQuality
  类型：FilterQuality?
  说明：图像渲染的质量，当有子 widget 时使用。
• child
  类型：Widget?
  说明：要应用旋转动画的子 widget。

示例

class RotationTransitionExample extends StatefulWidget {
  @override
  _RotationTransitionExampleState createState() =>
      _RotationTransitionExampleState();
}

class _RotationTransitionExampleState extends State<RotationTransitionExample>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat();
    _animation = CurvedAnimation(parent: _controller, curve: Curves.linear);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: RotationTransition(
        turns: _animation,
        child: FlutterLogo(size: 150),
      ),
    );
  }
}

 
 

自定义绘制动画（CustomPainter + Animation）

CustomPaint 是一个 Flutter widget，用于在其子 widget 上下方绘制自定义图形。通过提供自定义的 painter 和 foregroundPainter，你可以实现复杂的绘图逻辑。

属性解析

const CustomPaint({
    super.key,
    this.painter,
    this.foregroundPainter,
    this.size = Size.zero,
    this.isComplex = false,
    this.willChange = false,
    super.child,
  })

• key
  类型：Key?
  说明：控件的键值，用于标识控件。
• painter
  类型：CustomPainter?
  说明：在子 widget 的后面绘制的画家对象。
• foregroundPainter
  类型：CustomPainter?
  说明：在子 widget 的前面绘制的画家对象。
• size
  类型：Size
  说明：如果没有子 widget 或子 widget 尺寸无约束时使用的大小。默认值为 Size.zero。
• isComplex
  类型：bool
  说明：是否指示该 widget 绘制的是复杂图形，可能有助于优化性能。默认值为 false。
• willChange
  类型：bool
  说明：是否指示将来会频繁改变，需要重新绘制。默认值为 false。
• child
  类型：Widget?
  说明：要包含在 CustomPaint 中的子 widget。

示例

class CustomPathAnimationExample extends StatefulWidget {
  @override
  _CustomPathAnimationExampleState createState() =>
      _CustomPathAnimationExampleState();
}

class _CustomPathAnimationExampleState extends State<CustomPathAnimationExample>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 4),
      vsync: this,
    )..repeat();
    _animation = CurvedAnimation(parent: _controller, curve: Curves.easeInOut);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: PathPainter(_animation),
      child: Container(),
    );
  }
}

class PathPainter extends CustomPainter {
  PathPainter(this.animation) : super(repaint: animation);

  final Animation<double> animation;

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.stroke
      ..strokeWidth = 5.0;

    final path = Path();
    path.moveTo(50.0, 150.0);
    path.cubicTo(150.0, 0.0, 200.0, 300.0, 300.0, 150.0);

    final pathMetric = path.computeMetrics().first;
    final extractPath =
        pathMetric.extractPath(0.0, pathMetric.length * animation.value);

    canvas.drawPath(extractPath, paint);
  }

  @override
  bool shouldRepaint(PathPainter oldDelegate) {
    return oldDelegate.animation != animation;
  }
}

 
 

淡入淡出动画（AnimatedOpacity）

AnimatedOpacity 是一个 Flutter widget，用于在给定时间内逐渐更改其子 widget 的透明度。它通过 opacity 属性控制透明度，并允许你指定动画的持续时间和曲线。

属性解析

const AnimatedOpacity({
    super.key,
    this.child,
    required this.opacity,
    super.curve,
    required super.duration,
    super.onEnd,
    this.alwaysIncludeSemantics = false,
  })

• key
  类型：Key?
  说明：控件的键值，用于标识控件。
• child
  类型：Widget?
  说明：要应用透明动画的子 widget。
• opacity (required)
  类型：double
  说明：目标透明度，范围为 0.0 到 1.0。0.0 表示完全透明，1.0 表示完全不透明。
• curve
  类型：Curve
  说明：动画过渡的曲线，默认值为 Curves.linear。
• duration (required)
  类型：Duration
  说明：动画持续时间。
• onEnd
  类型：VoidCallback?
  说明：动画完成时的回调函数。
• alwaysIncludeSemantics
  类型：bool
  说明：是否始终包含语义信息，即使透明度为 0.0 时也包括。默认值为 false。

示例

class AnimatedOpacityExample extends StatefulWidget {
  @override
  _AnimatedOpacityExampleState createState() => _AnimatedOpacityExampleState();
}

class _AnimatedOpacityExampleState extends State<AnimatedOpacityExample> {
  bool _visible = true;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          AnimatedOpacity(
            opacity: _visible ? 1.0 : 0.0,
            duration: Duration(seconds: 2),
            child: FlutterLogo(size: 150),
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: () {
              setState(() {
                _visible = !_visible;
              });
            },
            child: Text('Toggle Opacity'),
          ),
        ],
      ),
    );
  }
}

 
 

位置变化动画（AnimatedPositioned）

AnimatedPositioned 是一个 Flutter widget，用于在给定时间内逐渐更改其子 widget 的位置和尺寸。它通过 left、top、right、bottom、width 和 height 属性控制子 widget 的布局，并允许你指定动画的持续时间和曲线。

属性解析

const AnimatedPositioned({
    super.key,
    required this.child,
    this.left,
    this.top,
    this.right,
    this.bottom,
    this.width,
    this.height,
    super.curve,
    required super.duration,
    super.onEnd,
  })

• key
  类型：Key?
  说明：控件的键值，用于标识控件。
• child (required)
  类型：Widget
  说明：要应用位置和尺寸动画的子 widget。
• left
  类型：double?
  说明：子 widget 相对父 widget 左边缘的距离。
• top
  类型：double?
  说明：子 widget 相对父 widget 上边缘的距离。
• right
  类型：double?
  说明：子 widget 相对父 widget 右边缘的距离。
• bottom
  类型：double?
  说明：子 widget 相对父 widget 下边缘的距离。
• width
  类型：double?
  说明：子 widget 的宽度。
• height
  类型：double?
  说明：子 widget 的高度。
• curve
  类型：Curve
  说明：动画过渡的曲线，默认值为 Curves.linear。
• duration (required)
  类型：Duration
  说明：动画持续时间。
• onEnd
  类型：VoidCallback?
  说明：动画完成时的回调函数。

示例

class AnimatedPositionedDemo extends StatefulWidget {
  @override
  _AnimatedPositionedDemoState createState() => _AnimatedPositionedDemoState();
}

class _AnimatedPositionedDemoState extends State<AnimatedPositionedDemo> {
  bool _isExpanded = false;

  void _togglePosition() {
    setState(() {
      _isExpanded = !_isExpanded;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        AnimatedPositioned(
          left: _isExpanded ? 50 : 100,
          top: _isExpanded ? 100 : 200,
          width: _isExpanded ? 200 : 100,
          height: _isExpanded ? 200 : 100,
          duration: Duration(seconds: 2),
          curve: Curves.easeInOut,
          onEnd: () {
            print("Animation Completed");
          },
          child: Container(
            color: Colors.blue,
            child: Center(
              child: Text(
                'Hello, World!',
                style: TextStyle(color: Colors.white, fontSize: 24),
              ),
            ),
          ),
        ),
        Positioned(
          bottom: 50,
          left: 50,
          child: ElevatedButton(
            onPressed: _togglePosition,
            child: Text('Toggle Position'),
          ),
        ),
      ],
    );
  }
}

 
 

Widget 的显隐动画（AnimatedSwitcher）

AnimatedSwitcher 是一个 Flutter widget，用于在其子 widget 发生变化时执行动画过渡。它允许你指定变换的持续时间、动画曲线以及自定义的过渡和布局构建器，以实现更灵活的动画效果。

属性解析

const AnimatedSwitcher({
    super.key,
    this.child,
    required this.duration,
    this.reverseDuration,
    this.switchInCurve = Curves.linear,
    this.switchOutCurve = Curves.linear,
    this.transitionBuilder = AnimatedSwitcher.defaultTransitionBuilder,
    this.layoutBuilder = AnimatedSwitcher.defaultLayoutBuilder,
  })

• key
  类型：Key?
  说明：控件的键值，用于标识控件。
• child
  类型：Widget?
  说明：当前显示的子 widget，当子 widget 改变时会触发动画。
• duration (required)
  类型：Duration
  说明：进出动画的持续时间。
• reverseDuration
  类型：Duration?
  说明：反向动画的持续时间，如果未提供，则使用 duration 的值。
• switchInCurve
  类型：Curve
  说明：进入动画的曲线，默认值为 Curves.linear。
• switchOutCurve
  类型：Curve
  说明：退出动画的曲线，默认值为 Curves.linear.
• transitionBuilder
  类型：AnimatedSwitcherTransitionBuilder
  说明：用于构建进出动画的函数，默认值为 AnimatedSwitcher.defaultTransitionBuilder。
• layoutBuilder
  类型：AnimatedSwitcherLayoutBuilder
  说明：用于构建子 widget 布局的函数，默认值为 AnimatedSwitcher.defaultLayoutBuilder。

示例

class AnimatedSwitcherExample extends StatefulWidget {
  @override
  _AnimatedSwitcherExampleState createState() => _AnimatedSwitcherExampleState();
}

class _AnimatedSwitcherExampleState extends State<AnimatedSwitcherExample> {
  bool _first = true;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          AnimatedSwitcher(
            duration: Duration(seconds: 2),
            transitionBuilder: (Widget child, Animation<double> animation) {
              return ScaleTransition(child: child, scale: animation);
            },
            child: _first
                ? Container(key: ValueKey<int>(1), color: Colors.blue, width: 100, height: 100)
                : Container(key: ValueKey<int>(2), color: Colors.red, width: 150, height: 150),
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: () {
              setState(() {
                _first = !_first;
              });
            },
            child: Text('切换'),
          ),
        ],
      ),
    );
  }
}

 
 

自定义曲线动画（TweenAnimationBuilder）

TweenAnimationBuilder 是一个 Flutter widget，用于在给定时间内根据 Tween 对象逐渐更改其子 widget 的属性。它允许你指定动画的持续时间、曲线以及自定义的构建器，以实现更加灵活的动画效果。

属性解析

const TweenAnimationBuilder({
    super.key,
    required this.tween,
    required super.duration,
    super.curve,
    required this.builder,
    super.onEnd,
    this.child,
  })

• key
  类型：Key?
  说明：控件的键值，用于标识控件。
• tween (required)
  类型：Tween
  说明：定义动画的起始和终止值的 Tween 对象。
• duration (required)
  类型：Duration
  说明：动画的持续时间。
• curve
  类型：Curve
  说明：动画的过渡曲线，默认值为 Curves.linear。
• builder (required)
  类型：Widget Function(BuildContext, T, Widget?)
  说明：用于构建子 widget 的函数，其中提供当前动画值。
• onEnd
  类型：VoidCallback?
  说明：动画完成时的回调函数。
• child
  类型：Widget?
  说明：不变的子 widget，可以在 builder 中进行复用以提高性能。

示例

class TweenAnimationBuilderDemo extends StatefulWidget {
  @override
  _TweenAnimationBuilderDemoState createState() =>
      _TweenAnimationBuilderDemoState();
}

class _TweenAnimationBuilderDemoState extends State<TweenAnimationBuilderDemo> {
  bool _isVisible = true;

  void _toggleVisibility() {
    setState(() {
      _isVisible = !_isVisible;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          TweenAnimationBuilder<double>(
            tween: Tween<double>(begin: 0, end: _isVisible ? 1 : 0),
            duration: Duration(seconds: 1),
            curve: Curves.easeInOut,
            builder: (context, value, child) {
              return Opacity(
                opacity: value,
                child: Transform.scale(
                  scale: value,
                  child: child,
                ),
              );
            },
            child: Container(
              width: 200,
              height: 200,
              color: Colors.blue,
              child: Center(
                child: Text(
                  'Hello, World!',
                  style: TextStyle(color: Colors.white, fontSize: 24),
                ),
              ),
            ),
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: _toggleVisibility,
            child: Text('Toggle Visibility'),
          ),
        ],
      ),
    );
  }
}

 
 

SizeTransition

SizeTransition 是一个 Flutter widget，用于在给定时间内逐渐更改其子 widget 的大小。它通过缩放因子动画来实现这种效果，常用于当我们想要基于某个动画控制器来改变子 widget 的尺寸时

属性解析

  const SizeTransition({
    super.key,
    this.axis = Axis.vertical,
    required Animation<double> sizeFactor,
    this.axisAlignment = 0.0,
    this.fixedCrossAxisSizeFactor,
    this.child,
  })

• key
  类型：Key?
  说明：控件的键值，用于标识控件。
• axis
  类型：Axis
  说明：定义动画变化的方向。可以是 Axis.vertical 或 Axis.horizontal，默认值为 Axis.vertical。
• sizeFactor (required)
  类型：Animation
  说明：控制子 widget 尺寸变化的动画。
• axisAlignment
  类型：double
  说明：沿轴对齐的方式，范围为 -1.0 到 1.0。-1.0 表示起点对齐，1.0 表示终点对齐，默认值为 0.0（居中对齐）。
• fixedCrossAxisSizeFactor
  类型：double?
  说明：固定交叉轴的大小因子。如果设置，则在动画期间不会变动。
• child
  类型：Widget?
  说明：要应用尺寸动画的子 widget。

示例

class SizeTransitionExample extends StatefulWidget {
  @override
  _SizeTransitionExampleState createState() => _SizeTransitionExampleState();
}

class _SizeTransitionExampleState extends State<SizeTransitionExample>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);
    _animation = CurvedAnimation(parent: _controller, curve: Curves.easeInOut);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: SizeTransition(
        sizeFactor: _animation,
        axis: Axis.horizontal,
        axisAlignment: -1.0,
        child: FlutterLogo(size: 200),
      ),
    );
  }
}

 
 

DefaultTextStyleTransition

DefaultTextStyleTransition 是一个 Flutter widget，用于在给定时间内逐渐更改其子 widget 的文本样式。它由 Animation 控制，可以定义文本的对齐方式、是否自动换行、溢出处理方式以及最大行数。

属性解析

const DefaultTextStyleTransition({
    super.key,
    required Animation<TextStyle> style,
    required this.child,
    this.textAlign,
    this.softWrap = true,
    this.overflow = TextOverflow.clip,
    this.maxLines,
  })

• key
  类型：Key?
  说明：控件的键值，用于标识控件。
• style (required)
  类型：Animation
  说明：控制文本样式变化的动画。
• child (required)
  类型：Widget
  说明：包含要应用文本样式动画的子 widget。
• textAlign
  类型：TextAlign?
  说明：文本的对齐方式，默认值为 null（使用父 widget 的对齐方式）。
• softWrap
  类型：bool
  说明：是否自动换行，默认值为 true。
• overflow
  类型：TextOverflow
  说明：文本溢出处理方式，默认值为 TextOverflow.clip。
• maxLines
  类型：int?
  说明：显示文本的最大行数，默认值为 null（无限制）。

示例

class DefaultTextStyleTransitionExample extends StatefulWidget {
  @override
  _DefaultTextStyleTransitionExampleState createState() =>
      _DefaultTextStyleTransitionExampleState();
}

class _DefaultTextStyleTransitionExampleState
    extends State<DefaultTextStyleTransitionExample>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<TextStyle> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);

    _animation = TextStyleTween(
      begin: TextStyle(fontSize: 20, color: Colors.blue),
      end: TextStyle(fontSize: 40, color: Colors.red),
    ).animate(_controller);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: DefaultTextStyleTransition(
        style: _animation,
        child: Text('Flutter 动画示例'),
      ),
    );
  }
}

 
 

DecoratedBoxTransition

DecoratedBoxTransition 是一个 Flutter widget，用于在给定时间内逐渐更改其子 widget 的装饰（如背景颜色、边框、阴影等）。它通过 Animation 控制装饰属性的变化，常用于需要装饰动画效果的场景。

属性解析

const DecoratedBoxTransition({
    super.key,
    required this.decoration,
    this.position = DecorationPosition.background,
    required this.child,
  })

• key
  类型：Key?
  说明：控件的键值，用于标识控件。
• decoration (required)
  类型：Animation
  说明：控制装饰变化的动画。
• position
  类型：DecorationPosition
  说明：定义装饰的位置，可以是 DecorationPosition.background 或 DecorationPosition.foreground，默认值为 DecorationPosition.background。
• child (required)
  类型：Widget
  说明：被应用装饰动画的子 widget。

示例

class DecoratedBoxTransitionExample extends StatefulWidget {
  @override
  _DecoratedBoxTransitionExampleState createState() =>
      _DecoratedBoxTransitionExampleState();
}

class _DecoratedBoxTransitionExampleState
    extends State<DecoratedBoxTransitionExample>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<Decoration> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);

    _animation = DecorationTween(
      begin: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(8),
        boxShadow: [BoxShadow(color: Colors.black45, blurRadius: 10)],
      ),
      end: BoxDecoration(
        color: Colors.red,
        borderRadius: BorderRadius.circular(30),
        boxShadow: [BoxShadow(color: Colors.black87, blurRadius: 30)],
      ),
    ).animate(_controller);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: DecoratedBoxTransition(
        decoration: _animation,
        child: Container(width: 200, height: 200),
      ),
    );
  }
}

 
 

PositionedTransition

PositionedTransition 是一个 Flutter widget，用于在给定时间内逐渐更改其子 widget 的位置。它通过 Animation 来控制子元素的位置变化，常用于需要执行位置动画的场景。

属性解析

const PositionedTransition({
    super.key,
    required Animation<RelativeRect> rect,
    required this.child,
  })

• key
  类型：Key?
  说明：控件的键值，用于标识控件。
• rect (required)
  类型：Animation
  说明：控制位置变化的相对矩形动画。
• child (required)
  类型：Widget
  说明：包含要应用位置动画的子 widget。

示例

class PositionedTransitionExample extends StatefulWidget {
  @override
  _PositionedTransitionExampleState createState() =>
      _PositionedTransitionExampleState();
}

class _PositionedTransitionExampleState
    extends State<PositionedTransitionExample>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<RelativeRect> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);

    _animation = RelativeRectTween(
      begin: RelativeRect.fromLTRB(50, 50, 50, 50),
      end: RelativeRect.fromLTRB(150, 150, 50, 50),
    ).animate(CurvedAnimation(parent: _controller, curve: Curves.easeInOut));
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        PositionedTransition(
          rect: _animation,
          child: Container(color: Colors.blue, width: 100, height: 100),
        ),
      ],
    );
  }
}

 
 

Hero 动画进阶用法（自定义动画）

Hero 是一个 Flutter widget，用于在页面之间共享元素的动画过渡。它可以创建一种视觉效果，使得一个 widget 看起来像是从一个页面飞跃到另一个页面。这在应用导航时非常有用

属性解析

const Hero({
    super.key,
    required this.tag,
    this.createRectTween,
    this.flightShuttleBuilder,
    this.placeholderBuilder,
    this.transitionOnUserGestures = false,
    required this.child,
  })

• key
  类型：Key?
  说明：控件的键值，用于标识控件。
• tag (required)
  类型：Object
  说明：用于标识 Hero 的标签，必须在整个应用程序中唯一。源和目标 Hero 必须具有相同的标签以实现动画过渡。
• createRectTween
  类型：CreateRectTween?
  说明：用于自定义矩形范围（位置和大小）的动画补间。
• flightShuttleBuilder
  类型：HeroFlightShuttleBuilder?
  说明：用于自定义飞行中的 Hero 的外观。
• placeholderBuilder
  类型：HeroPlaceholderBuilder?
  说明：在飞行期间占位符的位置构建器。
• transitionOnUserGestures
  类型：bool
  说明：是否在用户手势（例如拖动）上执行过渡，默认值为 false。
• child (required)
  类型：Widget
  说明：包含要执行 Hero 动画的子 widget。

示例

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirstPage(),
      routes: {
        '/second': (context) => SecondPage(),
      },
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Custom Hero Animation Example')),
      body: Center(
        child: GestureDetector(
          onTap: () {
            Navigator.pushNamed(context, '/second');
          },
          child: Hero(
            tag: 'hero-tag',
            createRectTween: (begin, end) => RectTween(begin: begin, end: end),
            flightShuttleBuilder: (
              BuildContext flightContext,
              Animation<double> animation,
              HeroFlightDirection flightDirection,
              BuildContext fromHeroContext,
              BuildContext toHeroContext,
            ) {
              return ScaleTransition(
                scale: animation.drive(Tween<double>(begin: 0.0, end: 1.0)),
                child: toHeroContext.widget,
              );
            },
            child: Image.network('https://via.placeholder.com/150', width: 150, height: 150),
          ),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second Page')),
      body: Center(
        child: Hero(
          tag: 'hero-tag',
          child: Image.network('https://via.placeholder.com/600', width: 300, height: 300),
        ),
      ),
    );
  }
}

 
 

AnimatedCrossFade

AnimatedCrossFade 是一个 Flutter widget，用于在两个子 widget 之间进行淡入淡出的动画过渡。这在切换显示内容时非常有用，例如在加载内容时显示进度指示器和实际内容之间的切换。

属性解析

  const AnimatedCrossFade({
    super.key,
    required this.firstChild,
    required this.secondChild,
    this.firstCurve = Curves.linear,
    this.secondCurve = Curves.linear,
    this.sizeCurve = Curves.linear,
    this.alignment = Alignment.topCenter,
    required this.crossFadeState,
    required this.duration,
    this.reverseDuration,
    this.layoutBuilder = defaultLayoutBuilder,
    this.excludeBottomFocus = true,
  })

• key
  类型：Key?
  说明：控件的键值，用于标识控件。
• firstChild (required)
  类型：Widget
  说明：第一个子 widget。
• secondChild (required)
  类型：Widget
  说明：第二个子 widget。
• firstCurve
  类型：Curve
  说明：定义 firstChild 淡入淡出的动画曲线，默认值为 Curves.linear。
• secondCurve
  类型：Curve
  说明：定义 secondChild 淡入淡出的动画曲线，默认值为 Curves.linear.
• sizeCurve
  类型：Curve
  说明：定义大小变化的动画曲线，默认值为 Curves.linear。
• alignment
  类型：AlignmentGeometry
  说明：子 widget 的对齐方式，默认值为 Alignment.topCenter。
• crossFadeState (required)
  类型：CrossFadeState
  说明：定义当前显示的是哪个子 widget，可以是 CrossFadeState.showFirst 或 CrossFadeState.showSecond。
• duration (required)
  类型：Duration
  说明：定义动画的持续时间。
• reverseDuration
  类型：Duration?
  说明：定义反向动画的持续时间，默认情况下与 duration 相同。
• layoutBuilder
  类型：AnimatedCrossFadeBuilder
  说明：自定义布局构建器，用于放置两个子 widget，默认值为 defaultLayoutBuilder。
• excludeBottomFocus
  类型：bool
  说明：是否从底部视图中排除焦点，默认值为 true。

示例

class AnimatedCrossFadeExample extends StatefulWidget {
  @override
  _AnimatedCrossFadeExampleState createState() => _AnimatedCrossFadeExampleState();
}

class _AnimatedCrossFadeExampleState extends State<AnimatedCrossFadeExample> {
  bool _showFirst = true;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          AnimatedCrossFade(
            duration: Duration(seconds: 2),
            firstChild: Container(color: Colors.blue, width: 100, height: 100),
            secondChild: Container(color: Colors.red, width: 200, height: 200),
            crossFadeState: _showFirst ? CrossFadeState.showFirst : CrossFadeState.showSecond,
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: () {
              setState(() {
                _showFirst = !_showFirst;
              });
            },
            child: Text('Toggle'),
          ),
        ],
      ),
    );
  }
}

 
 

AnimatedPadding

AnimatedPadding 是一个 Flutter widget，用于在给定时间内逐渐更改其子 widget 的填充（padding）。它通过动画过渡来实现这一效果，使得布局变化更加平滑和生动。以下是这些参数的解释以及一个示例：

属性解析

AnimatedPadding({
    super.key,
    required this.padding,
    this.child,
    super.curve,
    required super.duration,
    super.onEnd,
  })

• key
  类型：Key?
  说明：控件的键值，用于标识控件。
• padding (required)
  类型：EdgeInsetsGeometry
  说明：用于定义内部填充（padding）的属性。
• child
  类型：Widget?
  说明：被应用填充动画的子 widget。
• curve
  类型：Curve
  说明：定义动画的曲线。默认值为 Curves.linear。
• duration (required)
  类型：Duration
  说明：定义动画的持续时间。
• onEnd
  类型：VoidCallback?
  说明：动画结束时的回调函数。

示例

class AnimatedPaddingExample extends StatefulWidget {
  @override
  _AnimatedPaddingExampleState createState() => _AnimatedPaddingExampleState();
}

class _AnimatedPaddingExampleState extends State<AnimatedPaddingExample> {
  double _paddingValue = 10.0;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          AnimatedPadding(
            padding: EdgeInsets.all(_paddingValue),
            duration: Duration(seconds: 2),
            curve: Curves.easeInOut,
            child: Container(color: Colors.blue, width: 100, height: 100),
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: () {
              setState(() {
                _paddingValue = _paddingValue == 10.0 ? 40.0 : 10.0;
              });
            },
            child: Text('Change Padding'),
          ),
        ],
      ),
    );
  }
}

 
 

AnimatedAlign

AnimatedAlign 是一个 Flutter widget，用于在给定时间内逐渐更改其子 widget 的对齐方式（alignment）。通过动画过渡来实现这一效果，可以使布局变化更加平滑和生动。

属性解析

const AnimatedAlign({
    super.key,
    required this.alignment,
    this.child,
    this.heightFactor,
    this.widthFactor,
    super.curve,
    required super.duration,
    super.onEnd,
  })

• key
  类型：Key?
  说明：控件的键值，用于标识控件。
• alignment (required)
  类型：AlignmentGeometry
  说明：用于定义子 widget 的对齐方式。
• child
  类型：Widget?
  说明：被应用对齐动画的子 widget。
• heightFactor
  类型：double?
  说明：如果不为 null，该值会乘以 child 的高度以决定 AnimatedAlign 的高度。
• widthFactor
  类型：double?
  说明：如果不为 null，该值会乘以 child 的宽度以决定 AnimatedAlign 的宽度。
• curve
  类型：Curve
  说明：定义动画的曲线，默认值为 Curves.linear。
• duration (required)
  类型：Duration
  说明：定义动画的持续时间。
• onEnd
  类型：VoidCallback?
  说明：动画结束时的回调函数。

示例

class AnimatedAlignExample extends StatefulWidget {
  @override
  _AnimatedAlignExampleState createState() => _AnimatedAlignExampleState();
}

class _AnimatedAlignExampleState extends State<AnimatedAlignExample> {
  bool _topLeft = true;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Stack(
        children: <Widget>[
          AnimatedAlign(
            alignment: _topLeft ? Alignment.topLeft : Alignment.bottomRight,
            duration: Duration(seconds: 2),
            curve: Curves.easeInOut,
            child: Container(color: Colors.blue, width: 50, height: 50),
          ),
          Positioned(
            bottom: 20,
            left: 20,
            child: ElevatedButton(
              onPressed: () {
                setState(() {
                  _topLeft = !_topLeft;
                });
              },
              child: Text('Change Alignment'),
            ),
          ),
        ],
      ),
    );
  }
}

 
 

AnimatedTheme

AnimatedTheme 是一个 Flutter widget，用于在给定时间内逐渐更改应用的主题（Theme）。通过动画过渡来实现这一效果，可以使主题变化更加平滑和生动。

属性解析

 const AnimatedTheme({
    super.key,
    required this.data,
    super.curve,
    super.duration = kThemeAnimationDuration,
    super.onEnd,
    required this.child,
  })

• key
  类型：Key?
  说明：控件的键值，用于标识控件。
• data (required)
  类型：ThemeData
  说明：定义新的主题数据。
• curve
  类型：Curve
  说明：定义动画的曲线，默认值为 Curves.linear。
• duration
  类型：Duration
  说明：定义动画的持续时间，默认值为 kThemeAnimationDuration（200毫秒）。
• onEnd
  类型：VoidCallback?
  说明：动画结束时的回调函数。
• child (required)
  类型：Widget
  说明：被应用主题动画的子 widget。

示例

class AnimatedThemeExample extends StatefulWidget {
  @override
  _AnimatedThemeExampleState createState() => _AnimatedThemeExampleState();
}

class _AnimatedThemeExampleState extends State<AnimatedThemeExample> {
  bool _isDark = false;

  @override
  Widget build(BuildContext context) {
    return AnimatedTheme(
      data: _isDark ? ThemeData.dark() : ThemeData.light(),
      duration: Duration(seconds: 2),
      child: Scaffold(
        appBar: AppBar(title: Text('Animated Theme Example')),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              setState(() {
                _isDark = !_isDark;
              });
            },
            child: Text('Toggle Theme'),
          ),
        ),
      ),
    );
  }
}

 
 

AnimatedPhysicalModel

AnimatedPhysicalModel 是一个 Flutter widget，用于在给定时间内逐渐更改其子 widget 的物理属性（如形状、边框半径、阴影颜色等）。通过动画过渡来实现这一效果，可以使界面变化更加平滑和生动。

属性解析

const AnimatedPhysicalModel({
    super.key,
    required this.child,
    required this.shape,
    this.clipBehavior = Clip.none,
    this.borderRadius = BorderRadius.zero,
    required this.elevation,
    required this.color,
    this.animateColor = true,
    required this.shadowColor,
    this.animateShadowColor = true,
    super.curve,
    required super.duration,
    super.onEnd,
  })

• key
  类型：Key?
  说明：控件的键值，用于标识控件。
• child (required)
  类型：Widget
  说明：被应用动画的子 widget。
• shape (required)
  类型：BoxShape
  说明：定义子 widget 的形状，可以是 BoxShape.rectangle 或 BoxShape.circle。
• clipBehavior
  类型：Clip
  说明：定义对剪辑行为的控制，默认值为 Clip.none。
• borderRadius
  类型：BorderRadius
  说明：定义圆角矩形的圆角半径，默认值为 BorderRadius.zero。当 shape 为 BoxShape.rectangle 时有效。
• elevation (required)
  类型：double
  说明：定义子 widget 的阴影高度。
• color (required)
  类型：Color
  说明：定义子 widget 的背景颜色。
• animateColor
  类型：bool
  说明：是否对颜色变化进行动画处理，默认值为 true。
• shadowColor (required)
  类型：Color
  说明：定义子 widget 的阴影颜色。
• animateShadowColor
  类型：bool
  说明：是否对阴影颜色变化进行动画处理，默认值为 true。
• curve
  类型：Curve
  说明：定义动画的曲线，默认值为 Curves.linear。
• duration (required)
  类型：Duration
  说明：定义动画的持续时间。
• onEnd
  类型：VoidCallback?
  说明：动画结束时的回调函数。

示例

class AnimatedPhysicalModelExample extends StatefulWidget {
  @override
  _AnimatedPhysicalModelExampleState createState() => _AnimatedPhysicalModelExampleState();
}

class _AnimatedPhysicalModelExampleState extends State<AnimatedPhysicalModelExample> {
  bool _elevated = false;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          AnimatedPhysicalModel(
            borderRadius: _elevated ? BorderRadius.circular(20) : BorderRadius.circular(5),
            shape: BoxShape.rectangle,
            elevation: _elevated ? 10 : 2,
            color: Colors.white,
            shadowColor: Colors.black,
            duration: Duration(seconds: 2),
            child: Container(color: Colors.blue, width: 100, height: 100),
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: () {
              setState(() {
                _elevated = !_elevated;
              });
            },
            child: Text('Toggle Elevation'),
          ),
        ],
      ),
    );
  }
}

 
 

AnimatedModalBarrier

AnimatedModalBarrier 是一个 Flutter widget，用于在给定时间内逐渐更改其颜色。它通常用于模态屏障，例如弹出对话框的背景遮罩。当屏障被激活时，它会覆盖所有界面元素，以阻止用户与背景进行交互。

属性解析

const AnimatedModalBarrier({
    super.key,
    required Animation<Color?> color,
    this.dismissible = true,
    this.semanticsLabel,
    this.barrierSemanticsDismissible,
    this.onDismiss,
    this.clipDetailsNotifier,
    this.semanticsOnTapHint,
  })

• key
  类型：Key?
  说明：控件的键值，用于标识控件。
• color (required)
  类型：Animation<Color?>
  说明：定义屏障的颜色动画，用于逐渐更改屏障的颜色。
• dismissible
  类型：bool
  说明：是否允许点击屏障以关闭模态层，默认值为 true。
• semanticsLabel
  类型：String?
  说明：屏障的语义标签，用于辅助功能。
• barrierSemanticsDismissible
  类型：bool?
  说明：是否应允许通过语音助手等辅助功能来解除屏障。
• onDismiss
  类型：VoidCallback?
  说明：屏障被解除时的回调函数。
• clipDetailsNotifier
  类型：ValueNotifier?
  说明：通知剪辑区域的变更。
• semanticsOnTapHint
  类型：String?
  说明：语义上的提示，当屏障被点击时触发。

示例

class AnimatedModalBarrierExample extends StatefulWidget {
  @override
  _AnimatedModalBarrierExampleState createState() =>
      _AnimatedModalBarrierExampleState();
}

class _AnimatedModalBarrierExampleState
    extends State<AnimatedModalBarrierExample>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  bool _showBarrier = false;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  void _toggleBarrier() {
    setState(() {
      _showBarrier = !_showBarrier;
      if (_showBarrier) {
        _controller.forward();
      } else {
        _controller.reverse();
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Center(
          child: ElevatedButton(
            onPressed: _toggleBarrier,
            child: Text('Toggle Barrier'),
          ),
        ),
        if (_showBarrier)
          AnimatedModalBarrier(
            color: _controller.drive(
                ColorTween(begin: Colors.transparent, end: Colors.black54)),
            dismissible: true,
          ),
      ],
    );
  }
}

 
 

AnimatedBuilder

AnimatedBuilder 是一个 Flutter widget，用于在动画发生变化时重建子 widget 的树结构。它提供了一种高效的方法来使用动画，而不需要从头开始构建整个 widget 树。

属性解析

const AnimatedBuilder({
    super.key,
    required Listenable animation,
    required super.builder,
    super.child,
  }) 

• key
  类型：Key?
  说明：控件的键值，用于标识控件。
• animation (required)
  类型：Listenable
  说明：定义动画对象，通常是 AnimationController 或者其他实现了 Listenable 接口的对象。
• builder (required)
  类型：Widget Function(BuildContext, Widget?)
  说明：构建子 widget 的回调函数，在动画发生变化时被调用。
• child
  类型：Widget?
  说明：不会发生变化的静态子 widget，可用于优化性能。

示例

class AnimatedBuilderExample extends StatefulWidget {
  @override
  _AnimatedBuilderExampleState createState() => _AnimatedBuilderExampleState();
}

class _AnimatedBuilderExampleState extends State<AnimatedBuilderExample>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: AnimatedBuilder(
        animation: _controller,
        builder: (context, child) {
          return Transform.rotate(
            angle: _controller.value * 2.0 * 3.14159,
            child: child,
          );
        },
        child: FlutterLogo(size: 100),
      ),
    );
  }
}