Flutter如何转换动画值范围？答案

【问题标题】：Flutter how do I convert the animation value range?Flutter如何转换动画值范围？
【发布时间】：2021-03-07 08:50:58
【问题描述】：

我想制作自己的CrossFadeTransition。我能想到的实现是获取一个动画，两个子小部件，并根据动画的值，淡入一个孩子并淡出另一个孩子。但是为了同时淡入和淡出它们，我需要动画的反转值。因为传入的动画值可以在任何范围内，我需要一些方法将它们转换为我自己的范围值。例如，如果我传递的动画范围是 100.0 到 200.0，我想将该值转换为 0.0 到 1.0，这样我就可以确保动画的最大值为 1.0。通过这样做，我可以获得动画的反转值。有没有办法转换动画值？

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) {
    final double outgoingValue = 1.0 - opacity.value; // There's no guarantee that 1.0 would be the max value for the animation.
    final double ingoingValue = opacity.value;
    return Stack(
      fit: StackFit.expand,
      children: [
        FadeTransition(
          opacity: opacity,
          child: outgoingChild,
        ),
        FadeTransition(
          opacity: opacity,
          child: ingoingChild,
        ),
      ],
    );
  }
}

【问题讨论】：

标签： flutter dart flutter-animation

【解决方案1】：

如果我理解正确的话，

您将 opacity 动画值从 100 传递到 200，并且您可以完全控制调用具有附加值的构造函数

像min: 100 和max: 200 一样通过构造函数传递它们，并在小部件上创建一个辅助方法来将此范围从100.0-200.0 转换为0.0-1.0

示例函数Reference

double get outgoingValue(double OldValue){
    return (((OldValue - OldMin) * (NewMax - NewMin)) / (OldMax - OldMin)) + NewMin;

}

NewValue = (((OldValue - OldMin) * (NewMax - NewMin)) / (OldMax - OldMin)) + NewMin

例如如果当前操作：200

NewValue = (200 - 100) * (1 - 0) / (200 - 100) + 0.0 
         = 1

例如如果当前操作：100

NewValue = (100 - 100) * (1 - 0) / (200 - 100) + 0.0 
         = 0

例如如果当前操作：150

NewValue = (150 - 100) * (1 - 0) / (200 - 100) + 0.0 
         = 0.5

【讨论】：