Question

我正在创建一个仪表板，其中包含两个小部件（文本和两个容器）的Tween动画。但是，我想使两个Container的不透明度从不可见变为缓慢...因此我使用了AnimatedOpacity。但是我不知道该怎么做...

任何帮助将不胜感激。

class _IntroState extends State<Intro> with SingleTickerProviderStateMixin {
  Animation animation;
  AnimationController animationController;

   @override
   void initState() {
     super.initState();
      animationController = AnimationController(
        duration: Duration(seconds: 2),
        vsync: this,
     );

    animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation(
        parent: animationController, curve: Curves.fastOutSlowIn));
    animationController.forward();
  }

  @override
  Widget build(BuildContext context) {
    bool _visible = false;
    final double width = MediaQuery.of(context).size.width;

  return AnimatedBuilder(
      animation: animationController,
      builder: (BuildContext context, Widget child) {
         return Scaffold(
           //BODDY
            body: ListView(
              hildren:<Widget>[
                 new Stack(
                   children: <Widget>[
                     new Transform(
                       //ANIMATED OPACITY
                       new AnimatedOpacity(
                          opacity: _visible ? 0.0 : 1.0,
                          duration: Duration(milliseconds: 500),
                          child: new Padding(
                            padding: const EdgeInsets.symmetric(
                                  horizontal: 12.0),
                            child: new Row(
                               children: <Widget>[
                                  Expanded(
                                   child: Row(
                                     children: <Widget>[
                                       child: Padding(
                                         padding: const EdgeInsets.symmetric(horizontal: 8.0),
                                          child: Container(
                                            child: Column(
                                              children: <Widget>[
                                                //THIS THE CONTAINER
                                                new Container(. . .),
                                                new Container(. . .)

Answer 1

使用AnimatedOpacity小部件代替FadeTransition。这使您可以手动控制动画：

  @override
  Widget build(BuildContext context) {
    return FadeTransition(
      opacity: animationController.drive(CurveTween(curve: Curves.easeOut)),
      child: ...,
    );
  }

Answer 2

对于希望在页面呈现后立即自动淡化小部件但仍想使用 AnimatedOpacity 的任何人，您可以在 WidgetsBinding 的 {{3 }} 回调。

将此代码放在您的 initState 下面。

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

Answer 3

我完全建议使用上面@boformer的答案。

但是，我玩弄了您的代码，并想向您展示如何调用setState来触发AnimatedOpacity，因此您可以看到它在没有onTap或GestureDetector的情况下可以正常工作就像您在上面的评论中所想的一样。

我得到了您的代码并对其进行处理。我所做的是，只需在动画控制器中以及控制器完成后添加一个状态侦听器即可。我在setState中触发了可见性布尔值。然后它将更改容器的可见性。

// When animation finished change the visibility.
animationController.addStatusListener((status){
  if (status == AnimationStatus.completed) {
    setState(() {
      // This is opposite, because it's implemented opposite in your code.
      _visible = false;
    });
  }
});

Answer 4

这是一种解决方案，可使用不透明度，补间和动画控制器。

import 'package:flutter/material.dart';

class OpacityDemo extends StatefulWidget {
  @override
  _OpacityDemoState createState() => _OpacityDemoState();
}

class _OpacityDemoState extends State<OpacityDemo>
    with TickerProviderStateMixin {

  AnimationController _opacityController;

  @override
  void initState() {
    super.initState();
    _opacityController = new AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 2000), ///duration for forward and reverse individually
    )
      ..addListener(() => setState(() {}))
      ..repeat(reverse: true); ///tells animation to repeat and include reverse animation
  }

  @override
  void dispose() {
    _opacityController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Center(
          child: Opacity(
            opacity: new Tween(
              begin: 0.0,   ///beginning opacity
              end: 1.0,     ///ending opacity
            ).evaluate(_opacityController), ///tween adjusts to animation controller above
            child: new Text("you're welcome", style: TextStyle(fontSize: 48.0,),),
          ),
        ),
      ),
    );
  }
}

Flutter-如何自动启用AnimatedOpacity？

4 个答案: