如何为Flutter Codelab将SizeTransition转换为FadeTransition

时间:2018-11-15 02:59:31

标签: dart flutter flutter-animation

我是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。)

2 个答案:

答案 0 :(得分:0)

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

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

opacity: animation

使用

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

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

答案 1 :(得分:0)

您可以尝试

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

CurvedAnimation用于非线性动画。

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

查看更多详细信息