Question

[在此处输入图片描述][1]我希望在屏幕加载时自动一个接一个地滑动 2 个不同的文本小部件（例如标题和副标题）。

看起来很简单！

我可以通过编写用于支持 SlideTransition 的代码轻松实现此动画效果。然后按照下面的代码片段复制它（例如 2 个动画控制器、2 个动画对象、2 个幻灯片过渡小部件）。将 2 个动画控制器包裹在未来的延迟中，设置在两个稍微不同的时间。然而，这似乎是完成这个简单任务的一种非常低效的方法。

注意：我曾尝试使用 TweenSequence（它似乎适用于同一对象上的多个动画）来实现这种效果，但失败了。

我也使用动画列表完成了这项工作，但对于 2 个小部件来说，支持动画列表的额外代码数量似乎过多。

有谁知道实现这一目标的首选方式/不那么冗长的方式是什么（最好只使用一个动画控制器）？

谢谢！！


/// setting up the slide transition and duplicating the animcontroller etc to support the slide animation.

class _MenuPageState extends State<MenuPage> with TickerProviderStateMixin {
  late _animControllerSlideIn,
      _animControllerSlideIn2;

  late Animation<Offset> _slideIn, _slideIn2;
 
  @override
  void initState() {

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

    _slideIn = Tween<Offset>(begin: Offset(1.1, 0), end: Offset(0, 0)).animate(
        CurvedAnimation(parent: _animControllerSlideIn, curve: Curves.easeOut));

    Future.delayed(Duration(milliseconds: 800), () {
      _animControllerSlideIn.forward();
    });

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

    _slideIn2 = Tween<Offset>(begin: Offset(1.1, 0), end: Offset(0, 0)).animate(
        CurvedAnimation(
            parent: _animControllerSlideIn2, curve: Curves.easeOut));

    Future.delayed(Duration(milliseconds: 1200), () {
      _animControllerSlideIn2.forward();
    });


/////////



child: Column(
                              crossAxisAlignment: CrossAxisAlignment.stretch,
                              children: [
                                Flexible(
                                  child: SlideTransition(
                                    child: Text('Text 1',),
                                    position: _slideIn,
                                  ),
                                  fit: FlexFit.tight,
                                ),
                                Flexible(
                                  child: SlideTransition(
                                    child: Text(
                                      'Text 2!',),
                                    position: _slideIn2,
                                  ),
                                  fit: FlexFit.tight,
                                ),
                              ],
                            )),


  [1]: https://i.stack.imgur.com/2qlAI.png

Answer 1

另一种方法是为滑动文本创建一个有状态的小部件类，并将间隔传递给这个小部件类：

    class SlidingText extends StatefulWidget {
      final String word;
      final int interval;
      final bool isDelay;
      
      SlidingText ({this.word, this.interval, this.isDelay});
      
      @override
      _SlidingTextState createState() => _SlidingTextState();
    }
    
    class _SlidingTextState extends State<SlidingText> with SingleTickerProviderStateMixin {
      late AnimationController _animControllerSlideIn;
      late Animation<Offset> _slideIn;
     
      @override
      void initState() {
        _animControllerSlideIn = AnimationController(
            duration: const Duration(milliseconds: widget.interval), vsync: this);
    
        _slideIn = Tween<Offset>(begin: Offset(1.1, 0), end: Offset(0, 0)).animate(
            CurvedAnimation(parent: _animControllerSlideIn, curve: Curves.easeOut));
    
        if(widget.isDelay){
            Future.delayed(Duration(milliseconds: 800), () {
              _animControllerSlideIn.forward();
            });
        }

  @override
  Widget build(BuildContext context) {
    return SlideTransition(
                                    child: Text(widget.word),
                                    position: _slideIn,
                                  );

并将其用于：

child: Column(
                              crossAxisAlignment: CrossAxisAlignment.stretch,
                              children: [
                                Flexible(
                                  child: SlidingText('Text 1', 800, true),
                                  fit: FlexFit.tight,
                                ),
                                Flexible(
                                  child: SlidingText('Text 2', 800, true),
                                  fit: FlexFit.tight,
                                ),
                              ],
                            )),

一个接一个地为 2 个文本小部件创建动画幻灯片的最佳方法是什么。扑？

1 个答案: