《Flutter 動畫系列二》Google工程師帶你選擇Flutter動畫控制項

来源:https://www.cnblogs.com/mengqd/archive/2020/04/03/12628727.html
-Advertisement-
Play Games

對初學者來說,看完這篇文章,我想你腦瓜子一定是嗡嗡的,這都說的是什麼啊。 不要急躁,開始的我和你是一樣的,第一遍看完,完全不知道在說什麼,不明白不要緊,請先收藏此文章,然後先去學習下Flutter內置的25種動畫組件。 地址: "http://laomengit.com/flutter/module ...


對初學者來說,看完這篇文章,我想你腦瓜子一定是嗡嗡的,這都說的是什麼啊。

不要急躁,開始的我和你是一樣的,第一遍看完,完全不知道在說什麼,不明白不要緊,請先收藏此文章,然後先去學習下Flutter內置的25種動畫組件。

地址:http://laomengit.com/flutter/module/animated_1/

不要僅僅是看,要多寫,只有寫才能發現問題。

當你對動畫控制項有了一定的瞭解,在回過頭來細細的品一品這篇文章,你會有不一樣的感受,你品,你細品。

這篇文章的內容是Google 的Flutter工程師Emily原創,我僅僅是翻譯,原創地址:https://www.youtube.com/watch?v=GXIJJkq_H8g

從廣義上來說,Flutter動畫組件分為兩種類型,

  • Drawing-based animations:基於繪製的動畫,就像是畫畫一樣,通常都是獨立的控制項,例如游戲角色或者很難用純碎的代碼來完成的效果。
  • Core-based animations:基於核心的動畫,它面向組件,基於標準的佈局和樣式,從本質上說,傾向於增強控制項的外觀和過渡效果,而不是自己充當獨立的控制項。

想一想你的動畫是基於繪製的,還是基於核心(組件)的:

  • 如果是基於繪製的,而且你的團隊中有專門的設計人員提供素材,建議你使用第三方工具,比如Rive和Lottie,這些庫可以方便的導入資源來構建動畫。
  • 如果是基於核心(組件)的,涉及組件的變化,比如顏色、形狀、位置的變化等。

在Flutter中基於核心(組件)的動畫又分為兩類:

  • 隱式動畫控制項:只需提供給組件開始、結束值,系統執行動畫,比如AnimatedAlign等組件。
  • 顯式動畫控制項:需要設置AnimationController,控制動畫的執行,使用顯式動畫可以完成任何隱式動畫的效果,甚至功能更豐富一些,不過你需要管理該動畫的AnimationController生命周期,AnimationController並不是一個控制項,所以需要將其放在stateful 控制項中。

從上面的分類中,我們不難看出,使用隱式動畫控制項,代碼更簡單,而且無需管理AnimationController的生命周期。

如何確定使用隱式動畫控制項還是顯式動畫控制項?你需要考慮3個問題:

  • 動畫是否一直重覆,比如音樂播放。
  • 動畫值是否不連續,比如一個圓圈,不連續的尺寸變化:小->大,小->大,小->大。連續的尺寸變化:小->大->小->大。
  • 是否有多個組件一起動畫。

如果你對這三個問題中的任何一個回答“是”,那麼你需要使用顯式動畫控制項,否則你就使用隱式動畫控制項。

一旦你確定了使用顯式動畫控制項或者隱式動畫控制項,這個時候你就需要找到對應的組件,你需要的組件是否已經在Flutter中內置了?

對於隱式組件來說:

  • 已經內置:直接使用,當然也可以看下AnimatedContainer組件,AnimatedContainer是非常強大且用途廣泛的動畫組件。
  • 未內置:可以使用TweenAnimationBuilder創建一個自定義的動畫控制項。

對於顯示組件來說:

  • 內置:直接使用相關組件,比如xxxTransition組件。
  • 未內置:自定義一個動畫控制項。

自定義一個顯式的動畫組件需要確認這個動畫組件是單獨一個組件還是組件的一部分,

  • 單獨一個顯示組件:你應該繼承 AnimatedWidget來實現。
  • 組件的一部分:使用AnimatedBuilder來實現。

還有最後一件事情需要考慮:如果你發現由CustomPainter引起的性能問題,你可以像AnimatedWidget一樣使用它,但是CustomPainer直接繪製到畫布上,而無需標準的小部件構建範例,如果使用的好,可以創建一些整潔、豐富的自定義的效果或者節省性能,但如果使用的不好,你的動畫可能引起更多的性能問題,就像是手動管理記憶體一樣,要處理好共用指針,為什麼要用這樣用,是否有記憶體問題,這些問題都要考慮清楚。

最後總結如下圖:

交流

如果你對Flutter還有疑問或者技術方面的疑惑,歡迎加入Flutter交流群(微信:laomengit)。

同時也歡迎關註我的Flutter公眾號【老孟程式員】,公眾號首發Flutter的相關內容。

Flutter地址:http://laomengit.com 裡面包含160多個組件的詳細用法。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 1、 Linux操作系統簡介 Linux具有如下優點: 穩定、免費或者花費少 安全性高 多任務,多用戶 耗資源少 由於內核小,所以它可以支持多種電子產品,如:Android手機、PDA等。 2、 Linux發展趨勢 隨著IT產業的不斷發展,用戶對網站體驗要求也越來越高,目前主流網站後端承載系統都是L ...
  • https://www.cnblogs.com/wt7018/p/11929359.html MongoDB聚合(aggregate) 一、基礎 1、什麼是聚合? 聚合是基於數據處理的聚合管道,每個文檔通過一個有多個階段(stage)組成的管道可以對每個階段的管道進行分組、過濾等功能,然後經過一系列 ...
  • 1. 業務說:“…… bulabula……,這個需求很簡單,怎麼實現我不管?” 面對霸氣側漏的業務需求,由於沒有大數據知識儲備,咱心裡沒底,咱也不敢問,咱也不敢說,只能靜下來默默儲備、默默尋覓解決方案。 關註“一猿小講”公眾號的小伙伴們,今天有福啦,因為今天我們將一起跳出系統之外,共同邁入大數據之 ...
  • 環境 MySQL5.6 表結構及數據 sql DROP TABLE IF EXISTS ; CREATE TABLE ( int(11) NOT NULL AUTO_INCREMENT, varchar(20) NOT NULL, varchar(20) NOT NULL, double(10, 3 ...
  • SQL語句還是多去用才能掌握,再多理論,白搭 SQL概述 SQL的產生與發展 SQL的特點 SQL功能十分強大,針對數據的操作,核心功能只用9個動詞就可以完成。而且其語句有點類似英語口語一看基本就能明白它要表達的意思。 SQL語言對資料庫三級模式的支持 SQL語言作為大多數資料庫使用的共同數據存取語 ...
  • 導讀 在開發中一定會用到統計一張表的行數,比如一個交易系統,老闆會讓你每天生成一個報表,這些統計信息少不了 sql 中的count函數。 但是隨著記錄越來越多,查詢的速度會越來越慢,為什麼會這樣呢?Mysql內部到底是怎麼處理的? 今天這篇文章將從Mysql內部對於count函數是怎樣處理的? 本文 ...
  • 事情的起因呢,是因為朋友問我的。幾經周折,自己粗心大意了很多細節,不廢話,直接開始 一、redis的安裝我就略過了, 二、修改redis的配置文件 redis.conf 1. bind 設置為 0.0.0.0 2. protected-mode 設置為no (也就是關閉保護模式) 3. daemon ...
  • 一、ListView 該組件是android中最常用的一個UI組件,用於實現在屏幕上顯示​多個內容,以便於我們用手指來回翻轉。 先在layout中進行佈局我們的組件 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/and ...
一周排行
    -Advertisement-
    Play Games
  • 1. 說明 /* Performs operations on System.String instances that contain file or directory path information. These operations are performed in a cross-pla ...
  • 視頻地址:【WebApi+Vue3從0到1搭建《許可權管理系統》系列視頻:搭建JWT系統鑒權-嗶哩嗶哩】 https://b23.tv/R6cOcDO qq群:801913255 一、在appsettings.json中設置鑒權屬性 /*jwt鑒權*/ "JwtSetting": { "Issuer" ...
  • 引言 集成測試可在包含應用支持基礎結構(如資料庫、文件系統和網路)的級別上確保應用組件功能正常。 ASP.NET Core 通過將單元測試框架與測試 Web 主機和記憶體中測試伺服器結合使用來支持集成測試。 簡介 集成測試與單元測試相比,能夠在更廣泛的級別上評估應用的組件,確認多個組件一起工作以生成預 ...
  • 在.NET Emit編程中,我們探討了運算操作指令的重要性和應用。這些指令包括各種數學運算、位操作和比較操作,能夠在動態生成的代碼中實現對數據的處理和操作。通過這些指令,開發人員可以靈活地進行算術運算、邏輯運算和比較操作,從而實現各種複雜的演算法和邏輯......本篇之後,將進入第七部分:實戰項目 ...
  • 前言 多表頭表格是一個常見的業務需求,然而WPF中卻沒有預設實現這個功能,得益於WPF強大的控制項模板設計,我們可以通過修改控制項模板的方式自己實現它。 一、需求分析 下圖為一個典型的統計表格,統計1-12月的數據。 此時我們有一個需求,需要將月份按季度劃分,以便能夠直觀地看到季度統計數據,以下為該需求 ...
  • 如何將 ASP.NET Core MVC 項目的視圖分離到另一個項目 在當下這個年代 SPA 已是主流,人們早已忘記了 MVC 以及 Razor 的故事。但是在某些場景下 SSR 還是有意想不到效果。比如某些靜態頁面,比如追求首屏載入速度的時候。最近在項目中回歸傳統效果還是不錯。 有的時候我們希望將 ...
  • System.AggregateException: 發生一個或多個錯誤。 > Microsoft.WebTools.Shared.Exceptions.WebToolsException: 生成失敗。檢查輸出視窗瞭解更多詳細信息。 內部異常堆棧跟蹤的結尾 > (內部異常 #0) Microsoft ...
  • 引言 在上一章節我們實戰了在Asp.Net Core中的項目實戰,這一章節講解一下如何測試Asp.Net Core的中間件。 TestServer 還記得我們在集成測試中提供的TestServer嗎? TestServer 是由 Microsoft.AspNetCore.TestHost 包提供的。 ...
  • 在發現結果為真的WHEN子句時,CASE表達式的真假值判斷會終止,剩餘的WHEN子句會被忽略: CASE WHEN col_1 IN ('a', 'b') THEN '第一' WHEN col_1 IN ('a') THEN '第二' ELSE '其他' END 註意: 統一各分支返回的數據類型. ...
  • 在C#編程世界中,語法的精妙之處往往體現在那些看似微小卻極具影響力的符號與結構之中。其中,“_ =” 這一組合突然出現還真不知道什麼意思。本文將深入剖析“_ =” 的含義、工作原理及其在實際編程中的廣泛應用,揭示其作為C#語法奇兵的重要角色。 一、下劃線 _:神秘的棄元符號 下劃線 _ 在C#中並非 ...