基于Flutter制作一個(gè)火箭發(fā)射動(dòng)畫(huà)
前言
北京時(shí)間10月16日0時(shí)23分,神舟十三號(hào)飛船成功發(fā)射,目前三名航天員已經(jīng)順利進(jìn)駐空間站,開(kāi)始為期6個(gè)月的“太空差旅”生活。
國(guó)家的航天技術(shù)的突飛猛進(jìn)也讓?shí)u上碼農(nóng)很自豪,今天看 Flutter 的動(dòng)畫(huà)知識(shí),看到了 AnimatedPositioned
這個(gè)組件,可以用于控制組件的相對(duì)位置移動(dòng)。結(jié)合這個(gè)神舟十三號(hào)的發(fā)射,靈機(jī)一動(dòng),正好可以使用AnimatedPositioned
這個(gè)組件實(shí)現(xiàn)火箭發(fā)射動(dòng)畫(huà)。話不多說(shuō),先上效果!
效果說(shuō)明
這里其實(shí)是兩張圖片疊加,一張是背景地球星空的背景圖,一張是火箭?;鸺诎l(fā)射過(guò)程中有兩個(gè)變化:
- 高度越來(lái)越高,其實(shí)就是相對(duì)圖片背景圖底部的位置越來(lái)越大就可以實(shí)現(xiàn);
- 尺寸越來(lái)越小,這個(gè)可以控制整個(gè)組件的尺寸實(shí)現(xiàn)。
然后是動(dòng)畫(huà)取消的選擇,火箭的速度是越來(lái)越快,試了幾個(gè) Flutter 自帶的曲線,發(fā)現(xiàn) easeInCubic
這個(gè)效果挺不錯(cuò)的,開(kāi)始慢,后面越來(lái)越快,和火箭發(fā)射的過(guò)程是類似的。
AnimatedPositioned介紹
AnimatedPositioned
組件的使用方式其實(shí)和 AnimatedContainer 類似。只是AnimatedPositioned
是 Positioned
組件的替代。構(gòu)造方法定義如下:
const AnimatedPositioned({ Key? key, required this.child, this.left, this.top, this.right, this.bottom, this.width, this.height, Curve curve = Curves.linear, required Duration duration, VoidCallback? onEnd, })
前面的參數(shù)和 Positioned
一樣,后面是動(dòng)畫(huà)控制參數(shù),這些參數(shù)的定義和 AnimatedContainer
的是一樣的:
curve
:動(dòng)畫(huà)效果曲線;duration
:動(dòng)畫(huà)時(shí)長(zhǎng);onEnd
:動(dòng)畫(huà)結(jié)束后回調(diào)。
我們可以改變 left
,top
,width
等參數(shù)來(lái)實(shí)現(xiàn)動(dòng)畫(huà)過(guò)渡的效果。比如我們的火箭發(fā)射,就是修改 bottom
(飛行高度控制)和 width
(尺寸大小控制)來(lái)實(shí)現(xiàn)的。
火箭發(fā)射動(dòng)畫(huà)實(shí)現(xiàn)
有了上面的兩個(gè)分析,火箭發(fā)射動(dòng)畫(huà)就簡(jiǎn)單了!完整代碼如下:
class RocketLaunch extends StatefulWidget { RocketLaunch({Key? key}) : super(key: key); @override _RocketLaunchState createState() => _RocketLaunchState(); } class _RocketLaunchState extends State<RocketLaunch> { var rocketBottom = -80.0; var rocketWidth = 160.0; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('火箭發(fā)射'), brightness: Brightness.dark, backgroundColor: Colors.black, ), backgroundColor: Colors.black, body: Center( child: Stack( alignment: Alignment.bottomCenter, children: [ Image.asset( 'images/earth.jpeg', height: double.infinity, fit: BoxFit.fill, ), AnimatedPositioned( child: Image.asset( 'images/rocket.png', fit: BoxFit.fitWidth, ), bottom: rocketBottom, width: rocketWidth, duration: Duration(seconds: 5), curve: Curves.easeInCubic, ), ], ), ), floatingActionButton: FloatingActionButton( child: Text( '發(fā)射', style: TextStyle( color: Colors.white, ), textAlign: TextAlign.center, ), onPressed: () { setState(() { rocketBottom = MediaQuery.of(context).size.height; rocketWidth = 40.0; }); }, ), ); } }
其中一開(kāi)始設(shè)置 bottom
為負(fù)值,是為了隱藏火箭的焰火,這樣會(huì)更有感覺(jué)一些。然后就是在點(diǎn)擊發(fā)射按鈕的時(shí)候,通過(guò) setState
更改底部距離和火箭尺寸就可以搞定了。
總結(jié)
通過(guò)神舟十三飛船發(fā)射,來(lái)一個(gè)火箭動(dòng)畫(huà)是不是挺有趣?其實(shí)這篇主要的知識(shí)點(diǎn)還是介紹 AnimatedPositioned
的應(yīng)用。通過(guò) AnimatedPositioned
可以實(shí)現(xiàn)很多層疊組件的相對(duì)移動(dòng)變化效果,比如進(jìn)度條的滑塊,滑動(dòng)開(kāi)關(guān)等。各位 Flutter 玩家也可以利用 AnimatedPositioned
這個(gè)組件自己來(lái)玩一下好玩的動(dòng)畫(huà)效果哦!
到此這篇關(guān)于基于Flutter制作一個(gè)火箭發(fā)射動(dòng)畫(huà)的文章就介紹到這了,更多相關(guān)Flutter火箭發(fā)射動(dòng)畫(huà)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android中應(yīng)用多進(jìn)程的整理總結(jié)
Android平臺(tái)支持多進(jìn)程通信,也支持應(yīng)用內(nèi)實(shí)現(xiàn)多進(jìn)程,下面這篇文章主要給大家介紹了關(guān)于Android中應(yīng)用多進(jìn)程的相關(guān)資料,文中介紹的很詳細(xì),相信對(duì)大家具有一定的參考借鑒價(jià)值,有需要的朋友們下面來(lái)一起看看吧。2017-01-01僅5步搞定Android開(kāi)發(fā)環(huán)境部署 Android開(kāi)發(fā)環(huán)境搭建教程
僅5步搞定Android開(kāi)發(fā)環(huán)境部署,這篇文章主要為大家詳細(xì)介紹了Android開(kāi)發(fā)環(huán)境搭建教程,感興趣的小伙伴們可以參考一下2016-02-02Android 個(gè)人理財(cái)工具三:添加賬單頁(yè)面 上
本文主要介紹Android 個(gè)人理財(cái)工具添加賬單頁(yè)面的功能實(shí)現(xiàn),這里提供實(shí)例代碼和實(shí)現(xiàn)效果圖,有興趣的小伙伴可以參考下2016-08-08Android編程實(shí)現(xiàn)對(duì)話框Dialog背景透明功能示例
這篇文章主要介紹了Android編程實(shí)現(xiàn)對(duì)話框Dialog背景透明功能,涉及Android對(duì)話框的布局、屬性及事件處理相關(guān)操作技巧,需要的朋友可以參考下2017-07-07Android控件之ScrollView用法實(shí)例分析
這篇文章主要介紹了Android控件之ScrollView用法,以完整實(shí)例形式較為詳細(xì)的分析了ScrollView控件滾動(dòng)顯示的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-09-09Android持久化技術(shù)之SharedPreferences存儲(chǔ)實(shí)例詳解
這篇文章主要介紹了Android持久化技術(shù)之SharedPreferences存儲(chǔ),結(jié)合實(shí)例形式較為詳細(xì)的分析了SharedPreferences存儲(chǔ)的原理、應(yīng)用及具體實(shí)現(xiàn)方法,需要的朋友可以參考下2016-01-01activitygroup 切換動(dòng)畫(huà)效果如何實(shí)現(xiàn)
本文將詳細(xì)介紹activitygroup 切換動(dòng)畫(huà)效果實(shí)現(xiàn)過(guò)程,需要聊解的朋友可以參考下2012-12-12Android開(kāi)發(fā)中Bitmap高效加載使用詳解
在Android開(kāi)發(fā)中,我們經(jīng)常與Bitmap打交道,而對(duì)Bitmap的不恰當(dāng)?shù)牟僮鹘?jīng)常會(huì)導(dǎo)致OOM(Out of Memory)。這篇文章我們會(huì)介紹如何高效地在Android開(kāi)發(fā)中使用Bitmap,在保證圖片顯示質(zhì)量的前提下盡可能占用更小的內(nèi)存。2017-12-12Framework源碼面試之a(chǎn)ctivity啟動(dòng)流程
這篇文章主要為大家介紹了Framework源碼面試之a(chǎn)ctivity啟動(dòng)流程實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09