flutter中的动画交织动画

有时候一个完整的动画可能是由不同的动画叠加起来，如一个动画执行完成在执行另一个动画，这时候我们需要多个动画对象（Animation），但是我们不需要多个动画控制器（AnimationController），只需要给每一动画对象设置时间间隔（Interval）。

有动画都由同一个AnimationController (opens new window)驱动，无论动画需要持续多长时间，控制器的值必须在0.0到1.0之间，而每个动画的间隔（Interval）也必须介于0.0和1.0之间。对于在间隔中设置动画的每个属性，需要分别创建一个Tween (opens new window)用于指定该属性的开始值和结束值。也就是说0.0到1.0代表整个动画过程，我们可以给不同动画指定不同的起始点和终止点来决定它们的开始时间和终止时间。

示例
圆形先缩小然后改变透明度

 AnimationController animationController;
 Animation<double> animationSize;
 Animation<double> animationOpacity;
animationController =
 AnimationController(duration: Duration(seconds: 2), vsync: this);
animationSize = Tween<double>(begin: 80, end: 60).animate(
      CurvedAnimation(
        parent: animationController,
        curve: Interval(
          0.0, 0.6, //间隔，前60%的动画时间
          curve: Curves.ease,
        ),
      ),
    );
    animationOpacity = Tween(begin: 1.0, end: 0.5).animate(CurvedAnimation(
        parent: animationController,
        curve: Interval(0.6, 1, curve: Curves.easeIn)));

 animationController.forward();

         Container(
              width: MAX_SIZE + 50,
              height: MAX_SIZE + 50,
              color: Colors.blue,
              //不加这一句子container 会变得和父container 大小一样
              alignment: Alignment.center,
              child: Opacity(
                opacity: animationOpacity.value,
                child: Container(
                  width: animationSize.value,
                  height: animationSize.value,
                  decoration: BoxDecoration(
                    color: Colors.red,
                    borderRadius: BorderRadius.circular(MAX_SIZE / 2),
                  ),
                  child: Icon(
                    Icons.mic,
                    color: Colors.white,
                  ),
                  // transform:
                  //     Matrix4.rotationY(animationTransform.evaluate(animation)),
                ),
              ),
            ),

注意setstate方法更新视图

flutter中的动画交织动画

推荐阅读更多精彩内容