dart - Flutter Codelab 如何将 SizeTransition 转换为 FadeTransition

Question

我是 Flutter 和 Dart 的新手。希望得到一些关于我被困的教程练习的指南。

我正在关注 Flutter Codelab https://codelabs.developers.google.com/codelabs/flutter/index.html?index=..%2F..index#6并且能够做任何事情。

它要求我们做一个练习是

通过将 Container 包装在 FadeTransition 小部件而不是 SizeTransition 中来创建淡入动画效果。

代码如下

@override
Widget build(BuildContext context) {
  return new SizeTransition(
    sizeFactor: new CurvedAnimation(
        parent: animationController, curve: Curves.easeOut),
    axisAlignment: 0.0,
    child: new Container(
      // ... other codes ...
    ),
  );
}

所以我改为 FadeTransition，它需要opacity类型Animation<Double>

@override
Widget build(BuildContext context) {
  return new FadeTransition(
    opacity: animation
    child: new Container(
      // ... other codes ...
    ),
  );
}

我怎样才能创建或发送animation？（上面的代码将animation无法识别）。

Answer 1

你可以试试这个

opacity: Tween<double>(
      begin: 0.0,
      end: 1.0,
    ).animate(animationController),

CurvedAnimation用于非线性动画。

在此处查看更多详细信息https://flutter.dev/docs/development/ui/animations/tutorial

Answer 2

通过参考https://proandroiddev.com/getting-your-hands-dirty-with-flutter-basic-animations-6b9f21fa7d17找到答案并进行相应修改。

所以有FadeTransition，基本上只是更换

opacity: animation

和

opacity: new CurvedAnimation(parent: animationController, curve: Curves.easeIn),

这并不理想，因为每次插入消息时，它都会创建一个新的CurveAnimation，但为了简洁的解决方案，我这样做了。