Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫(huà)效果(六)
在上一篇文章中,我們之前對(duì)BarChart.lerp的定義并不是高效的,我們正在創(chuàng)建的Bar實(shí)例,僅作為Bar.lerp的參數(shù)給出,并且針對(duì)動(dòng)畫(huà)參數(shù)t的每個(gè)值重復(fù)出現(xiàn)。每秒60幀,這意味著可能很多Bar實(shí)例被送到垃圾收集器,即使是相對(duì)較短的動(dòng)畫(huà)。
我們可以采用以下三種解決方案:
- Bar實(shí)例可以通過(guò)在Bar類(lèi)中僅創(chuàng)建一次而不是每次調(diào)用collapsed來(lái)重復(fù)使用,但這種方法不適合我們的應(yīng)用程序。
- 重用可以通過(guò)BarChartTween來(lái)處理,通過(guò)使其構(gòu)造函數(shù)創(chuàng)建一個(gè)列表_tween的BarTween實(shí)例,在創(chuàng)建補(bǔ)間條形圖時(shí)使用(i) => _tweens[i].lerp(t)。這種方法破壞了使用靜態(tài)方法lerp的慣例,靜態(tài)BarChart.lerp中沒(méi)有涉及到任何對(duì)象,用于在動(dòng)畫(huà)持續(xù)時(shí)間內(nèi)存儲(chǔ)補(bǔ)間列表。相反,BarChartTween對(duì)象完全適合這一點(diǎn)。
- 假設(shè)Bar.lerp中有合適的條件邏輯,可以使用null來(lái)表示折疊條,這種方法是非常高效的,但是需要注意避免引用或誤解null。null常用在Flutter SDK中,其中靜態(tài)方法lerp會(huì)將null視為動(dòng)畫(huà)終點(diǎn),通常將其解釋為某種不可見(jiàn)元素,比如完全透明的顏色或零尺寸的圖形元素。在我們的代碼中,lerpDouble將null視為零,除非兩個(gè)動(dòng)畫(huà)結(jié)束點(diǎn)都為null。
綜合考慮之下,我們使用最后一種解決方案,首先我們需要更新BarChart的部分代碼。
class BarChart { // ... static BarChart lerp(BarChart begin, BarChart end, double t) { final barCount = max(begin.bars.length, end.bars.length); final bars = new List.generate( barCount, (i) => Bar.lerp(begin._barOrNull(i), end._barOrNull(i), t) ); return new BarChart(bars); } // ... }
然后我們還需要更新一下Bar的條件邏輯。
class Bar { Bar(this.x, this.width, this.height, this.color); final double x; final double width; final double height; final Color color; static Bar lerp(Bar begin, Bar end, double t) { if(begin == null && end == null) return null; return new Bar( lerpDouble((begin??end).x, (end??begin).x, t), // ?:變量可以為null lerpDouble(begin?.width, end?.width, t), lerpDouble(begin?.height, end?.height, t), Color.lerp((begin??end).color, (end??begin).color, t) ); } }
現(xiàn)在我們的應(yīng)用程序里,如何將使用折疊的條形作為不可見(jiàn)元素的判斷,寫(xiě)在Bar.lerp的條件邏輯中,實(shí)現(xiàn)我們想要的高效率。換一個(gè)角度來(lái)看,不知道大家有沒(méi)有發(fā)現(xiàn),現(xiàn)在代碼的可維護(hù)性已經(jīng)不如上一個(gè)版本了。這就是為什么之前選擇看起來(lái)效率較低的解決方案。在性能與可維護(hù)性之間選擇,需要通過(guò)衡量之后再作出決定。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫(huà)效果(一)
- Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫(huà)效果(二)
- Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫(huà)效果(十)
- Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫(huà)效果(三)
- Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫(huà)效果(五)
- Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫(huà)效果(九)
- Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫(huà)效果(四)
- Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫(huà)效果(八)
- Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫(huà)效果(七)
- Flutter實(shí)戰(zhàn)教程之酷炫的開(kāi)關(guān)動(dòng)畫(huà)效果
相關(guān)文章
Android使用BottomNavigationBar實(shí)現(xiàn)導(dǎo)航欄功能
這篇文章主要介紹了Android使用BottomNavigationBar實(shí)現(xiàn)導(dǎo)航欄功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-08-08Android 8.0 慢充和快充提示語(yǔ)的實(shí)現(xiàn)原理
這篇文章主要介紹了Android 8.0 慢充和快充提示語(yǔ)的實(shí)現(xiàn)原理,感興趣的朋友跟隨腳本之家小編一起看看吧2018-05-05Android開(kāi)發(fā)之sqlite3命令行簡(jiǎn)單使用方法
這篇文章主要介紹了Android開(kāi)發(fā)之sqlite3命令行簡(jiǎn)單使用方法,分析了Android增刪改查等常用sqlite3的數(shù)據(jù)庫(kù)操作命令使用方法,需要的朋友可以參考下2016-02-02Android開(kāi)發(fā)設(shè)置RadioButton點(diǎn)擊效果的方法
這篇文章主要介紹了Android開(kāi)發(fā)設(shè)置RadioButton點(diǎn)擊效果的方法,詳細(xì)分析了Android開(kāi)發(fā)中RadioButton屬性功能及相關(guān)設(shè)置技巧,需要的朋友可以參考下2017-06-06android 使用uinput模擬輸入設(shè)備的方法
這篇文章主要介紹了android 使用uinput模擬輸入設(shè)備的方法,有需要的朋友可以參考一下2014-01-01安卓(Android)開(kāi)發(fā)之分享帶文字的圖片
用過(guò)微信分享SDK的都應(yīng)該知道,微信分享到朋友圈的時(shí)候是不能同時(shí)分享圖片和文字的,只要有縮略圖,那么文字就不會(huì)生效。那么問(wèn)題就來(lái)了,如果我們想把APP內(nèi)的某些內(nèi)容連帶圖片一起分享到微信,是不是沒(méi)辦法了呢?下面一起來(lái)看看怎么解決。2016-08-08Android4.1中BinderService用法實(shí)例分析
這篇文章主要介紹了Android4.1中BinderService用法,以實(shí)例形式分析了Android4.1新增BinderService類(lèi)的功能、原理及使用技巧,具有一定參考借鑒價(jià)值2015-10-10Android學(xué)習(xí)筆記——Menu介紹(三)
今天繼續(xù)昨天沒(méi)有講完的Menu的學(xué)習(xí),主要是Popup Menu的學(xué)習(xí),需要的朋友可以參考下2014-10-10Android音樂(lè)播放器制作 加入控制臺(tái)(三)
這篇文章主要為大家詳細(xì)介紹了Android音樂(lè)播放器的制作方法,如何加入控制臺(tái),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02Android EasyBarrage實(shí)現(xiàn)輕量級(jí)彈幕效果
本篇文章主要介紹了Android EasyBarrage實(shí)現(xiàn)輕量級(jí)彈幕效果,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08