Flutter fadein 动画总是显示黑屏

Question

我正在尝试创建一个 flutter 应用程序，其中背景图像会根据来自 API 的数据发生变化。我编写了以下代码，使用双打 AnimationController 和 Animation 让屏幕淡入淡出，但是每当我尝试加载应用程序时，我得到的只是黑屏。

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() => runApp(RootWidget());

class RootWidget extends StatefulWidget {
  @override
  _RootWidgetState createState() => _RootWidgetState();
}

class _RootWidgetState extends State<RootWidget> with TickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();

    _controller =
        AnimationController(vsync: this, duration: Duration(milliseconds: 500));

    _animation =
        Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation(
          parent: _controller,
          curve: Curves.easeOut
        ));
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData(primarySwatch: Colors.green),
        home: AnimatedOpacity(
          opacity: _animation.value,
          duration: Duration(milliseconds: 1000),
          child: Scaffold(
            appBar: AppBar(
              title: Text('Vuetiful Mobile'),
            ),
            body: Container(
                decoration: BoxDecoration(
                    image: DecorationImage(
                        image: AssetImage('assets/Sunny-photo.jpg'),
                        fit: BoxFit.cover
                    )
                ),
                child: Container(
                    color: Color.fromARGB(100, 0, 0, 0),
                    child: Center(
                        child: Text('Temp', style: TextStyle(color: Colors.white))
                    )
                )
            ),
          ),
        ),
    );
  }
}

Answer 1

您应该选择使用 AnimationController 或 AnimatedOpacity 小部件，但不能同时使用。

AnimatedOpacity 已经是不透明度的动画版本，因此向其添加控制器并不能满足您的要求；它自己处理所有必要的动画逻辑。您只需要提供一个不透明度，它就会在给定的持续时间和给定的曲线上对其进行动画处理。

可能更简单的解决方案是坚持使用 AnimatedOpacity 并摆脱控制器。然后使用 post 帧回调设置不透明度值：

class _RootWidgetState extends State<RootWidget> {
  double opacity = 0;

  @override
  void initState() {
    super.initState();

    WidgetsBinding.instance.addPostFrameCallback((_) {
      setState(() {
        opacity = 1;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData(primarySwatch: Colors.green),
        home: AnimatedOpacity(
          opacity: opacity,
          curve: Curves.easeOut,//Add your curve here
          duration: Duration(milliseconds: 1000),//Set your desired duration
          child: Scaffold(
            appBar: AppBar(
              title: Text('Vuetiful Mobile'),
            ),
            body: Container(
                decoration: BoxDecoration(
                    image: DecorationImage(
                        image: AssetImage('assets/Sunny-photo.jpg'),
                        fit: BoxFit.cover
                    )
                ),
                child: Container(
                    color: Color.fromARGB(100, 0, 0, 0),
                    child: Center(
                        child: Text('Temp', style: TextStyle(color: Colors.white))
                    )
                )
            ),
          ),
        ),
    );
  }
}

这个解决方案最终也变得更有效率，因为 flutter 不必为每个 tick 重建那么多东西。

或者，您可以保留 AnimationController 并将 AnimatedOpacity 更改为 Opacity:

class _RootWidgetState extends State<RootWidget> with TickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(vsync: this, duration: Duration(milliseconds: 500));
    _controller.addListener(() {
      setState((){});
    });
    _controller.forward();
    
    _animation =
        Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation(
          parent: _controller,
          curve: Curves.easeOut
        ));
   
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData(primarySwatch: Colors.green),
        home: Opacity(
          opacity: _animation.value,
          child: Scaffold(
            appBar: AppBar(
              title: Text('Vuetiful Mobile'),
            ),
            body: Container(
                decoration: BoxDecoration(
                    image: DecorationImage(
                        image: AssetImage('assets/Sunny-photo.jpg'),
                        fit: BoxFit.cover
                    )
                ),
                child: Container(
                    color: Color.fromARGB(100, 0, 0, 0),
                    child: Center(
                        child: Text('Temp', style: TextStyle(color: Colors.white))
                    )
                )
            ),
          ),
        ),
    );
  }
}

Flutter fadein 动画总是显示黑屏

Flutter fadein animation always shows black screen

dart

flutter

flutter-animation