Flutter TweenSequence 复合动画：如何优雅编排复杂动画时间轴

在 Flutter 动效开发中，当我们需要实现一个多阶段的复合交互动效时（例如：一个添加成功的购物车图标，先向下下沉缩放 20%，随后旋转 360 度并高亮变色，最后像气球一样弹跳放大归位），初学者往往会陷入“状态控制器地狱（Controller Hell）”：

在代码里声明了 3 个不同的 AnimationController，在第一个 Controller 的 addStatusListener 监听器里手动调用第二个 Controller 的 forward()，再在第二个监听器里调用第三个……

这种通过回调嵌套拼凑起来的代码，不仅冗长难读、极易引发内存泄漏与时序错位，而且在执行反向播放（Reverse）或页面销毁时，状态会彻底乱成一团麻。

Flutter 官方动画体系中提供了一个极度优雅的复合时间轴解法——TweenSequence（补间序列）。它允许我们在单个控制器内，通过**加权时间片（Weighted Time Slices）**将多个不同阶段的补间动画严密拼接为一条平滑自洽的复合时间轴。

TweenSequence 的核心权重模型

TweenSequence 的核心思想是将一个总时长 $T$（由单一 AnimationController 驱动）划分为多个连续的区间片段，每个片段通过 TweenSequenceItem 承载：

1. tween：该阶段专有的补间插值器（如 Tween<double>(begin: 0.0, end: 1.2)）或复合曲线 CurveTween；
2. weight（权重）：该阶段占总时间周期的相对百分比。所有子项的 weight 相加之和即为总分母（通常归一化为 100.0）。

[总时间轴: 1000ms]
┌──────────────────┬─────────────────────────────┬─────────────────────┐
│ 阶段 1: 下沉蓄力  │ 阶段 2: 3D 旋转与高亮变色    │ 阶段 3: 弹性过冲归位  │
│ weight: 20.0     │ weight: 50.0                │ weight: 30.0        │
└──────────────────┴─────────────────────────────┴─────────────────────┘

完整工程实战：带弹性过冲的购物车成功动效

让我们用一个单一的 AnimationController，通过 TweenSequence 驱动包含缩放、旋转与颜色变化的三轨复合动画：

// complex_success_animation.dart
import 'package:flutter/material.dart';

class ComplexSuccessIcon extends StatefulWidget {
  const ComplexSuccessIcon({Key? key}) : super(key: key);

  @override
  State<ComplexSuccessIcon> createState() => _ComplexSuccessIconState();
}

class _ComplexSuccessIconState extends State<ComplexSuccessIcon>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _scaleAnimation;
  late Animation<double> _rotationAnimation;
  late Animation<Color?> _colorAnimation;

  @override
  void initState() {
    super.initState();

    // 唯一的控制器：总时长 900ms
    _controller = AnimationController(
      duration: const Duration(milliseconds: 900),
      vsync: this,
    );

    // 1. 缩放时间轴：下沉 (0.8) -> 极速放大 (1.25) -> 弹性落回 (1.0)
    _scaleAnimation = TweenSequence<double>([
      TweenSequenceItem(
        tween: Tween<double>(begin: 1.0, end: 0.8)
            .chain(CurveTween(curve: Curves.easeIn)),
        weight: 20.0, // 占前 20% 时长
      ),
      TweenSequenceItem(
        tween: Tween<double>(begin: 0.8, end: 1.25)
            .chain(CurveTween(curve: Curves.easeOutBack)),
        weight: 50.0, // 占中间 50% 时长
      ),
      TweenSequenceItem(
        tween: Tween<double>(begin: 1.25, end: 1.0)
            .chain(CurveTween(curve: Curves.easeInOut)),
        weight: 30.0, // 占最后 30% 时长
      ),
    ]).animate(_controller);

    // 2. 旋转时间轴：在中间阶段执行 360 度 (2*pi) 顺时针翻转
    _rotationAnimation = TweenSequence<double>([
      TweenSequenceItem(
        tween: ConstantTween<double>(0.0),
        weight: 20.0, // 前 20% 保持不动
      ),
      TweenSequenceItem(
        tween: Tween<double>(begin: 0.0, end: 2 * 3.1415926)
            .chain(CurveTween(curve: const Cubic(0.16, 1.0, 0.3, 1.0))),
        weight: 60.0, // 中间 60% 快速翻转
      ),
      TweenSequenceItem(
        tween: ConstantTween<double>(2 * 3.1415926),
        weight: 20.0, // 后 20% 保持终态
      ),
    ]).animate(_controller);

    // 3. 颜色时间轴：中性灰 -> 品牌亮绿
    _colorAnimation = TweenSequence<Color?>([
      TweenSequenceItem(
        tween: ColorTween(begin: const Color(0xFF64748B), end: const Color(0xFF64748B)),
        weight: 20.0,
      ),
      TweenSequenceItem(
        tween: ColorTween(begin: const Color(0xFF64748B), end: const Color(0xFF10B981))
            .chain(CurveTween(curve: Curves.linear)),
        weight: 50.0,
      ),
      TweenSequenceItem(
        tween: ColorTween(begin: const Color(0xFF10B981), end: const Color(0xFF10B981)),
        weight: 30.0,
      ),
    ]).animate(_controller);
  }

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

  void _playAnimation() {
    _controller.reset();
    _controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _playAnimation,
      child: AnimatedBuilder(
        animation: _controller,
        builder: (context, child) {
          return Transform.scale(
            scale: _scaleAnimation.value,
            child: Transform.rotate(
              angle: _rotationAnimation.value,
              child: Container(
                width: 64,
                height: 64,
                decoration: BoxDecoration(
                  color: _colorAnimation.value,
                  shape: BoxShape.circle,
                  boxShadow: [
                    BoxShadow(
                      color: (_colorAnimation.value ?? Colors.black).withOpacity(0.3),
                      blurRadius: 16,
                      offset: const Offset(0, 6),
                    ),
                  ],
                ),
                child: const Icon(Icons.check, color: Colors.white, size: 32),
              ),
            ),
          );
        },
      ),
    );
  }
}

TweenSequence 带来的三大架构收益

1. 天然支持完美反向播放（Bi-directional Playback）：调用 _controller.reverse() 时，所有加权片段会以严丝合缝的时间逆序退回起点，绝对零代码改动；
2. 单一生命周期管理：彻底告别多个 Controller 的监听器交叉绑定，内存占用与 CPU 占用降至最低；
3. 参数易维护性：设计师若想将旋转阶段由 50% 压缩为 40%，只需在 weight 数组中微调数字，无需重新计算绝对毫秒毫秒时间戳。

总结

复杂的交互动效从来不是杂乱代码的堆砌，而是清晰时间轴上的精准节拍。掌握 Flutter 的 TweenSequence 复合时间轴编排架构，你就能用最精简、健壮的单一控制器，随心所欲地编排出兼具节奏张力与工业级稳定性的顶级跨端交互动画。