class AnimationDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('AnimationDemo'), elevation: 0.0,),
body: AnimationDemoHome(),
);
}
}
class AnimationDemoHome extends StatefulWidget {
@override
_AnimationDemoHomeState createState() => _AnimationDemoHomeState();
}
// Ticker 会在每一帧作出一个反应,比如去通知动画对象去计算当前帧的值
class _AnimationDemoHomeState extends State<AnimationDemoHome>
with TickerProviderStateMixin {
// 控制 flutter 的动画使用 AnimationController
AnimationController animationCtr;
Animation animation;
Animation animationColor;
CurvedAnimation curve; // 曲线动画
@override
void initState() {
super.initState();
// duration:设置动画时长,vsync:主要作用就是放置屏幕外的动画消耗不必要的资源,值应该是 TickerProvider 类型
animationCtr = AnimationController(
// value: 30.0, // 设置初始值
// lowerBound: 20.0, // 开始的值
// upperBound: 100.0, // 结束的值
duration: Duration(milliseconds: 3000),
vsync: this
);
// 设置动画效果
curve = CurvedAnimation(parent: animationCtr, curve: Curves.bounceOut);
// 动画里面需要的范围的值可以用Tween来设置,可以设置大小也可以设置颜色
// animation = Tween(begin: 30.0, end: 100.0).animate(animationCtr);
// animationColor = ColorTween(begin: Colors.redAccent, end: Colors.red[900]).animate(animationCtr);
// 曲线动画animate中传入curve
animation = Tween(begin: 30.0, end: 100.0).animate(curve);
animationColor = ColorTween(begin: Colors.redAccent, end: Colors.red[900]).animate(curve);
// 监听控制器控制的动画
// animationCtr.addListener(() {
//// print('${animationCtr.value}');
// setState(() {
//
// });
// });
// 监听动画的运行状态
animationCtr.addStatusListener((AnimationStatus status) {
print(status);
});
// 开始播放动画
// animationCtr.forward();
}
@override
void dispose() {
super.dispose();
animationCtr.dispose();
}
@override
Widget build(BuildContext context) {
return Center(
child: AnimationHeart(animations: [animation, animationColor], controller: animationCtr,),
);
}
}
// 动画值有变化就自动重建自己的小部件
class AnimationHeart extends AnimatedWidget {
final List animations;
final AnimationController controller;
AnimationHeart({this.animations, this.controller}) : super(listenable: controller);
@override
Widget build(BuildContext context) {
return IconButton(
icon: Icon(Icons.favorite),
iconSize: animations[0].value,
color: animations[1].value,
onPressed: () {
switch (controller.status) {
case AnimationStatus.completed:
controller.reverse();
break;
default:
controller.forward();
}
}
);
}
}
网友评论