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的{{1}}

Animation<Double>

如何创建或发送@override Widget build(BuildContext context) { return new FadeTransition( opacity: animation child: new Container( // ... other codes ... ), ); }？（上面的代码将无法识别animation。）

Answer 1

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

要拥有FadeTransition，基本上只需替换

opacity: animation

使用

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

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

Answer 2

您可以尝试

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

CurvedAnimation用于非线性动画。

在这里https://flutter.dev/docs/development/ui/animations/tutorial

查看更多详细信息

如何为Flutter Codelab将SizeTransition转换为FadeTransition

2 个答案: