《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
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...