如何在按下按钮时通过动画进行文本转换？

Question

目前，当不透明度 = 0 且按下按钮时，不透明度变为 1。但我希望该按钮还具有将不透明度变为零并在不透明度已经为 1 时返回到 1 的功能。

如何才能做到这一点？谢谢

我认为这与补间有关？例如。按下按钮时，报价的不透明度变为零，然后变回 1（持续一秒）。但是我不知道怎么写。

下面所附的是此操作中涉及的主要代码块：


  double opacity1 = 0.0;


String quoteCat1 = List1[Random().nextInt(List1.length)];

  void generateConvoTopic1() {
    setState(() {
      quoteCat1 = List1[Random().nextInt(List1.length)];
    });
  }

 @override
  Widget build(BuildContext context) {
   
    return Scaffold(

...

body: ...
              
                AnimatedOpacity(
                    opacity: opacity1,
                    duration: Duration(seconds: 1),
                    child:Text(quoteCat1),
              ]),
...
ElevatedButton(
...
onPressed: () {
                      generatequoteCat1();
                      opacity1 = 1.0;
                      opacity2 = 0.0;
                      opacity3 = 0.0;
                    },),

      
...

Answer 1

如果您只想在两个值之间切换，您可以使用布尔值并让您的按钮切换其值。在 toggleOpacity 函数中还有一个示例，说明如何使用 Future.delayed.

将函数动画化，正如 @Aayush 所说

现在如果你想要更复杂的动画，或者无限的动画，你应该使用 animationController 来完全控制它

参见示例：

class Demo extends StatefulWidget {
  Demo({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _DemoState createState() => _DemoState();
}

class _DemoState extends State<Demo> {
  bool visible = true;
  var animateBack=false;

  void toggleOpacity() {
    setState(() {
      visible = !visible;
    });
if(animateBack)    
Future.delayed(Duration(seconds: 1)).then((value) {
     setState(() {
       visible = !visible;

     });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: AnimatedOpacity(
          opacity: visible ? 1 : 0,
          duration: Duration(seconds: 1),
          child: Text(
            'Now you see me',
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: toggleOpacity,
        child: Icon(visible?Icons.wb_sunny:Icons.wb_sunny_outlined),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

如何在按下按钮时通过动画进行文本转换？

How to make text transition by animation upon button press?

math

animation

fade

flutter