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

Posted 2023-02-23

【中文标题】如何在按钮按下时通过动画进行文本转换？

【英文标题】：How to make text transition by animation upon button press?

【发布时间】：2021-09-20 06:22:40

【问题描述】：

目前，当 opacity = 0 并且按下按钮时， opacity 变为 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;
                    ,),

      
...

【问题讨论】：

您也可以使用Future.deleyed！这样，当您将不透明度设为 0 时，它已经为 1，然后将代码放在您再次将不透明度变为 1 的地方。deleyed 函数持续一秒钟，以便该代码将在一秒钟后执行，当您不透明度首先从 1 变为 0，然后在一秒钟或您想要选择的任何时间后，不透明度将再次从该 future.delateyed 函数中变为 1！

【参考方案1】：

如果您只想在两个值之间切换，您可以使用布尔值并让您的按钮切换其值。 @Aayush 在toggleOpacity 函数中也是如何使用 Future.delayed 将函数动画化的示例。

现在如果你想要更复杂的动画，或者无限的动画，你应该使用一个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.
    );
  

【讨论】：

谢谢。 ? 但是我已经更新了我的代码以包含更多内容。这是关于 ***.com/questions/68328866/… 中看到的文本补间动画你有没有机会知道这件事？