如何在Flutter中创建滑入和滑出动画？

Question

我正在尝试在Flutter中创建一个滑入和滑出动画。动画效果应该如下所示：

----- Widget slides in ---> Wait for 1 seconds -----Widget slides out of screen -->

我尝试了以下代码，但我的动画卡在了循环中。

class _MyStatefulWidgetState extends State<MyStatefulWidget> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<Offset> _positionAnimation;
  Animation<double> opacityAnimation;

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

    _positionAnimation = Tween<Offset>(
      begin: const Offset(-1, 0),
      end: const Offset(0, 0.0),
    ).animate(
      CurvedAnimation(
          parent: _controller,
          curve: Curves.elasticOut),
    )..addStatusListener((status) {
        print('animation 1 status $status');
        if (status == AnimationStatus.completed) {
          _controller.reset();
        }
        if (status == AnimationStatus.dismissed) {
          _positionAnimation = Tween<Offset>(
            begin: const Offset(0, 0),
            end: const Offset(1, 0.0),
          ).animate(
            CurvedAnimation(
                parent: _controller,
                curve: Curves.elasticIn),
          )..addStatusListener((status2) {
              print('animation 2 status $status2');
            if (status == AnimationStatus.dismissed) {
              _controller.reset();
            }
            });
          _controller.forward();
        }
      });
    _controller.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      builder: _buildAnimation,
      animation: _controller,
    );
  }

  Widget _buildAnimation(BuildContext context, Widget child) {
    return Opacity(
      opacity: 1,
      child: SlideTransition(
        position: _positionAnimation,
        child: Container(
          color: Colors.blueAccent,
          height: 100,
          child: Center(
            child: Text(
              'Hello, World!',
              style: Theme.of(context).textTheme.display1,
            ),
          ),
        ),
      ),
    );
  }

使用这种方法，动画会被卡在循环中。

我无法使用交错动画，因为我正在尝试对同一属性进行动画处理。（或者是否有一种方法可以在同一属性上使用交错动画？） 有没有更好的实现方式？

- vijay053

---

如果您使用SlideTransition，就不需要使用AnimatedBuilder。 - pskink

@pskink，我也尝试了SlideTransition，但无法实现所需的行为。 - vijay053

child: TweenAnimationBuilder( onEnd: () { print('onEnd'); Future.delayed(Duration(milliseconds: 1000), () => setState(() => xpos = xpos == 0? 1 : 0)); }, duration: Duration(milliseconds: 750), tween: Tween<Offset>(begin: Offset(1, 0), end: Offset(xpos, 0)), builder: (context, offset, child) { return FractionalTranslation( translation: offset, child: Container(width: double.infinity, child: Text('动画文字', textScaleFactor: 3.0,)), ); }, ),这里的xpos是一个带有初始值为0.0的双精度字段。 - pskink

@pskink，这个几乎可以用了。我在你的代码上做了一点修改就实现了想要的效果。我会把它作为答案发布。谢谢。 - vijay053

Answer 1

从@pskink的评论中得到灵感，使用以下代码和TweenAnimationBuilder实现了所需的效果：

class _SlideInOutWidgetState extends State<SlideInOutWidget>
    with SingleTickerProviderStateMixin {
  double startPos = -1.0;
  double endPos = 0.0;
  Curve curve = Curves.elasticOut;
  @override
  Widget build(BuildContext context) {
    return TweenAnimationBuilder(
      tween: Tween<Offset>(begin: Offset(startPos, 0), end: Offset(endPos, 0)),
      duration: Duration(seconds: 1),
      curve: curve,
      builder: (context, offset, child) {
        return FractionalTranslation(
          translation: offset,
          child: Container(
            width: double.infinity,
            child: Center(
              child: child,
            ),
          ),
        );
      },
      child: Text('animated text', textScaleFactor: 3.0,),
      onEnd: () {
        print('onEnd');
        Future.delayed(
          Duration(milliseconds: 500),
          () {
            curve = curve == Curves.elasticOut
                ? Curves.elasticIn
                : Curves.elasticOut;
            if (startPos == -1) {
              setState(() {
                startPos = 0.0;
                endPos = 1.0;
              });
            }
          },
        );
      },
    );
  }
}

- vijay053

Answer 2

使用Marquee插件进行文本动画

安装：

  marquee: ^1.3.1

例子：

Marquee(
  text: 'There once was a boy who told this story about a boy: "',
)

更多信息请尝试marquee | flutterpckage

- Aamil Silawat

---

我尝试过这个，但它没有给我想要的效果。使用这个库，文本会不断滚动。我希望文本能够从左侧滑入（使用easeOut曲线）停留1秒钟，然后从屏幕右侧滑出（使用easeIn曲线）。 - vijay053