Android利用ScaleTransition實現(xiàn)吹氣球動畫
前言
這是最后一篇介紹如何使用基本動畫組件的文章，我們繼續(xù) Transition 的動畫，本篇來介紹 ScaleTransition。我們在之前的文章介紹過使用 Animation 和 AnimationController 來實現(xiàn)組件的縮放，那是通過更改圖片的尺寸實現(xiàn)的，具體可以參考：Flutter 實現(xiàn)愛心三連動畫。
而對于只需要放大或縮小的場合，可以直接使用 ScaleTransition 來完成，例如我們本篇實現(xiàn)了一個氣球從小到大，感覺像被用力吹起來一樣的動畫效果。
balloon.gif
ScaleTransition 介紹
ScaleTransition 的使用非常簡單，只有三個參數(shù)，構造方法定義如下。
const?ScaleTransition({
??Key??key,
??required?Animation<double>?scale,
??this.alignment?=?Alignment.center,
??this.child,
})
參數(shù)對應的說明如下：
scale：即組件的縮放尺寸，為 Animation 對象，組件實際的尺寸等于組件的實際尺寸乘以該對象的值。。alignment：即縮放的起始對齊位置，通過這個參數(shù)可以控制組件的縮放方向，比如我們的氣球就是從bottomCenter開始縮放的，這樣氣球嘴那邊感覺沒有動一樣。child：要縮放的子組件。
應用
我們要實現(xiàn)的氣球動畫非常簡單，找一張氣球圖片 (推薦一個找免費 png 圖素材的國外網(wǎng)站：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 控制組件尺寸實現(xiàn)類似吹氣球的動畫。ScaleTransition 的實際應用有不少，例如點擊圖片查看大圖、縮小轉場切換、以及鏡頭從近拉到遠或從遠處走過來的那種感覺等等。有興趣的可以自己嘗試一些有趣的動畫 —— 畢竟玩動畫比單純寫界面更有趣一些！
以上就是Android利用ScaleTransition實現(xiàn)吹氣球動畫的詳細內(nèi)容，更多關于Android 吹氣球動畫的資料請關注腳本之家其它相關文
相關文章
Android Flutter實現(xiàn)興趣標簽選擇功能
我們在首次使用內(nèi)容類 App 的時候，不少都會讓我們選擇個人偏好，通過這些標簽選擇可以預先知道用戶的偏好信息。我們本篇就來看看 Flutter 如何實現(xiàn)興趣標簽的選擇，需要的可以參考一下2022-11-11
這篇文章主要介紹了Android 進度條自動前進效果，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07
android側滑菜單控件DrawerLayout使用方法詳解
這篇文章主要為大家詳細介紹了android側滑菜單控件DrawerLayout的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
下面小編就為大家?guī)硪黄昝澜鉀Q安卓jni項目會刪除其他so文件的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-12-12
Android實戰(zhàn)打飛機游戲之無限循環(huán)的背景圖(2)
這篇文章主要為大家詳細介紹了Android實戰(zhàn)打飛機游戲之無限循環(huán)的背景圖，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-07
Android動態(tài)更新Menu菜單的實現(xiàn)過程
菜單是用戶界面中最常見的元素之一,使用非常頻繁,下面這篇文章主要給大家介紹了關于Android動態(tài)更新Menu菜單的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09
Android實現(xiàn)音量調(diào)節(jié)的方法
這篇文章主要介紹了Android實現(xiàn)音量調(diào)節(jié)的方法,涉及Android頁面布局及多媒體播放的設置技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
Android使用Intent發(fā)送短信的實現(xiàn)方法
這篇文章主要介紹了Android使用Intent發(fā)送短信的實現(xiàn)方法,結合簡單實例形式分析了Android短信發(fā)送功能的實現(xiàn)技巧,需要的朋友可以參考下2016-07-07
這篇文章主要為大家詳細介紹了Android畫板開發(fā)之撤銷，反撤銷功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要介紹了Android 簡單好用的屏幕適配方案，幫助大家更好的理解和學習使用Android，感興趣的朋友可以了解下2021-04-04