快捷導(dǎo)航

Android利用ScaleTransition實(shí)現(xiàn)吹氣球動(dòng)畫

更新時(shí)間：2022年04月18日 08:46:23 作者：島上碼農(nóng)

這篇文章主要為大家介紹了如何將利用ScaleTransition實(shí)現(xiàn)一個(gè)吹氣球的動(dòng)畫，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起了解一下

前言

這是最后一篇介紹如何使用基本動(dòng)畫組件的文章，我們繼續(xù) Transition 的動(dòng)畫，本篇來介紹 ScaleTransition。我們?cè)谥暗奈恼陆榻B過使用 Animation 和 AnimationController 來實(shí)現(xiàn)組件的縮放，那是通過更改圖片的尺寸實(shí)現(xiàn)的，具體可以參考：Flutter 實(shí)現(xiàn)愛心三連動(dòng)畫。

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

balloon.gif

ScaleTransition 介紹

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

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

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

scale：即組件的縮放尺寸，為 Animation 對(duì)象，組件實(shí)際的尺寸等于組件的實(shí)際尺寸乘以該對(duì)象的值。。
alignment：即縮放的起始對(duì)齊位置，通過這個(gè)參數(shù)可以控制組件的縮放方向，比如我們的氣球就是從bottomCenter 開始縮放的，這樣氣球嘴那邊感覺沒有動(dòng)一樣。
child：要縮放的子組件。

應(yīng)用

我們要實(shí)現(xiàn)的氣球動(dòng)畫非常簡單，找一張氣球圖片 (推薦一個(gè)找免費(fèi) png 圖素材的國外網(wǎng)站：https://www.pngpix.com）。然后使用一個(gè) Animation 對(duì)象控制縮放的時(shí)間和大小即可。因?yàn)闅馇蚝竺嬖絹碓诫y吹，因此我們將曲線設(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();

??//使用自定義曲線動(dòng)畫過渡效果
??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,
????);
??}
}

總結(jié)

本篇介紹了使用 ScaleTransition 控制組件尺寸實(shí)現(xiàn)類似吹氣球的動(dòng)畫。ScaleTransition 的實(shí)際應(yīng)用有不少，例如點(diǎn)擊圖片查看大圖、縮小轉(zhuǎn)場(chǎng)切換、以及鏡頭從近拉到遠(yuǎn)或從遠(yuǎn)處走過來的那種感覺等等。有興趣的可以自己嘗試一些有趣的動(dòng)畫 —— 畢竟玩動(dòng)畫比單純寫界面更有趣一些！

以上就是Android利用ScaleTransition實(shí)現(xiàn)吹氣球動(dòng)畫的詳細(xì)內(nèi)容，更多關(guān)于Android 吹氣球動(dòng)畫的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文

您可能感興趣的文章: