Flutter 中的 Animations（一）

// 执行动画
controller.forward();
}

@override
Widget build(BuildContext context) {
return MaterialApp(
title: ‘AnimateApp’,
theme: ThemeData(
primaryColor: Colors.redAccent
),
home: Scaffold(
appBar: AppBar(
title: Text(‘AnimateApp’),
),
body: Center(
child: Container(
// 获取动画的值赋给 widget 的宽高
width: animation.value,
height: animation.value,
decoration: BoxDecoration(
color: Colors.redAccent
),
),
)
)
);
}

@override
void dispose() {
// 资源释放
controller.dispose();
super.dispose();
}
}

效果如下：

可以看出上面的动画是线性运动的，我们可以通过 CurvedAnimation 来实现非线性运动的动画代码如下：

controller = AnimationController(
vsync: this, duration: const Duration(milliseconds: 2000));
// 非线性动画
final CurvedAnimation curve = CurvedAnimation(
parent: controller, curve: Curves.elasticOut);
animation = Tween(begin: 50.0, end: 200.0).animate(curve)
…addListener(() {
setState(() {});
});

效果如下：

然后我们还可以给动画添加状态监听，通过给 Animation 添加 addStatusListener(...) 来监听当前动画的状态，如&