Android利用ScaleTransition实现吹气球动画

前言

这是最后一篇介绍如何使用基本动画组件的文章，我们继续 transition 的动画，本篇来介绍 scaletransition。我们在之前的文章介绍过使用 animation 和 animationcontroller 来实现组件的缩放，那是通过更改图片的尺寸实现的，具体可以参考：flutter 实现爱心三连动画。

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

balloon.gif

scaletransition 介绍

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

const scaletransition({
  key? key,
  required animation<double> scale,
  this.alignment = alignment.center,
  this.child,
})

参数对应的说明如下：

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

应用

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

以上就是android利用scaletransition实现吹气球动画的详细内容，更多关于android 吹气球动画的资料请关注其它相关文