链接在相同属性上工作的单独动画

Question

我看过 Staggered animations 的链接动画，但那里他们对一个小部件的属性使用一个动画，例如不透明度动画正在控制淡入，但是如果我想先淡入然后淡出同一个小部件怎么办？我的意思是我已经创建了淡入淡出动画，它用于像这样的小部件不透明度值：

_opacityDontWorry = Tween(
  begin: 0.0,
  end: 1.0,
).animate(
  CurvedAnimation(parent: _animationController, curve: Interval(0.0, 0.75, curve: Curves.easeIn)),
);

所以这两个现在像这样绑定在一起：

Opacity(
  opacity: _opacityDontWorry.value,
  child: Text("Don't worry"),
)

这项工作很好，我的不透明度淡入，但在它淡入后我希望它在短暂的停顿后淡出，但我该怎么做？我是创建一个新的 Tween 并用它覆盖 _opacityDontWorry，还是？我是否走在正确的道路上，如何链接多个改变小部件相同属性的动画？

谢谢
索伦

Answer 1

您可以在 Animation 上使用 addStatusListener。检查动画何时完成，然后在 AnimationController.

上调用 reverse()

如果需要，可以在 Future.delayed() 中调用 reverse() 进行暂停。

我已经为你做了这个例子：

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
  AnimationController _animationController;
  Animation _opacityDontWorry;

  @override
  void initState() {
    super.initState();

    _animationController = AnimationController(duration: Duration(seconds: 1), vsync: this);
    _opacityDontWorry = Tween(
      begin: 0.0,
      end: 1.0,
    ).animate(
      CurvedAnimation(parent: _animationController, curve: Curves.easeIn),
    )..addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        Future.delayed(Duration(seconds: 3), () {
          _animationController.reverse();
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton.extended(
        label: Text('Animate'),
        onPressed: () => _animationController.forward(),
      ),
      body: Center(
        child: AnimatedBuilder(
          animation: _opacityDontWorry,
          builder: (context, widget) {
            return Opacity(
              opacity: _opacityDontWorry.value,
              child: Text("Don't worry"),
            );
          },
        ),
      ),
    );
  }
}

更新

如果您需要播放此动画，然后再调用另一个动画，您可以将不透明度值提取到一个变量中。然后根据需要从尽可能多的连续动画中更新该值。

  _firstAnimation = Tween(
    begin: 0.0,
    end: 1.0,
  ).animate(
    CurvedAnimation(parent: _animationController, curve: Interval(0.0, 0.20, curve: Curves.easeIn)),
  )..addListener(() {
      setState(() => _opacity = _firstAnimation.value);
    });

  // Leave an interval pause if you need
  _secondAnimation = Tween(
    begin: 1.0,
    end: 0.0,
  ).animate(
    CurvedAnimation(parent: _animationController, curve: Interval(0.40, 0.60, curve: Curves.easeIn)),
  )..addListener(() {
      setState(() => _opacity = _secondAnimation.value);
    });

在您的小部件的不透明度属性中，使用 _opacity.

而不是 _firstAnimation.value

Answer 2

可能这是一个迟到的答案。但是 TweenSequence 是正确的 class 用于动画一个接一个地改变相同的属性。 Docs reference.

链接在相同属性上工作的单独动画

Chaining seperate animations that work on the same properties

flutter

flutter-animation