任何程序的动画原理都是一样的,即:视觉暂留,视觉暂留又叫视觉暂停,人眼在观察景物时,光信号传入大脑神经,需经过一段短暂的时间,光的作用结束后,视觉形象并不立即消失,这种残留的视觉称“后像”,视觉的这一现象则被称为“视觉暂留”。 电影就是依靠视觉暂留,在感官上电影是连续的。使动画有流畅的感觉,帧率至少要达到24帧,即:每秒播放24个图像,因此动画有一个非常关键的性能参数FPS(Frame Per Second),即帧率,达到24fps,画面就比较流畅了,Flutter的FPS理论上可以达到60fps,超过48fps,将会感到丝滑般的顺畅。 为了方便开发者进行动画的开发,Flutter将动画系统进行封装,抽象出4个概念:Animation、Curve、AnimationController、Tween。 将Container控件的大小由100变为300,代码如下: AnimationController的初始化中vsync,这个参数要说明白能说一天,我们只需先记住其写法,this表示SingleTickerProviderStateMixin,屏幕每一帧都会引起AnimationController值的变化。 dispose方法中要记住释放AnimationController。 UI的更新是通过setState更新的, 效果如下: 默认情况下,动画曲线为线性,修改动画曲线如下: 修改的地方说明如下: 如果动画是颜色的变化,修改如下: 对动画状态监听: 动画状态: 上面就是动画的基本用法,有没有发现一些通用的地方: “懒”是原罪,也是社会进步的最大动力。 Flutter封装了AnimatedWidget,此控件就封装了setState。虽然Flutter为封装了大量的动画控件,但万变不离其宗。 Flutter中提供了大量的动画组件及详细用法: 其实动画不仅仅是这些控件属性变化,还有使用Paint自绘制的动画。 看到这么多组件是不是晕了,我也没想到会有这么多组件,那我们改如何选择适合的组件?这真是一个灵魂拷问啊。 这是《Flutter 动画系列》的第一篇,接下来还有: 如果你对Flutter还有疑问或者技术方面的疑惑,欢迎加入Flutter交流群(微信:laomengit)。 同时也欢迎关注我的Flutter公众号【老孟程序员】,公众号首发Flutter的相关内容。 Flutter地址:http://laomengit.com 里面包含160多个组件的详细用法。动画运行的原理
Flutter动画系统
class AnimationDemo extends StatefulWidget {
@override
State<StatefulWidget> createState() => _AnimationDemo();
}
class _AnimationDemo extends State<AnimationDemo>
with SingleTickerProviderStateMixin {
AnimationController _animationController;
@override
void initState() {
_animationController = AnimationController(
duration: Duration(seconds: 2),
lowerBound: 100.0,
upperBound: 300.0,
vsync: this);
_animationController.addListener(() {
setState(() {});
});
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Column(
children: <Widget>[
RaisedButton(
child: Text('开始动画'),
onPressed: () {
_animationController.forward();
},
),
Expanded(
child: Center(
child: Container(
width: _animationController.value,
height: _animationController.value,
color: Colors.red,
),
),
),
],
),
);
}
@override
void dispose() {
_animationController.dispose();
super.dispose();
}
}
_animationController.addListener(() {
setState(() {});
});
class _AnimationDemo extends State<AnimationDemo>
with SingleTickerProviderStateMixin {
AnimationController _animationController;
Animation _animation;
@override
void initState() {
_animationController = AnimationController(
duration: Duration(seconds: 2),
vsync: this);
_animationController.addListener(() {
setState(() {});
});
_animation = CurvedAnimation(parent: _animationController,curve: Curves.easeIn);
_animation = Tween(begin: 100.0,end: 300.0).animate(_animation);
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Column(
children: <Widget>[
RaisedButton(
child: Text('开始动画'),
onPressed: () {
_animationController.forward();
},
),
Expanded(
child: Center(
child: Container(
width: _animation.value,
height: _animation.value,
color: Colors.red,
),
),
),
],
),
);
}
@override
void dispose() {
_animationController.dispose();
super.dispose();
}
}
_animation = ColorTween(begin: Colors.red,end: Colors.blue).animate(_animation);
_animationController.addStatusListener((status) {
if (status == AnimationStatus.completed) {
//执行结束反向执行
_animationController.reverse();
} else if (status == AnimationStatus.dismissed) {
//反向执行结束正向执行
_animationController.forward();
}
});
Flutter 25种动画组件介绍
交流