TweenAnimationBuilder 与 AnimatedBuilder 比较

基本概念

TweenAnimationBuilder：

• 是 ImplicitlyAnimatedWidget 的子类
• 提供了一种简单的方式来创建基于 Tween 的隐式动画
• 适用于需要根据数值变化进行动画的场景，如颜色、大小、透明度或位置等过渡效果

AnimatedBuilder：

• 是 AnimatedWidget 的子类
• 一个强大的动画工具类，用于将动画逻辑与UI组件分离
• 主要用于显式动画（需要手动创建 AnimationController）

主要区别

使用示例

TweenAnimationBuilder 示例

TweenAnimationBuilder<double>(
  duration: Duration(seconds: 1),
  tween: Tween<double>(begin: 0, end: 100),
  builder: (BuildContext context, double value, Widget? child) {
    return Container(
      width: value,
      height: value,
      color: Colors.blue,
    );
  },
)

AnimatedBuilder 示例

class MyAnimation extends StatefulWidget {
  @override
  _MyAnimationState createState() => _MyAnimationState();
}

class _MyAnimationState extends State<MyAnimation>
    with TickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 1),
      vsync: this,
    );
    _animation = Tween<double>(begin: 0, end: 100).animate(_controller);
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (BuildContext context, Widget? child) {
        return Container(
          width: _animation.value,
          height: _animation.value,
          color: Colors.blue,
        );
      },
    );
  }

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

性能优化技巧

对于两者都有一个重要的优化技巧：如果 builder 中有不参与动画的组件，应该将其放在 child 参数中，这样可以避免不必要的重建：

TweenAnimationBuilder<double>(
  duration: Duration(seconds: 1),
  tween: Tween<double>(begin: 0, end: 100),
  child: Icon(Icons.star, size: 50), // 不参与动画的部分
  builder: (BuildContext context, double value, Widget? child) {
    return Container(
      width: value,
      height: value,
      color: Colors.blue,
      child: child, // 将不变的widget传递进来
    );
  },
)

选择建议

• 使用 TweenAnimationBuilder 当你需要：

  • 快速实现简单的动画效果
  • 不想手动管理 AnimationController
  • 实现隐式动画（如点击后自动动画到目标值）

• 使用 AnimatedBuilder 当你需要：

  • 更复杂的动画控制
  • 精确控制动画的开始、暂停、反向等
  • 在动画过程中与其他组件交互
  • 需要将动画逻辑与UI组件分离

总的来说，TweenAnimationBuilder 更适合简单、自动化的动画，而 AnimatedBuilder 提供了更多的灵活性和控制能力，适合复杂的动画场景。