文本数据更改时颤动动画过渡答案

【问题标题】：Flutter animate transition when Text data changes文本数据更改时颤动动画过渡
【发布时间】：2019-01-13 08:24:24
【问题描述】：

当Text 元素的数据发生变化时，Flutter 中有没有办法为过渡设置动画？

我有一个new Text(_value) 元素，其中_value 根据滑块位置而变化。有什么方法可以为过渡设置动画，使其不像刚刚更改 _value 时那样“突然”？

我知道有一些小部件可以为两个不同小部件之间的过渡设置动画，但我只是更改了同一个 Text 小部件的 data 属性。

【问题讨论】：

文本值可能会突然改变，但滑块位置不会。我可能会将它的位置输入动画控制器。既然它和文字是相关的，那么只要动画流畅，哪一个控制动画真的很重要吗？
但是我到底要制作什么动画？基本上我只有Text(dataArray[sliderPosition.round()]。看起来我将不得不堆叠所有可能的文本并对不透明度或其他东西进行动画处理......希望有一个 TransitionAnimation 可以涵盖对儿童的所有更新或类似的东西。
在两个文本小部件之间使用淡入淡出，或者旋转显示并让它改变一半......你做什么取决于你。我的意思是，如果你想让它平滑，然后使用滑块来控制动画，或者当值发生变化时触发动画，而不是仅仅更新值。
您可以为此使用 AnimatedSwitcher
您可以查看github.com/ibhavikmakwana/FlutterPlayground/blob/master/lib/ui/…

标签： flutter flutter-animation

【解决方案1】：

我需要同样的东西，所以我创建了一个 cross_fade 小部件。

https://gist.github.com/cirediew/38abb52e27278dae2b8eba77ed4b3bdc

第一次显示需要initialData。 data 是您的 String/double/int/您想放入交叉淡入淡出小部件的任何内容。还有builder，您可以在其中创建小部件。

它是这样使用的：

CrossFade<String>(
    initialData: 'Some String',
    data: myString,
    builder: (value) => Text(value),
),

编辑：

空安全版本，重命名为AnimatedFadeOutIn： https://gist.github.com/cirediew/9f68acb7aed1296a232a5f846071d2c3

【讨论】：

【解决方案2】：

用 AnimatedSwitcher 小部件包裹您的文本小部件，然后在 transitionBuilder 中定义您的孩子。

在孩子（文本小部件）中，定义一个这样的键：

AnimatedSwitcher(
  duration: Duration(milliseconds: 200),
  transitionBuilder:
      (Widget child, Animation<double> animation) {
    return SlideTransition(
      child: child,
      position: Tween<Offset>(
              begin: Offset(0.0, -0.5),
              end: Offset(0.0, 0.0))
          .animate(animation),
    );
  },
  child: Text(
    userAnswer,
    key: ValueKey<String>(userAnswer),
    style: TextStyle(fontSize: 45, color: Colors.white),
  ),
)

哪个 userAnswer 是字符串。

【讨论】：