真会玩！用手机吹气球你见过不？

2022 年 8 月 11 日
湖南
本文字数：1230 字
阅读完需：约 4 分钟

前言

这是最后一篇介绍如何使用基本动画组件的文章，我们继续 Transition 的动画，本篇来介绍 ScaleTransition。我们在之前的文章介绍过使用 Animation 和 AnimationController 来实现组件的缩放，那是通过更改图片的尺寸实现的。

而对于只需要放大或缩小的场合，可以直接使用 ScaleTransition 来完成，例如我们本篇实现了一个气球从小到大，感觉像被用力吹起来一样的动画效果。

ScaleTransition 介绍

ScaleTransition 的使用非常简单，只有三个参数，构造方法定义如下。

const ScaleTransition({  Key? key,  required Animation<double> scale,  this.alignment = Alignment.center,  this.child,})

复制代码

参数对应的说明如下：

scale：即组件的缩放尺寸，为 Animation<double> 对象，组件实际的尺寸等于组件的实际尺寸乘以该对象的值。。
alignment：即缩放的起始对齐位置，通过这个参数可以控制组件的缩放方向，比如我们的气球就是从bottomCenter 开始缩放的，这样气球嘴那边感觉没有动一样。
child：要缩放的子组件。

应用

我们要实现的气球动画非常简单，找一张气球图片。然后使用一个 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 的实际应用有不少，例如点击图片查看大图、缩小转场切换、以及镜头从近拉到远或从远处走过来的那种感觉等等。有兴趣的可以自己尝试一些有趣的动画 —— 毕竟玩动画比单纯写界面更有趣一些！