Flutter--动画

原创已于 2022-02-26 15:09:01 修改 · 430 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

于 2022-02-25 17:20:37 首次发布

flutter开发专栏收录该内容

44 篇文章

订阅专栏

该博客介绍了如何在Flutter中创建一个组合动画，使一个View逐步放大并同时改变颜色。通过使用AnimationController和Tween类，分别控制尺寸变化和颜色过渡，并在动画完成时触发下一个动画。提供了两种不同的实现方式，一种是两个独立的控制器，另一种是使用CurvedAnimation在同一控制器下分段控制动画执行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做一个简单的组合动画，让一个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();
  }
}