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并摆脱控制器。然后使用后框架回调设置不透明度值：

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))
                    )
                )
            ),
          ),
        ),
    );
  }
}

该解决方案最终也变得更加高效，因为颤动不必为每个刻度重新构建太多的东西。

或者，您可以保留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))
                    )
                )
            ),
          ),
        ),
    );
  }
}

抖动淡入淡出动画始终显示黑屏

1 个答案: