Flutter_学习记录_动画的简单了解

用AnimationController简单实现如下的效果图：

1. 只用AnimationController实现简单动画

1.1 完整代码案例

import 'package:flutter/material.dart';class AnimationDemo extends StatefulWidget {const AnimationDemo({super.key});@overrideState<AnimationDemo> createState() => _AnimationDemoState();
}class _AnimationDemoState extends State<AnimationDemo> with TickerProviderStateMixin {late AnimationController animationDemoController;@overridevoid initState() {super.initState();animationDemoController = AnimationController(vsync: this,// 初始值，要在 lowerBound 和 upperBound 之间value: 32.0,// 最小值lowerBound: 32.0,// 最大值upperBound: 100.0,// 设置动画的时间duration: Duration(milliseconds: 3000));animationDemoController.addListener((){// 更新页面setState(() {});});// 添加status的监听animationDemoController.addStatusListener((AnimationStatus status){print(status);});}@overridevoid dispose() {super.dispose();// 销毁 animationDemoControlleranimationDemoController.dispose();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("AnimationDemo"),),body: Center(child: IconButton(icon: Icon(Icons.favorite),iconSize: animationDemoController.value,onPressed: (){switch (animationDemoController.status) {case AnimationStatus.completed:// 反转动画animationDemoController.reverse();break;default:// 开始动画animationDemoController.forward();}},),),);}
}

1.2 代码说明

(1) AnimationController

• animationDemoController 是动画的核心控制器。
• duration 定义了动画的持续时间（例如 2 秒）。
• vsync 参数确保动画与屏幕刷新同步，避免资源浪费。
• value 设置初始值。
• lowerBound 设置最小值。
• upperBound 设置 最大值。

(2) addListener 添加监听，可以监听到 animationDemoController.value的值的变化。

• 如果需要需要用到 animationDemoController.value的值更新UI，则需要调用 setState的方法。

animationDemoController.addListener((){// 更新页面setState(() {});});

（3）addStatusListener 添加动画状态的监听，只有添加了这个监听，才能在后面获取到动画状态的变化。

            switch (animationDemoController.status) {case AnimationStatus.completed:// 反转动画animationDemoController.reverse();break;default:// 开始动画animationDemoController.forward();}

（4） 开始动画

animationDemoController.forward()

（5）反转动画

animationDemoController.reverse();

2. 用AnimationController 和 Animation实现简单动画

2.1 完整代码示例

import 'package:flutter/material.dart';class AnimationDemo extends StatefulWidget {const AnimationDemo({super.key});@overrideState<AnimationDemo> createState() => _AnimationDemoState();
}class _AnimationDemoState extends State<AnimationDemo> with TickerProviderStateMixin {late AnimationController animationDemoController;late Animation animation;late Animation animationColor;// 设置动画取消late CurvedAnimation curve;@overridevoid initState() {super.initState();animationDemoController = AnimationController(vsync: this,// 设置动画的时间duration: Duration(milliseconds: 3000));animation = Tween(begin: 32.0, end: 100.0).animate(animationDemoController);animationColor = ColorTween(begin: Colors.red, end: Colors.green).animate(animationDemoController);animationDemoController.addListener((){// 更新页面setState(() {});});// 添加status的监听animationDemoController.addStatusListener((AnimationStatus status){print(status);});}@overridevoid dispose() {super.dispose();// 销毁 animationDemoControlleranimationDemoController.dispose();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("AnimationDemo"),),body: Center(child: IconButton(icon: Icon(Icons.favorite),iconSize: animation.value,color: animationColor.value,onPressed: (){switch (animationDemoController.status) {case AnimationStatus.completed:// 反转动画animationDemoController.reverse();break;default:// 开始动画animationDemoController.forward();}},),),);}
}

2.2 代码说明

(1) Tween

• Tween(begin: xx, end:xx) 定义了动画的范围：

• begin 是起始值。
• end 是结束值。

(2) animationDemoController.value 用 animation.value 来替代

3. 用AnimationController 和 Animation、CurvedAnimation实现简单动画

CurvedAnimation 可以添加缓动效果（如 Curves.easeInOut），完整代码示例：

import 'package:flutter/material.dart';class AnimationDemo extends StatefulWidget {const AnimationDemo({super.key});@overrideState<AnimationDemo> createState() => _AnimationDemoState();
}class _AnimationDemoState extends State<AnimationDemo> with TickerProviderStateMixin {late AnimationController animationDemoController;late Animation animation;late Animation animationColor;// 设置动画曲线late CurvedAnimation curve;@overridevoid initState() {super.initState();animationDemoController = AnimationController(vsync: this,// 设置动画的时间duration: Duration(milliseconds: 3000));curve = CurvedAnimation(parent: animationDemoController, curve: Curves.bounceOut);animation = Tween(begin: 32.0, end: 100.0).animate(curve);animationColor = ColorTween(begin: Colors.green, end: Colors.red).animate(curve);animationDemoController.addListener((){// 更新页面setState(() {});});// 添加status的监听animationDemoController.addStatusListener((AnimationStatus status){print(status);});}@overridevoid dispose() {super.dispose();// 销毁 animationDemoControlleranimationDemoController.dispose();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("AnimationDemo"),),body: Center(child: IconButton(icon: Icon(Icons.favorite),iconSize: animation.value,color: animationColor.value,onPressed: (){switch (animationDemoController.status) {case AnimationStatus.completed:// 反转动画animationDemoController.reverse();break;default:// 开始动画animationDemoController.forward();}},),),);}
}

4 用AnimationController 和 AnimatedWidget实现简单动画

完整代码实例：

import 'package:flutter/material.dart';class AnimationDemo extends StatefulWidget {const AnimationDemo({super.key});@overrideState<AnimationDemo> createState() => _AnimationDemoState();
}class _AnimationDemoState extends State<AnimationDemo> with TickerProviderStateMixin {late AnimationController animationDemoController;late Animation animation;late Animation animationColor;// 设置动画曲线late CurvedAnimation curve;@overridevoid initState() {super.initState();animationDemoController = AnimationController(vsync: this,// 设置动画的时间duration: Duration(milliseconds: 3000));curve = CurvedAnimation(parent: animationDemoController, curve: Curves.bounceOut);animation = Tween(begin: 32.0, end: 100.0).animate(curve);animationColor = ColorTween(begin: Colors.green, end: Colors.red).animate(curve);// 添加status的监听animationDemoController.addStatusListener((AnimationStatus status){print(status);});}@overridevoid dispose() {super.dispose();// 销毁 animationDemoControlleranimationDemoController.dispose();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("AnimationDemo"),),body: Center(//  AnimationHeart 是基于 AnimatedWidget 创建的child: AnimationHeart(animations: [animation, animationColor], controller: animationDemoController),),);}
}// 基于 AnimatedWidget 创建 AnimationHeart的控件
class AnimationHeart extends AnimatedWidget {final List animations;final AnimationController controller;const AnimationHeart({super.key, required this.animations, required this.controller}) : super(listenable: controller);@overrideWidget build(BuildContext context) {return IconButton(icon: Icon(Icons.favorite),iconSize: animations[0].value,color: animations[1].value,onPressed: (){switch (controller.status) {case AnimationStatus.completed:// 反转动画controller.reverse();break;default:// 开始动画controller.forward();}},);}
}