Flutter 38: 图解 Flutter 基本动画
Posted free-thinker
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Flutter 38: 图解 Flutter 基本动画 相关的知识,希望对你有一定的参考价值。
小菜前两天学习了以下 Animation 的基本动画,接下来小菜学习以下稍微进阶版的 Animation 动画。
复合动画
小菜前两天学习的主要是基本的单一动画,当然多个动画效果集一身也是毫无问题的,小菜接下来尝试一个图片显隐性和缩放同时循环使用的 Demo;
- addStatusListener 用来监听当前动画状态,即开始或结束;
- addListener 用来坚挺动画过程,可获取实时 value 值;
AnimationController controller;
Animation<double> animation, sizeAnim;
@override
void initState() {
super.initState();
controller = AnimationController(
duration: const Duration(milliseconds: 2000), vsync: this);
animation = Tween(begin: 0.0, end: 1.0).animate(controller);
sizeAnim = Tween(begin: 0.0, end: 180.0).animate(controller);
animation.addStatusListener((status) {
if (status == AnimationStatus.completed) {
controller.reverse();
} else if (status == AnimationStatus.dismissed) {
controller.forward();
}
});
sizeAnim.addStatusListener((status) {
if (status == AnimationStatus.completed) {
controller.reverse();
} else if (status == AnimationStatus.dismissed) {
controller.forward();
}
});
}
Widget bodyWid() {
return Center(
child: Opacity(
opacity: animation.value,
child: FlutterLogo(size: sizeAnim.value)));
}
时间段动画
既然可以监听动画过程和动画状态,整体的动画便可以灵活掌握;小菜接下来尝试一下分时间段动画,前 50% 显隐性处理,后 50% 缩放处理;
AnimationController controller;
Animation<double> animation, sizeAnim;
@override
void initState() {
super.initState();
controller = AnimationController(duration: const Duration(milliseconds: 2000), vsync: this);
animation = Tween<double>(
begin: 0.0,
end: 1.0,
).animate(CurvedAnimation(
parent: controller, curve: Interval(0.0, 0.5, curve: Curves.ease)));
sizeAnim = Tween<double>(
begin: 100.0,
end: 180.0,
).animate(CurvedAnimation(
parent: controller,
curve: Interval(0.5, 1.0, curve: Curves.fastOutSlowIn)));
}
Widget bodyWid() {
return Center(
child: Opacity(
opacity: animation.value,
child: FlutterLogo(size: sizeAnim.value)));
}
自定义动画
动画是灵活的,我们可以根据自己的需求自定义动画效果,小菜尝试一个圆环绕一个圆转圈;
AnimationController controller;
Animation<double> animation;
@override
void initState() {
super.initState();
controller = AnimationController(duration: const Duration(milliseconds: 2000), vsync: this);
animation = Tween(begin: -1.0, end: 1.0).animate(controller);
}
class AnimationCanvas extends CustomPainter {
Animation<double> animation;
AnimationCanvas(this.animation);
Paint _paint = Paint()
..color = Colors.blue
..strokeWidth = 4.0
..style = PaintingStyle.stroke;
@override
void paint(Canvas canvas, Size size) {
canvas.save();
canvas.drawCircle(Offset(300, 300.0), 150.0, _paint);
canvas.restore();
canvas.save();
canvas.translate(150 * sin(pi * animation.value), 150 * cos(pi * animation.value));
canvas.drawCircle(Offset(300, 300.0), 10.0, _paint..color = Colors.red);
canvas.restore();
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}
Hero 动画
Hero 动画是 Flutter 提供的飞入式动画,主要用在页面间切换时动画,且返回时动画按原路返回;使用时设置两个页面间 tag 一致即可,方便简洁;
Widget bodyWid04() {
return Container(
child: Padding(
padding: EdgeInsets.all(10.0),
child: GestureDetector(
child: Row(children: <Widget>[
Hero(tag: ‘user_header‘, child: FlutterLogo(size: 50.0)),
Padding(
padding: EdgeInsets.only(left: 12.0),
child: Text(‘Flutter Ptoto‘))
]),
onTap: () {
Navigator.pushNamed(context, ‘animateRoute01‘);
})));
}
小菜学习了一下稍进阶的动画,如果有问题的烦请多多指导!
以上是关于Flutter 38: 图解 Flutter 基本动画 的主要内容,如果未能解决你的问题,请参考以下文章
Flutter 专题61 图解基本 Button 按钮小结 #yyds干货盘点#
Flutter 专题68 图解基本约束 Box #yyds干货盘点#
Flutter 专题66 图解基本约束 Box #yyds干货盘点#
Flutter 专题65 图解基本 TextField 文本输入框 #yyds干货盘点#