Flutter将动画系统进行封装,抽象出4个概念:Animation、Curve、AnimationController、Tween。
Animation:Flutter动画中的核心类,此类是抽象类,通常情况下使用其子类:AnimationController,可以获取当前动画的状态和值,也可以添加其状态变化监听和值变化监听。
Curve:决定动画执行的曲线,和Android中的Interpolator(差值器)是一样的,负责控制动画变化的速率,系统已经封装了10多种动画曲线,详见Curves类。
AnimationController:动画控制器,控制动画的开始、停止。继承自Animation。
Tween:映射生成不同范围的值,AnimationController的动画值是double类型的,如果需要颜色的变化,Tween可以完成此工作。
Flutter中提供了大量的动画组件及详细用法:
AnimatedBuilder:http://laomengit.com/flutter/widgets/AnimatedBuilder/
AlignTransition:http://laomengit.com/flutter/widgets/AlignTransition/
AnimatedOpacity:http://laomengit.com/flutter/widgets/AnimatedOpacity/
AnimatedAlign:http://laomengit.com/flutter/widgets/AnimatedAlign/
AnimatedPadding:http://laomengit.com/flutter/widgets/AnimatedPadding/
AnimatedCrossFade:http://laomengit.com/flutter/widgets/AnimatedCrossFade/
AnimatedContainer:http://laomengit.com/flutter/widgets/AnimatedContainer/
AnimatedPositioned:http://laomengit.com/flutter/widgets/AnimatedPositioned/
AnimatedPositionedDirectional:http://laomengit.com/flutter/widgets/AnimatedPositionedDirectional/
AnimatedSwitcher:http://laomengit.com/flutter/widgets/AnimatedSwitcher/
AnimatedIcon:http://laomengit.com/flutter/widgets/AnimatedIcon/
TweenAnimationBuilder:http://laomengit.com/flutter/widgets/TweenAnimationBuilder/
DecoratedBoxTransition:http://laomengit.com/flutter/widgets/DecoratedBoxTransition/
DefaultTextStyleTransition:http://laomengit.com/flutter/widgets/DefaultTextStyleTransition/
AnimatedDefaultTextStyle:http://laomengit.com/flutter/widgets/AnimatedDefaultTextStyle/
PositionedTransition:http://laomengit.com/flutter/widgets/PositionedTransition/
RelativePositionedTransition:http://laomengit.com/flutter/widgets/RelativePositionedTransition/
RotationTransition:http://laomengit.com/flutter/widgets/RotationTransition/
ScaleTransition:http://laomengit.com/flutter/widgets/ScaleTransition/
SizeTransition:http://laomengit.com/flutter/widgets/SizeTransition/
SlideTransition:http://laomengit.com/flutter/widgets/SlideTransition/
FadeTransition:http://laomengit.com/flutter/widgets/FadeTransition/
AnimatedModalBarrier:http://laomengit.com/flutter/widgets/AnimatedModalBarrier/
AnimatedList:http://laomengit.com/flutter/widgets/AnimatedList/
Hero:http://laomengit.com/flutter/widgets/Hero/
将Container控件的大小由100变为300
class AnimationDemo extends StatefulWidget {
const AnimationDemo({Key? key}) : super(key: key);
@override
State<StatefulWidget> createState() => _AnimationDemo();
}
class _AnimationDemo extends State<AnimationDemo>
with SingleTickerProviderStateMixin {
late AnimationController _animationController;
@override
void initState() {
_animationController = AnimationController(
duration: const Duration(seconds: 2),
lowerBound: 100.0,
upperBound: 300.0,
vsync: this);
_animationController.addListener(() {
setState(() {});
});
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Column(
children: <Widget>[
RaisedButton(
child: const Text('开始动画'),
onPressed: () {
_animationController.forward();
},
),
Expanded(
child: Center(
child: Container(
width: _animationController.value,
height: _animationController.value,
color: Colors.red,
),
),
),
],
),
);
}
@override
void dispose() {
_animationController.dispose();
super.dispose();
}
}