【Flutter 专题】38 Animation 基本动画 (二)
【Flutter 专题】38 Animation 基本动画 (二)
阿策小和尚
发布于 2019-08-12 16:26:31
发布于 2019-08-12 16:26:31
和尚前两天学习了以下 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');
})));
}
和尚学习了一下稍进阶的动画，如果有问题的烦请多多指导
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2019-03-18，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录