Flutter 动画
文章目录
准备
void main() {
runApp(MyWidget());
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(home: AnimalTween());
}
}
AnimationController
动画控制器
允许执行以下任务:
-
播放一个动画[向前]或[向后]或[停止]一个动画。
-
设置动画为特定的[值]。
-
定义动画的[上界]和[下界]值。
-
使用物理模拟,创建一个[投掷]动画效果
默认情况下,在给定的持续时间内,[AnimationController]线性生成范围内的值从0.0到1.0。动画控制器生成一个新的值,当运行应用程序的设备准备好显示一个新帧(通常,这个速率约为每秒60个值)
Ticker providers
一个[AnimationController]需要一个[TickerProvider],它作为构造函数中的’ vsync '参数
[AnimationController]类使用[Ticker]来渐进它所控制的动画
TickerProvider 提供了2个实现类TickerProviderStateMixin和SingleTickerProviderStateMixin
SingleTickerProviderStateMixin 常用于在State整个生命周期中只创建单个AnimationController的情况下
生命周期
当不再需要时,[AnimationController]应该被dispose。这减少了泄漏的可能性。
当与[StatefulWidget]一起使用时,AnimationController]一般被创建在State.initState
方法,然后在[State.dispose)方法中处理
Tween
开始值和结束值之间的线性插值
要在动画中使用[Tween]对象,请调用[Tween]的[animate]方法,并将你想要修改的[Animation]对象传递给它
Sample
FlutterLogo从30-50的放大动画
class AnimalTween extends StatefulWidget {
@override
_AnimalTweenState createState() => _AnimalTweenState();
}
class _AnimalTweenState extends State<AnimalTween>
with SingleTickerProviderStateMixin {
late Animation animation;
late AnimationController controller;
@override
void initState() {
super.initState();
controller =
AnimationController(vsync: this, duration: Duration(seconds: 1));
animation = Tween(begin: 30.0, end: 50).animate(controller);
//控制器的监听
controller.addListener(() {
//0.0-1.0之间
print("value=${controller.value}");
//调用setState()来触发UI重建
setState(() {});
});
//监听动画状态改变
controller.addStatusListener((status) {
print("status=$status");
});
//监听修改过后的值
animation.addListener(() {
print("animation value=${animation.value}");
});
//开始向前运行动画
controller.forward();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.lightBlue,
),
body: Center(
child: FlutterLogo(
size: animation.value,
),
));
}
}
Tween 还可以这样:
late Animation<Offset> animation;
//设置偏移量
animation =
Tween(begin: Offset(30, 50), end: Offset(10, 0)).animate(controller);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.lightBlue,
),
body: Center(
child: Stack(
children: [
Positioned(
top: animation.value.dx,
left: animation.value.dy,
child: FlutterLogo(),
)
],
),
));
}
//在两个EdgeInsets之间的插值
EdgeInsetsTween translate = EdgeInsetsTween(
begin: EdgeInsets.only(left: 20), end: EdgeInsets.only(left: 0))
.animate(tweenController);
经常见到这样的代码
controller =
AnimationController(vsync: this, duration: Duration(seconds: 2));
CurvedAnimation curvedAnimation =
CurvedAnimation(parent: controller, curve: Interval(0.5, 1));
animation = Tween(begin: 30.0, end: 50).animate(curvedAnimation);
CurvedAnimation
将将动画过程定义为一个非线性曲线的动画
CurvedAnimation curvedAnimation =
CurvedAnimation(parent: controller, curve: Interval(0.5, 1));
构造参数如下:
parent:此动画应用曲线的动画
curve:在forward方向上使用的曲线
reverseCurve:向reverse(相反)方向使用的曲线
Interval
可以使用[Interval]来延迟动画。比如,六秒的动画,使用[Interval],其[begin]设置为0.5,其[end]设置为1.0将会变成一个3秒后开始的时间为3秒的动画
参考:Flutter中的动画