F2 3.1 發布，開箱即用的移動端可視化解決方案

F2，源於 Fast & Flexible 兩個單詞首字母，是 AntV 家族中專為移動端定製、開箱即用的可視化解決方案。

過往

或許大家對我比較陌生，但是從 AntV 上線的那一天起我就已經出道了，那時候我有另外一個名字『G2-mobile』，我和 G2 師承一脈，盡得『圖形語法』真傳，主要用於滿足對代碼體積以及渲染性能要求嚴苛的移動端圖表需求。

然而本以精簡、高性能、高擴展為傲的我，仍然敵不過這個顏值即正義的時代。移動端的可視化圖表重於表達，更追求鮮活生動，要滿足這個需求，對於我的早期使用者們可以說是『開局一把刀，裝備全靠自己造』......由於缺少完整的移動端設計體系和功能支持，多數設計師的創意都只能被閹割，我也只能默默的背上重重的大鍋。

現在回想起來當初可謂是初生牛犢不怕虎，全靠一生硬氣支撐移動端各種圖表需求...

如今需求江湖變幻莫測，我越來越覺得單憑一己之力很難繼續笑傲江湖，於是我訪尋各大業務方，協同共創提升可視化體驗的同時，沉澱精華，並潛心研究移動端可視化圖表的設計心法，期望融會貫通，造福各類幫派移動產品。

F2 3.1，煥然一新

哐～～～ 晴天一聲巨響，經過將近九九八十一天潛心修鍊，現在我正式以『F2』為名向大家自薦，我將以 Fast & Flexible 為行事準則，力求將自己打造成一套『開箱即用的移動端可視化解決方案』。

全新的 2D 繪圖引擎

F2 3.1 版本之前底層直接採用原生 Canvas 繪製，雖然在性能上佔據優勢，但是過於底層，api 粗糙，加上即時繪製無狀態無對象特性，使得它內部的圖形不支持動畫更不支持任何交互事件。於是在 3.1 版本我們引入了全新的繪圖引擎，它具備：

* 層次化結構

* 支持容器、各種圖形的創建、修改和銷毀

* 動畫

* 矩陣變換

在保證性能的同時也為打開了可交互的大門，開發同學們也可以更容易得創建 shape，有了它，你可以這樣，這樣，這樣！

更多內容詳見：G 繪圖介面。

插件機制，更好擴展圖表功能

如何在增強圖表功能的同時，不帶來過大的體積變化，同時提供給用戶選擇和擴展的能力？插件機制！

在 3.1 版本中 F2 引入了插件機制，用於擴展圖表的功能，該機制可以幫助用戶在圖表創建的各個階段定製或更改圖表的默認行為，下面提到的 legend、guide、tooltip 以及動畫（群組以及精細動畫兩個版本）都是基於插件機制實現。

更多內容詳見：Plugin 插件。

更靈活的按需引入機制

F2 應用於移動端，對代碼的體量大小非常重視，F2 提供按需引入機制，滿足用戶只載入需要的功能代碼，以減少多餘的引入。相對於 F2 3.0，3.1 版本的按需引入機制更細粒度，將坐標系類型、坐標軸類型、guide 類型也進行了拆分，同時移除了之前對於引入順序的依賴，更加靈活。

以下是 F2 同 d3、chart.js、Highcharts、echarts、g2 的體積大小對比圖：

更多內容詳見：按需引用。

完整的移動端設計體系支撐

在 G2 開發過程中，我們初步擁有了體系化的 AntV 設計原則，而隨著移動端用戶需求研究深入、越來越豐富的應用場景積累， 我們為這個體系升級擴充了一套適合移動端的設計方法體系，並以此為指引重構了整個 F2 的可視化組件（詳情可見下文關於組件、動畫、和樣式的介紹）。

有態度的圖表功能組件

親愛的們，現在可以把之前為實現 tooltip、legend 辛苦寫的代碼全部刪除了！新版 F2 3.1 為大家帶來了全新的基於插件機制的 Tooltip、Legend、Guide 圖表功能組件：

為何稱之為有態度？因為我們發現對於移動端界面小，內容組織以及排版多採用縱向布局的特點，傳統的 tooltip 交互方式以及圖例排布並不適用於移動端，以 tooltip 為例，如果還按照 PC 端的方式就會出現 tooltip 被滑動的拇指遮擋的問題。

雖然可以在技術上將這個問題規避，但是為什麼不直接從設計和行為交互上進行改進？於是我們總結沉澱出了如下適用於移動端的交互方式，同時技術上還提供了靈活的配置和自定義機制：

更多內容詳見：Legend 圖例、Tooltip 提示信息、Guide 輔助元素。

生動的動畫

生動、有節奏的動畫對於圖表而言，可以起到重要的視覺引導作用，和提升趣味性。

全新的 F2 3.1 版本中，提供了兩種類型的動畫：

1. 整體動畫，即圖表入場動畫，適用於圖表僅載入一次，之後不再會發生數據變更的情況。

2. 精細動畫，包含入場、更新以及離場動畫，同時還提供了自定義動畫機制，適用於圖表數據會發生更新並且對動畫要求更高的場景。

因為動畫也基於插件機制實現，所以用戶可以根據自身需要決定具體引入哪種類型的動畫。

更多內容詳見：Animation 動畫。

感謝

從 3.0 到 3.1，F2 可以說是經歷了一次蛻變，非常感謝這期間與我們協同共創，鼎力支持的各產品、兄弟團隊(排名不分先後)：

通往『開箱即用的』移動端『可視化解決方案』還有很長的路，這只是剛剛邁出去的第一步，但方向對了，就不怕路遠，期待未來與你一路同行，如果親愛的你對 F2 有任何意見、想法或者興趣，非常期待您能於我們聯繫，更歡迎投遞簡歷： antv@antfin.com，we are waiting for you!

最後

看到這裡，想必您肯定對我產生興趣了，下面為您呈上一些資料：

* 可以跟著官網的《使用教程》文檔一步步熟悉 F2

* 如果需要升級，請閱讀《升級說明》

* 歡迎賞閱我精心準備的 Demo，手機掃碼觀看體驗更佳哦！~

https://antv.alipay.com/zh-cn/f2/3.x/demo/mobile-index.html (二維碼自動識別)

其他聯繫方式：

* AntV: https://antv.alipay.com

* Github: https://github.com/antvis/f2

* 知乎專欄：https://zhuanlan.zhihu.com/aiux-antv

* 釘釘服務群（歡迎掃碼加入）

http://qr.dingtalk.com/action/joingroup?code=v1,k1,F5BfAfNRikFmhDVCrPohzQ9b4sDrqnIjbSEyV1dokZA= (二維碼自動識別)

推薦閱讀：