Android利用ScaleTransition實現吹氣球動畫

2022-04-18 10:00:07

前言

這是最後一篇介紹如何使用基本動畫元件的文章，我們繼續 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 吹氣球動畫的資料請關注it145.com其它相關文

Android利用ScaleTransition實現吹氣球動畫

目錄

前言

ScaleTransition 介紹

應用

總結

熱門文章