【Flutter】不同缩放动画效果实现比较

最新推荐文章于 2025-05-10 14:52:42 发布

原创

最新推荐文章于 2025-05-10 14:52:42 发布 · 654 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #动画 #android

本文介绍了Flutter中实现缩放动画的几种方法，包括ScaleTransition、SizeTransition、AnimatedSize和AnimatedBuilder，并通过实例展示了它们的特点和应用场景。特别地，当需要实现特定方向的缩放效果时，使用AnimatedBuilder配合可以达到最佳效果。

需求背景

组件缩放可以向着一个方向进行缩放，放大列表中某一个Cell期望它是向后进行放大而非组件中心点开始缩放。具体效果如下图所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-76WrkXGr-1658319948974)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/743e580fa2b548aba786ef4b9b72ad8b~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?)]

可缩放组件介绍

ScaleTransition

ScaleTransition具体实现如下代码，设置AnimationController控制器若需要增加数值操作可以再增加Animate再调用forward方法执行。

PS:动画实现在以前文章中有介绍过

动画控制器
_scaleAnimationController = AnimationController(
  vsync: this,
  duration: Duration(milliseconds: 3000),
);
scale = Tween(begin: 1.0, end: 1.29).animate(_scaleAnimationController);

ScaleTransition(
  scale: scale,
  alignment: Alignment.centerLeft,
  child: Container(
    margin: EdgeInsets.all(50),
    color: Colors.yellow,
    height: 200,
    width: 100,
  ),
)