「这是我参与11月更文挑战的第2天,活动详情查看:2021最后一次更文挑战」
前言
这是最后一篇介绍如何使用基本动画组件的文章,我们继续 Transition
的动画,本篇来介绍 ScaleTransition
。我们在之前的文章介绍过使用 Animation
和 AnimationController
来实现组件的缩放,那是通过更改图片的尺寸实现的,具体可以参考:
Flutter 入门与实战(九十三):使用 Animation 构建爱心三连动画
而对于只需要放大或缩小的场合,可以直接使用 ScaleTransition
来完成,例如我们本篇实现了一个气球从小到大,感觉像被用力吹起来一样的动画效果。
ScaleTransition 介绍
ScaleTransition
的使用非常简单,只有三个参数,构造方法定义如下。
const ScaleTransition({
Key? key,
required Animation<double> scale,
this.alignment = Alignment.center,
this.child,
})
参数对应的说明如下:
scale
:即组件的缩放尺寸,为 Animation 对象,组件实际的尺寸等于组件的实际尺寸乘以该对象的值。。alignment
: 即缩放的起始对齐位置,通过这个参数可以控制组件的缩放方向,比如我们的气球就是从bottomCenter
开始缩放的,这样气球嘴那边感觉没有动一样。child
:要缩放的子组件。
应用
我们要实现的气球动画非常简单,找一张气球图片 (推荐一个找免费 png 图素材的国外网站:www.pngpix.com)。然后使用一个 Animation 对象控制缩放的时间和大小即可。因为气球后面越来越难吹,因此我们将曲线设置为 easeOut
(先快后慢),源代码如下:
class ScaleTransitionDemo extends StatefulWidget {
ScaleTransitionDemo({Key? key}) : super(key: key);
@override
_ScaleTransitionDemoState createState() => _ScaleTransitionDemoState();
}
class _ScaleTransitionDemoState extends State<ScaleTransitionDemo>
with SingleTickerProviderStateMixin {
late AnimationController _controller =
AnimationController(duration: const Duration(seconds: 10), vsync: this)
..repeat();
//使用自定义曲线动画过渡效果
late Animation<double> _animation =
CurvedAnimation(parent: _controller, curve: Curves.easeOut);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('ScaleTransition'),
brightness: Brightness.dark,
backgroundColor: Colors.blue,
),
body: Center(
child: balloon(),
),
);
}
@override
void dispose() {
_controller.stop();
_controller.dispose();
super.dispose();
}
Widget balloon() {
return ScaleTransition(
alignment: Alignment.bottomCenter,
child: Image.asset(
'images/balloon.png',
),
scale: _animation,
);
}
}
总结
本篇介绍了使用 ScaleTransition
控制组件尺寸实现类似吹气球的动画。ScaleTransition
的实际应用有不少,例如点击图片查看大图、缩小转场切换、以及镜头从近拉到远或从远处走过来的那种感觉等等。有兴趣的可以自己尝试一些有趣的动画 —— 毕竟玩动画比单纯写界面更有趣一些!
我是岛上码农,微信公众号同名,这是Flutter 入门与实战的专栏文章,提供体系化的 Flutter 学习文章。对应源码请看这里:Flutter 入门与实战专栏源码。如有问题可以加本人微信交流,微信号:
island-coder
。觉得有收获请按如下方式给个爱心三连:👍🏻:点个赞鼓励一下!
🌟:收藏文章,方便回看哦!
💬:评论交流,互相进步!