Flutter:如何自动为文本列表设置动画

时间:2020-05-07 11:56:31

标签: flutter flutter-animation

我正在准备我们应用程序的登录屏幕,在其中需要一长串应用程序功能,这些功能会自动从下至上滚动,仅显示3个文本元素。我试图通过遵循以下代码来完成此操作,但是它不起作用。

class FeatureAnimation extends StatefulWidget {
  @override
  _FeatureAnimationState createState() => _FeatureAnimationState();
}

class _FeatureAnimationState extends State<FeatureAnimation>
    with TickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _containerMargin; //using this for scrolling the list
  Animation<double> _fontSizeIncrement;
  Animation<double> _opacity;

  @override
  void initState() {
    _controller =
        AnimationController(vsync: this, duration: new Duration(seconds: 5));

    _containerMargin = Tween<double>(begin: 0, end: 100.0).animate(
      CurvedAnimation(
        parent: _controller,
        curve: Interval(0.1, 1, curve: Curves.ease),
      ),
    );

    _fontSizeIncrement = TweenSequence<double>(
      <TweenSequenceItem<double>>[
        TweenSequenceItem<double>(
          tween: new Tween<double>(begin: 0, end: 10.0)
              .chain(CurveTween(curve: Curves.easeOut)),
          weight: 50,
        ),
        TweenSequenceItem<double>(
          tween: new Tween<double>(begin: 10.0, end: 0)
              .chain(CurveTween(curve: Curves.elasticOut)),
          weight: 50.0,
        ),
      ],
    ).animate(
        (CurvedAnimation(parent: _controller, curve: Interval(0.1, 1.0))));

    _opacity = TweenSequence<double>(
      <TweenSequenceItem<double>>[
        TweenSequenceItem<double>(
          tween: new Tween<double>(begin: 0, end: 1.0),
          weight: 20.0,
        ),
        TweenSequenceItem<double>(
          tween: new Tween<double>(begin: 1.0, end: 0),
          weight: 80.0,
        ),
      ],
    ).animate((CurvedAnimation(parent: _controller, curve: Interval(0, 1.0,curve: Curves.ease))));

    _controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    double totalHeight = MediaQuery.of(context).size.height;
    double totalWidth = MediaQuery.of(context).size.width;
    return AnimatedBuilder(
      animation: _controller,
      builder: (context, child) {
        return Container(
          width: totalWidth,
          height: 200,
          child: Align(
            alignment: Alignment.center,
            child: Container(
              margin: EdgeInsets.only(bottom: _containerMargin.value),
              child: Container(
                height: 100,
                child: Column(
                  children: <Widget>[
                    Text(
                      'Feature 1',
                      style: TextStyle(
                          fontSize: 14,
                          color: Colors.black.withOpacity(
                              (_opacity.value - 0.4) <= 0.0
                                  ? 0.0
                                  : (_opacity.value - 0.4))),
                    ),
                    Text(
                      'Feature 2',
                      style: TextStyle(
                          fontSize: 14+_fontSizeIncrement.value,
                          color: Colors.black.withOpacity(_opacity.value)),
                    ),
                    Text(
                      'Feature 3',
                      style: TextStyle(
                          fontSize: 14,
                          color: Colors.black.withOpacity(
                              (_opacity.value - 0.4) <= 0.0
                                  ? 0.0
                                  : (_opacity.value - 0.4))),
                    ),
                    Text(
                      'Feature 4',
                      style: TextStyle(
                          fontSize: 14,
                          color: Colors.black.withOpacity(
                              (_opacity.value - 0.4) <= 0.0
                                  ? 0.0
                                  : (_opacity.value - 0.4))),
                    )
                  ],
                ),
              ),
            ),
          ),
        );
      },
    );
  }
}

我以为我可以使用_containerMargin进行滚动,但是我不确定如何在不同的文本小部件上应用相同的动画。

0 个答案:

没有答案