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();
}
}
);
}
}
flutter动画
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- 本文通过拆解 Flutter 中动画的实现方式以及原理来介绍动画实现的整个过程。 1. 动画四要素 动画在各个平台...
- 前言: 本文将自定义一个FlutterWidget的动画组件,Flutter有颤动的意思在此之前会讲一下Anima...
- 今天中午无意中看到了奔驰的一个发动机的宣传视频,一时手痒,想自己做一个动画来实现一下发动机的动画,当然做出来肯定和...