Flutter--动画

做一个简单的组合动画 ，让一个View从小变大，然后从红色变蓝色

class AnimationView extends StatefulWidget {

  const AnimationView({Key? key}) : super(key: key);

  @override
  _AnimationViewState createState() => _AnimationViewState();
}


class _AnimationViewState extends State<AnimationView> with TickerProviderStateMixin {

  late AnimationController controller1;
  late Animation<double> valueAnimation;

  late AnimationController controller2;
  late Animation<Color?> colorAnimation;


  @override
  initState() {
    super.initState();
    controller1 = AnimationController(
      duration: const Duration(seconds: 4),
      vsync: this,
    );

    controller2 = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    );

    //匀速
    //图片宽高从0变到300
    valueAnimation = Tween(begin: 0.0, end: 300.0).animate(controller1)
      ..addListener(() {
        setState(() => {});
      })
    ..addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        controller2.forward();
      }
    });

    colorAnimation = ColorTween(begin: Colors.red, end: Colors.blueAccent).animate(controller2)
      ..addListener(() {
        setState(() => {});
      });

    //启动动画(正向执行)
    controller1.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      Container(
        color: colorAnimation.value,
        width: valueAnimation.value,
        height: valueAnimation.value,
      ),
      TextButton(onPressed: () {
        controller1.forward();
        controller2.forward();
      }, child: const Text("forward")),
      TextButton(onPressed: () {
        controller1.reverse();
        controller2.reverse();
      }, child: const Text("reverse")),
    ], mainAxisAlignment: MainAxisAlignment.center,);
  }

  @override
  dispose() {
    //路由销毁时需要释放动画资源
    controller1.dispose();
    controller2.dispose();
    super.dispose();
  }
}

再补充一种写法

class AnimationView extends StatefulWidget {

  const AnimationView({Key? key}) : super(key: key);

  @override
  _AnimationViewState createState() => _AnimationViewState();
}


class _AnimationViewState extends State<AnimationView> with TickerProviderStateMixin {

  late AnimationController controller;
  late Animation<double> valueAnimation;
  late Animation<Color?> colorAnimation;


  @override
  initState() {
    super.initState();
    controller = AnimationController(
      duration: const Duration(seconds: 4),
      vsync: this,
    );

    valueAnimation = Tween(begin: 0.0, end: 300.0).animate(CurvedAnimation(
      parent: controller,
      curve: const Interval(
        0.0, 0.6, //前60%的动画时间
        curve: Curves.ease,
      ),
    ),)..addListener(() => setState(() {}));


    colorAnimation = ColorTween(begin: Colors.red, end: Colors.blueAccent).animate(CurvedAnimation(
      parent: controller,
      curve: const Interval(
        0.6, 1.0, //后40%的动画时间
        curve: Curves.ease,
      ),
    ))..addListener(() => setState(() {}));;

    controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      Container(
        color: colorAnimation.value,
        width: valueAnimation.value,
        height: valueAnimation.value,
      ),
      TextButton(onPressed: () {
        controller.forward();
      }, child: const Text("forward")),
      TextButton(onPressed: () {
        controller.reverse();
      }, child: const Text("reverse")),
    ], mainAxisAlignment: MainAxisAlignment.center,);
  }

  @override
  dispose() {
    //路由销毁时需要释放动画资源
    controller.dispose();
    super.dispose();
  }
}