Flutter中如何转换动画值范围以实现自定义CrossFadeTransition？

Flutter 自带了专门适配你需求的动画转换工具，不需要手动计算范围映射，也不用自己处理反向动画的精度偏差。

可用的核心内置能力 #

• 任意动画范围到0-1区间的转换
  所有 Animation<double> 实例都提供了 drive 方法，可以自动读取原动画的取值上下界（lowerBound/upperBound）做映射转换。比如你传入的动画范围是100.0到200.0，只要执行原动画.drive(Tween(begin: 0.0, end: 1.0))，就能得到一个严格取值在0-1之间的新动画：原动画走到起点（100.0）时新值为0，走到终点（200.0）时新值为1，完全满足你需要的归一化需求。
  相比手动写除法计算归一化值，这个方法可以自动适配原动画的任意取值范围，不会因为原动画边界变动出现计算错误。
• 无误差的反向动画生成
  Flutter 提供了 ReverseAnimation 类，专门用来生成和原动画进度严格反向的动画实例。不需要手动写1.0 - 动画值计算反向值，就能保证正向、反向值始终加和为1，完全同步两个子的淡入淡出进度。

你当前实现里的问题 #

• 没有做动画范围适配：FadeTransition 要求传入的透明度动画取值必须严格在0-1区间，如果你传入的是100.0到200.0范围的动画，直接传给FadeTransition会直接触发框架的取值范围异常。
• 交叉淡化逻辑错误：当前两个子Widget绑定了同一个透明度动画，最终会出现两个子同步变亮/变暗的效果，完全实现不了交叉淡化的效果。
• 反向值计算不兼容任意输入范围：比如传入的动画范围是100.0到200.0时，1.0 - opacity.value 会得到-99到-199的非法透明度值，根本无法正常使用。

修正后的实现代码 #

class CrossFadeTransition extends AnimatedWidget {
  const CrossFadeTransition({
    Key? key,
    required Animation<double> opacity,
    required this.outgoingChild,
    required this.ingoingChild,
  }) : super(key: key, listenable: opacity);

  final Widget outgoingChild;
  final Widget ingoingChild;

  Animation<double> get opacity => listenable as Animation<double>;

  @override
  Widget build(BuildContext context) {
    // 把任意范围的传入动画归一化到严格0-1区间
    final normalizedProgress = opacity.drive(Tween(begin: 0.0, end: 1.0));
    // 生成严格反向的动画，供淡出的子组件使用
    final reverseProgress = ReverseAnimation(normalizedProgress);

    return Stack(
      fit: StackFit.expand,
      children: [
        // 待淡出的子：透明度从1逐步降到0
        FadeTransition(
          opacity: reverseProgress,
          child: outgoingChild,
        ),
        // 待淡入的子：透明度从0逐步升到1
        FadeTransition(
          opacity: normalizedProgress,
          child: ingoingChild,
        ),
      ],
    );
  }
}

补充：如果不想使用drive方法做归一化，也可以通过原动画的边界值手动计算归一化值，公式为(opacity.value - opacity.lowerBound) / (opacity.upperBound - opacity.lowerBound)，效果和drive完全一致，但需要自行处理边界差值为0的异常场景。

内容的提问来源于stack exchange，提问作者goodonion