《Flutter 動畫系列一》25種動畫組件超全總結

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

動畫運行的原理 任何程式的動畫原理都是一樣的，即：視覺暫留，視覺暫留又叫視覺暫停，人眼在觀察景物時，光信號傳入大腦神經，需經過一段短暫的時間，光的作用結束後，視覺形象並不立即消失，這種殘留的視覺稱“後像”，視覺的這一現象則被稱為“視覺暫留”。 電影就是依靠視覺暫留，在感官上電影是連續的。使動畫有流暢 ...


動畫運行的原理

任何程式的動畫原理都是一樣的，即：視覺暫留，視覺暫留又叫視覺暫停，人眼在觀察景物時，光信號傳入大腦神經，需經過一段短暫的時間，光的作用結束後，視覺形象並不立即消失，這種殘留的視覺稱“後像”，視覺的這一現象則被稱為“視覺暫留”。

電影就是依靠視覺暫留，在感官上電影是連續的。使動畫有流暢的感覺，幀率至少要達到24幀，即：每秒播放24個圖像，因此動畫有一個非常關鍵的性能參數FPS（Frame Per Second），即幀率，達到24fps，畫面就比較流暢了，Flutter的FPS理論上可以達到60fps，超過48fps，將會感到絲滑般的順暢。

Flutter動畫系統

為了方便開發者進行動畫的開發，Flutter將動畫系統進行封裝，抽象出4個概念：Animation、Curve、AnimationController、Tween。

  • Animation：Flutter動畫中的核心類，此類是抽象類，通常情況下使用其子類：AnimationController，可以獲取當前動畫的狀態和值，也可以添加其狀態變化監聽和值變化監聽。
  • Curve：決定動畫執行的曲線，和Android中的Interpolator（差值器）是一樣的，負責控制動畫變化的速率，系統已經封裝了10多種動畫曲線，詳見Curves類。
  • AnimationController：動畫控制器，控制動畫的開始、停止。繼承自Animation。
  • Tween：映射生成不同範圍的值，AnimationController的動畫值是double類型的，如果需要顏色的變化，Tween可以完成此工作。

將Container控制項的大小由100變為300，代碼如下：

class AnimationDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _AnimationDemo();
}

class _AnimationDemo extends State<AnimationDemo>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;

  @override
  void initState() {
    _animationController = AnimationController(
        duration: Duration(seconds: 2),
        lowerBound: 100.0,
        upperBound: 300.0,
        vsync: this);

    _animationController.addListener(() {
      setState(() {});
    });

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: <Widget>[
          RaisedButton(
            child: Text('開始動畫'),
            onPressed: () {
              _animationController.forward();
            },
          ),
          Expanded(
            child: Center(
              child: Container(
                width: _animationController.value,
                height: _animationController.value,
                color: Colors.red,
              ),
            ),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }
}

AnimationController的初始化中vsync，這個參數要說明白能說一天，我們只需先記住其寫法，this表示SingleTickerProviderStateMixin，屏幕每一幀都會引起AnimationController值的變化。

dispose方法中要記住釋放AnimationController。

UI的更新是通過setState更新的，

_animationController.addListener(() {
  setState(() {});
});

效果如下：

預設情況下，動畫曲線為線性，修改動畫曲線如下：

class _AnimationDemo extends State<AnimationDemo>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation _animation;
  @override
  void initState() {
    _animationController = AnimationController(
        duration: Duration(seconds: 2),
        vsync: this);

    _animationController.addListener(() {
      setState(() {});
    });

    _animation = CurvedAnimation(parent: _animationController,curve: Curves.easeIn);
    _animation = Tween(begin: 100.0,end: 300.0).animate(_animation);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: <Widget>[
          RaisedButton(
            child: Text('開始動畫'),
            onPressed: () {
              _animationController.forward();
            },
          ),
          Expanded(
            child: Center(
              child: Container(
                width: _animation.value,
                height: _animation.value,
                color: Colors.red,
              ),
            ),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }
}

修改的地方說明如下：

  • AnimationController中lowerBound和upperBound不能在直接設置為100和300，因為AnimationController需要被CurvedAnimation使用，值的範圍必須是0-1。
  • 由於AnimationController值的範圍是0-1，而動畫需要在100-300變化，所以引入Tween。

如果動畫是顏色的變化，修改如下：

_animation = ColorTween(begin: Colors.red,end: Colors.blue).animate(_animation);

對動畫狀態監聽：

_animationController.addStatusListener((status) {
if (status == AnimationStatus.completed) {
//執行結束反向執行
  _animationController.reverse();
} else if (status == AnimationStatus.dismissed) {
//反向執行結束正向執行
  _animationController.forward();
}
});

動畫狀態：

  • dismissed：動畫結束，停在開始處。
  • forward：動畫正向進行。
  • reverse：動畫反向進行。
  • completed：動畫結束，停在末尾處。

上面就是動畫的基本用法，有沒有發現一些通用的地方：

  • 每次刷新UI都需要調用setState。

“懶”是原罪，也是社會進步的最大動力。

Flutter封裝了AnimatedWidget，此控制項就封裝了setState。雖然Flutter為封裝了大量的動畫控制項，但萬變不離其宗。

Flutter 25種動畫組件介紹

Flutter中提供了大量的動畫組件及詳細用法：

其實動畫不僅僅是這些控制項屬性變化，還有使用Paint自繪製的動畫。

看到這麼多組件是不是暈了，我也沒想到會有這麼多組件，那我們改如何選擇適合的組件？這真是一個靈魂拷問啊。

這是《Flutter 動畫系列》的第一篇，接下來還有：

  • 組合動畫
  • 自定義動畫
  • 到底如何選擇動畫控制項

交流

如果你對Flutter還有疑問或者技術方面的疑惑，歡迎加入Flutter交流群（微信：laomengit）。

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

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


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

-Advertisement-
Play Games
更多相關文章
  • 常用SQL Server進行性能優化語句
    1、鎖監控 查看鎖住的表： select request_session_id spid,OBJECT_NAME(resource_associated_entity_id) tableName from sys.dm_tran_locks where resource_type='OBJECT' ...
  • MySQL 支持的存儲引擎
    參考資料：C語言中文網 存儲引擎： 資料庫存儲引擎是資料庫底層軟體組件，資料庫管理系統使用數據引擎進行創建、查詢、更新和刪除數據操作。 不同的存儲引擎提供不同的存儲機制、索引技巧、鎖定水平等功能，使用不同的存儲引擎還可以獲得特定的功能。 註：InnoDB 事務型資料庫的首選引擎，支持事務安全表（AC ...
  • Mysql實戰45講學習詳情----一條SQL查詢語句是如何執行的？
    大體來說，MySQL 可以分為 Server 層和存儲引擎層兩部分。 select * from T where ID=10； 這條查詢語句的執行過程： 外部層： 用戶與server層交互的媒介 一.客戶端【用於連接資料庫，輸入命令/語句】 界面化連接資料庫 輸入 select * from T w ...
  • MySQL事務介紹
    什麼是事務 事務的概念 從業務層面上來說，事務就是一個最小的不可分割的單元，通常一個事務對應的是一個完整的業務（比如銀行的轉賬操作）。 為什麼要有事務 仍以銀行轉賬為例加以說明，比如我要從賬號A轉賬100元到賬號B，現在資料庫有一張表account，那麼就意味著需要同時執行兩條SQL語句的更新： 以 ...
  • Mysql性能優化：如何給字元串加索引？
    導讀 現代大部分的登錄系統都支持郵箱、手機號碼登錄兩種方式，那麼如何在郵箱或者手機號碼這個字元串上建立索引才能保證性能最佳呢？ 今天這篇文章就來探討一下在Mysql中如何給一個字元串加索引才能達到性能最佳。 本文首發於作者的微信公眾號【碼猿技術專欄】，原創不易，喜歡的朋友支持一下，謝謝！！！ 陳某將 ...
  • Mongodb學習總結
    2020/4/2 Mongodb使用的是類似與json字元串的形式存儲數據 [ { key:value }, { key:value }, ] Mongodb使用了不存在的對象，即創建該對象 use db 使用db資料庫 show dbs 查看當前伺服器中寫在磁碟上的資料庫 show tables ...
  • [20200401]優化的困惑5.txt
    [20200401]優化的困惑5.txt--//春節前對一個生產系統做優化，完成後使用ash_wait_chains.sql檢查，發現control file parallel write有點多。--//當時並沒有在意，總感覺哪裡不對，感覺這套系統磁碟IO有問題，現在有空分析看看。1.環境：> @ ...
  • Flutter Weekly Issue 49
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 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 ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類