《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中lowerBoundupperBound不能在直接設置為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
更多相關文章
  • 1、鎖監控 查看鎖住的表: select request_session_id spid,OBJECT_NAME(resource_associated_entity_id) tableName from sys.dm_tran_locks where resource_type='OBJECT' ...
  • 參考資料:C語言中文網 存儲引擎: 資料庫存儲引擎是資料庫底層軟體組件,資料庫管理系統使用數據引擎進行創建、查詢、更新和刪除數據操作。 不同的存儲引擎提供不同的存儲機制、索引技巧、鎖定水平等功能,使用不同的存儲引擎還可以獲得特定的功能。 註:InnoDB 事務型資料庫的首選引擎,支持事務安全表(AC ...
  • 大體來說,MySQL 可以分為 Server 層和存儲引擎層兩部分。 select * from T where ID=10; 這條查詢語句的執行過程: 外部層: 用戶與server層交互的媒介 一.客戶端【用於連接資料庫,輸入命令/語句】 界面化連接資料庫 輸入 select * from T w ...
  • 什麼是事務 事務的概念 從業務層面上來說,事務就是一個最小的不可分割的單元,通常一個事務對應的是一個完整的業務(比如銀行的轉賬操作)。 為什麼要有事務 仍以銀行轉賬為例加以說明,比如我要從賬號A轉賬100元到賬號B,現在資料庫有一張表account,那麼就意味著需要同時執行兩條SQL語句的更新: 以 ...
  • 導讀 現代大部分的登錄系統都支持郵箱、手機號碼登錄兩種方式,那麼如何在郵箱或者手機號碼這個字元串上建立索引才能保證性能最佳呢? 今天這篇文章就來探討一下在Mysql中如何給一個字元串加索引才能達到性能最佳。 本文首發於作者的微信公眾號【碼猿技術專欄】,原創不易,喜歡的朋友支持一下,謝謝!!! 陳某將 ...
  • 2020/4/2 Mongodb使用的是類似與json字元串的形式存儲數據 [ { key:value }, { key:value }, ] Mongodb使用了不存在的對象,即創建該對象 use db 使用db資料庫 show dbs 查看當前伺服器中寫在磁碟上的資料庫 show tables ...
  • [20200401]優化的困惑5.txt--//春節前對一個生產系統做優化,完成後使用ash_wait_chains.sql檢查,發現control file parallel write有點多。--//當時並沒有在意,總感覺哪裡不對,感覺這套系統磁碟IO有問題,現在有空分析看看。1.環境:> @ ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...