AnimatedBuilder
你可以在我的博客看到这篇文章
如果之前的那些动画Widget都不能满足你,那么你可以试试这个。
使用AnimatedBuilder可以实现动画的过程监听,数值控制,过程控制,多动画同时进行等。
@override
void initState() {
super.initState();
//AnimationController对象,
_controller = AnimationController(
//使State with TickerProviderStateMixin
vsync: this,
duration: Duration(milliseconds: 5000),
//value的下界
lowerBound: 1,
//value的上界
upperBound: 10);
}
void _animating() {
setState(() {
if (status) {
//正向动画
_controller.forward();
} else {
//反向动画
_controller.reverse();
}
status = !status;
});
}
GestureDetector(
onTap: _animating,
child: AnimatedBuilder(
animation: _controller,
//每次_controller.value的数值更新,都会通知到这里,通过数值的变化来进行动画。
builder: (context, child) {
//旋转widget
return Transform.rotate(
child: Container(
width: 200.0,
//height通过_controller.value来控制
height: 50 + _controller.value * 20,
//color通过_controller.value来控制
color: Color(0xff661111 + _controller.value.toInt() * 1000),
child: child),
//旋转的角度通过_controller.value来控制
angle: _controller.value * pi,
);
},
//此处的child会被传入builder中的child。但是此处的widget不会被动画更新
child: Text(
"AnimatedBuilder演示",
style: TextStyle(fontSize: 40),
),
),
),
旋转角度,背景色,和高度同时进行动画。
AnimatedBuilder的思路和代码都很简单,使用AnimationController更新value,AnimatedBuilder中监听这个value的更新,通过setState({})来进行动画。
只要掌握这个的使用,所有的widget动画都不在话下了。
AnimatedTheme
准确来说这个不是widget,但是也能实现动画效果,主要是在全局的动画发生改变时使用的。
这个是应用在MaterialApp下的theme属性,当ThemeData发生改变时,应用这个动画。
void _animating() {
setState(() {
status = !status;
});
}
MaterialApp(
//这里改变了app的日间模式和夜间模式
theme: status ? ThemeData.dark() : ThemeData.light(),
home: Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: GestureDetector(
onTap: _animating,
child: FlatButton(
onPressed: () {
_animating();
},
child: Text("AnimatedTheme演示")),
),
),
floatingActionButton: FloatingActionButton(
onPressed: _animating,
tooltip: 'Increment',
child: Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
),
);
``