Android怎么利用ScaleTransition實現(xiàn)吹氣球動畫

這篇文章主要介紹“Android怎么利用ScaleTransition實現(xiàn)吹氣球動畫”，在日常操作中，相信很多人在Android怎么利用ScaleTransition實現(xiàn)吹氣球動畫問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Android怎么利用ScaleTransition實現(xiàn)吹氣球動畫”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

前言

對于只需要放大或縮小的場合，可以直接使用 ScaleTransition 來完成，例如我們本篇實現(xiàn)了一個氣球從小到大，感覺像被用力吹起來一樣的動畫效果。

ScaleTransition 介紹

ScaleTransition  的使用非常簡單，只有三個參數(shù)，構(gòu)造方法定義如下。

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

參數(shù)對應(yīng)的說明如下：

• scale：即組件的縮放尺寸，為 Animation 對象，組件實際的尺寸等于組件的實際尺寸乘以該對象的值。。

• alignment：即縮放的起始對齊位置，通過這個參數(shù)可以控制組件的縮放方向，比如我們的氣球就是從bottomCenter 開始縮放的，這樣氣球嘴那邊感覺沒有動一樣。

• child：要縮放的子組件。

應(yīng)用

我們要實現(xiàn)的氣球動畫非常簡單，找一張氣球圖片 。然后使用一個 Animation 對象控制縮放的時間和大小即可。因為氣球后面越來越難吹，因此我們將曲線設(shè)置為 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,
    );
  }
}

到此，關(guān)于“Android怎么利用ScaleTransition實現(xiàn)吹氣球動畫”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>