Flutter-动画
flutter 动画前言
今天对Flutter动画进行一次突击，这篇文章是我对Flutter动画的使用和理解，有可能有不对的地方，欢迎大家给我指正
重要的类
- Animation< double >
在Flutter中，Animation对象本身和UI渲染没有任何关系。Animation是一个抽象类，它拥有其当前值和状态（完成或停止）。其中一个比较常用的Animation类是Animation。Flutter中的Animation对象是一个在一段时间内依次生成一个区间之间值的类。Animation对象的输出可以是线性的、曲线的、一个步进函数或者任何其他可以设计的映射。 根据Animation对象的控制方式，动画可以反向运行，甚至可以在中间切换方向。
Animation还可以生成除double之外的其他类型值，如：Animation< Color > 或 Animation< Size >。
Animation对象有状态。可以通过访问其value属性获取动画的当前值。
Animation对象本身和UI渲染没有任何关系。 - AnimationController
AnimationController是一个特殊的Animation对象，在屏幕刷新的每一帧，就会生成一个新的值。默认情况下，AnimationController在给定的时间段内会线性的生成从0.0到1.0的数字。
final AnimationController controller = new AnimationController(
duration: const Duration(milliseconds: 2000), vsync: this);
AnimationController派生自Animation，因此可以在需要Animation对象的任何地方使用。 但是，AnimationController具有控制动画的其他方法。例如，.forward()方法可以启动动画。数字的产生与屏幕刷新有关，因此每秒钟通常会产生60个数字，在生成每个数字后，每个Animation对象调用添加的Listener对象。
当创建一个AnimationController时，需要传递一个vsync参数，存在vsync时会防止屏幕外动画（译者语：动画的UI不在当前屏幕时）消耗不必要的资源。 通过将SingleTickerProviderStateMixin添加到类定义中，可以将stateful对象作为vsync的值。
- CurvedAnimation
CurvedAnimation 将动画过程定义为一个非线性曲线.
final CurvedAnimation curve =
new CurvedAnimation(parent: controller, curve: Curves.easeIn);
- Tween
默认情况下，AnimationController对象的范围从0.0到1.0。如果您需要不同的范围或不同的数据类型，则可以使用Tween来配置动画以生成不同的范围或数据类型的值。例如，以下示例，Tween生成从-200.0到0.0的值：
final Tween doubleTween = new Tween(begin: -200.0, end: 0.0);
Tween对象不存储任何状态。相反，它提供了evaluate(Animation方法将映射函数应用于动画当前值。 Animation对象的当前值可以通过value()方法取到。evaluate函数还执行一些其它处理，例如分别确保在动画值为0.0和1.0时返回开始和结束状态。
Tween.animate
要使用Tween对象，请调用其animate()方法，传入一个控制器对象。例如，以下代码在500毫秒内生成从0到255的整数值。
final AnimationController controller = new AnimationController(
duration: const Duration(milliseconds: 500), vsync: this);
Animation alpha = new IntTween(begin: 0, end: 255).animate(controller);
注意animate()返回的是一个Animation，而不是一个Animatable。
以下示例构建了一个控制器、一条曲线和一个Tween：
final AnimationController controller = AnimationController(
duration: const Duration(milliseconds: 2000), vsync: this);
final Animation animation = CurvedAnimation(parent: controller,curve: Curves.easeInOutQuart)
Animation alpha = new IntTween(begin: 0, end: 255).animate(animation);
- 动画通知
一个Animation对象可以拥有Listeners和StatusListeners监听器，可以用addListener()和addStatusListener()来添加。 只要动画的值发生变化，就会调用监听器。一个Listener最常见的行为是调用setState()来触发UI重建。动画开始、结束、向前移动或向后移动（如AnimationStatus所定义）时会调用StatusListener。 下一节中有一个addListener()方法的例子。监视动画的进度展示了如何调用addStatusListener()。
如何构建一个动画
- 通常创建一个动画需要注意的是这个里面的
addListener()我们必须手动执行setState()来刷新UI界面
import 'package:flutter/material.dart';
class CurvedAnimationPage extends StatefulWidget {
final String title;
CurvedAnimationPage({Key key, this.title}) : super(key: key);
@override
_CurvedAnimationPageState createState() => _CurvedAnimationPageState();
}
class _CurvedAnimationPageState extends State
with SingleTickerProviderStateMixin {
Animation animation;
AnimationController controller;
@override
void initState() {
super.initState();
controller = AnimationController(
duration: const Duration(milliseconds: 2000), vsync: this);
animation = Tween(begin: 0.0, end: 300.0).animate(controller)
..addListener(() {
setState(() {
// animation.value;
});
})
..addStatusListener((status) {
if (status == AnimationStatus.completed) {
controller.reverse();
} else if (status == AnimationStatus.dismissed) {
controller.forward();
}
});
controller.forward();
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('曲线动画'),
),
body: Container(
width: animation.value,
height: animation.value,
child: FlutterLogo(),
));
}
}
- 通过
AnimatedWidget来创建动画这里不需要手动修改setState()
import 'package:flutter/material.dart';
class CurvedAnimationPage extends StatefulWidget {
final String title;
CurvedAnimationPage({Key key, this.title}) : super(key: key);
@override
_CurvedAnimationPageState createState() => _CurvedAnimationPageState();
}
class _CurvedAnimationPageState extends State
with SingleTickerProviderStateMixin {
Animation animation;
AnimationController controller;
@override
void initState() {
super.initState();
controller = AnimationController(
duration: const Duration(milliseconds: 2000), vsync: this);
animation = CurvedAnimation(parent: controller,curve: Curves.easeInOutQuart)
..addStatusListener((status) {
if (status == AnimationStatus.completed) {
controller.reverse();
} else if (status == AnimationStatus.dismissed) {
controller.forward();
}
});
controller.forward();
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return AnimatedLogo(animation: animation,);
}
}
// AnimatedWidget 的使用
class AnimatedLogo extends AnimatedWidget {
static final _opacityTween = Tween(begin: 0.1, end: 1);
static final _sizeTween = Tween(begin: 0.0, end: 300);
AnimatedLogo({Key key, Animation animation}):super(key:key,listenable:animation);
@override
Widget build(BuildContext context) {
final Animation animation = listenable;
return Scaffold(
appBar: AppBar(
title: Text(
"曲线动画",
style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
),
// centerTitle: false,
),
body: Center(
child: Opacity(
opacity: _opacityTween.evaluate(animation),
child: Container(
width: _sizeTween.evaluate(animation),
height: _sizeTween.evaluate(animation),
child: FlutterLogo(),
),
),
));
}
}
- 使用
AnimatedBuilder创建动画
import 'package:flutter/material.dart';
class CurvedAnimationPage extends StatefulWidget {
final String title;
CurvedAnimationPage({Key key, this.title}) : super(key: key);
@override
_CurvedAnimationPageState createState() => _CurvedAnimationPageState();
}
class _CurvedAnimationPageState extends State
with SingleTickerProviderStateMixin {
Animation animation;
AnimationController controller;
@override
void initState() {
super.initState();
controller = AnimationController(
duration: const Duration(milliseconds: 2000), vsync: this);
animation = CurvedAnimation(parent: controller,curve: Curves.easeInOutQuart)
..addStatusListener((status) {
if (status == AnimationStatus.completed) {
controller.reverse();
} else if (status == AnimationStatus.dismissed) {
controller.forward();
}
});
controller.forward();
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('曲线动画d'),
),
body: GrowTransition(child: LogoWidget(),animation: animation)
);
}
}
// AnimatedBuilder 的使用
class GrowTransition extends StatelessWidget {
final Widget child;
final Animation animation;
static final _opacityTween = Tween(begin: 0.1, end: 1);
static final _sizeTween = Tween(begin: 0.0, end: 300);
const GrowTransition({Key key,this.child,this.animation}) : super(key: key);
@override
Widget build(BuildContext context) {
return Center(
child: AnimatedBuilder(
animation: animation,
child: child,
builder: (BuildContext context, Widget child) {
return Opacity(
opacity: _opacityTween.evaluate(animation),
child: Container(
width: _sizeTween.evaluate(animation),
height: _sizeTween.evaluate(animation),
child: child,
),
);
},
),
);
}
}
class LogoWidget extends StatelessWidget {
const LogoWidget({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
child:Container(
child: FlutterLogo(),
)
);
}
}
- 旋转+缩放
return RotationTransition(
turns:Tween(begin:0.0,end:1.0)
.animate(CurvedAnimation(
parent: animation1,
curve: Curves.fastOutSlowIn
)),
child:ScaleTransition(
scale:Tween(begin: 0.0,end:1.0)
.animate(CurvedAnimation(
parent: animation1,
curve:Curves.fastOutSlowIn
)),
child: child,
)
);
- 渐隐渐现
return FadeTransition(
opacity: Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation(
parent: animation1,
curve: Curves.fastOutSlowIn)
),
child: child,
);
- 左右滑动动画
return SlideTransition(
position: Tween(
begin: Offset(1.0, 0.0),
end: Offset(0.0, 0.0)
).animate(CurvedAnimation(
parent: animation1,
curve: Curves.fastOutSlowIn
)),
child: child,
);