关于flutter动画的一个问题

Question

假设要实现一个这样的动画：

看网上的很多教程都是不同属性动画值的例子，要是这种一个值在一个动画中发生了一种以上变化的情况应该怎么写？

opacity = Tween(begin: 0.0, end: 1.0)
  .animate(CurvedAnimation(
    parent: aniamtionController,
    curve: Interval(0.0, 1.0, curve: Curves.ease)
  ));
  
width = Tween(begin: 100, end: 130)
  .animate(CurvedAnimation(
    parent: aniamtionController,
    curve: Interval(0.0, 0.5, curve: Curves.ease)
  ));

// 缺少了width的后半段动画

Answer 1

找到了，使用TweenSequence部件，可以创建顺序动画。

width = TweenSequence([
  TweenSequenceItem(tween: Tween(begin: 100, end: 130), weight: 1),
  TweenSequenceItem(tween: Tween(begin: 130, end: 100), weight: 1),
]).animate(animationController);

Answer 2

https://book.flutterchina.club/chapter9/stagger_animation.html

交织动画

Answer 3

AnimatedBuilder的builer函数也可以做逻辑判断，增加一个动画值也可以的，当高度大于300后，可以用另一个高度动画的值。