前沿速遞 | IMWebConf2018 視覺化專場 @Shenzhen
ofollow,noindex">IMWebConf2018 是由騰訊 IMWeb 團隊主辦的國內頂級前端技術領域開發者大會，自舉辦以來，已有數千名前端相關技術人員現場參與 IMWeb Conf。大會曾邀請來自 W3C 標準制定的權威，來自 Google、微軟、騰訊等知名網際網路企業的技術專家，以及著名開源框架、庫的作者，作為演講嘉賓分享前端各領域前沿技術標準及實踐。
本文將分享 Kay 今天（2018年10月14日）參加的 視覺化與動畫分會場 中，分別來自 Adobe、阿里 AntV 和百度 ECharts 的三位重量級嘉賓的精彩演講的摘要（由於時間所限，只記錄了筆者比較感興趣的部分）。會後如果主辦方公開嘉賓的 PPT 或演講視訊，筆者會將連結更新到文後的 Resource 部分，供大家瞭解更完整的內容。
注：如有不準確的地方，歡迎指正，謝謝。
演講一：談談使用者介面動畫
演講者：張文婷 @Adobe 資深設計師
動畫實現方式
1. CSS 動畫
2. SVG/SMIL 動畫 （有別於用 CSS 來控制 SVG）—— 最被低估，即將被 CSS 語法替代（但部分動畫如 morph 目前只有 SMIL 能實現）
- 封裝了樣式，動畫甚至互動（例如點選後才執行的動畫）
- 比 gif 多了互動，同樣可以自執行
- 不足：每個動畫都是獨立的，缺乏內在邏輯
3. Javascript 動畫 —— 最強大
- GreenSock GSAP
- 通過屬性對（位置，透明度等）配置
- Timeline 功能（在動畫間存在先後出現邏輯時，提升開發效率）
- Lottie/bodymovin
- 設計師用 AE 做動畫，匯出 data.json，通過 bodymovin 匯入可以直接當代碼用。大大降低設計師和程式員之間的溝通成本
- 可選擇渲染器：SVG/Canvas
4. 黑科技：帶有動畫軸的 icon font
- 存於 woff2 格式檔案；基於可變字型（Variable fonts），相容除 IE 以外的主流瀏覽器（包括移動端）
- 動畫封裝在字型檔案裡，程式碼簡潔，可以作為前端框架或設計語言的一部分
- 使用：在 CSS 中配置 font-variation-settings 和 transformation，幾行程式碼就可以實現例如 menu 按鈕的點選動畫等複雜形變（如 CSS 不支援的 Morph 形變）
- 可實現幀動畫，可定義很多不同的軸
- 個人專案即將開源，加入 Google Font 開源字型
- 相關答疑：目前這種帶動畫的 icon 字型有一定的設計門檻，設計師需要具備字型設計的知識；設計工具的操作方式類似 After Effect
演講二：AntV 讓資料栩栩如生
演講者：樑文森（絕雲） @阿里 AntV G2負責人
視覺化進入深水區
1. 更多圖表型別的需求
- 韋恩圖, 分面對向條形圖等等
2. 更多互動需求
3. 前端資料分析和處理需求
- 資料量較小時把資料處理放到前端，減少資料庫訪問次數；
- 開發前端 OLAP 引擎（支援十萬/幾十萬行以內資料）實現前端資料的切片，上鑽，下取
- 案例：2D 畫布超大規模圖（十億級別資料）
G2 開源一年
- 完備圖形語法（非常適合用於 BI 場景對同一份資料的不同緯度的視覺化）
- 更多圖表型別
- 增強圖表元件（更多自定義樣式）
- 可以翻頁的 legend
- 更可定製的 tooltip
- 擴充套件資料處理能力（dataset 模組）
- 高互動
- 刷選等200種底層事件
- 互動語法的嘗試
- Storytelling（泰坦尼克號資料案例）
- 視覺化輔助工具實踐（Webpack 打包分析）
- 優化實踐
AntV 優化實踐
- 繪圖層效能（雙引擎 canvas / svg；畫布越大 Canvas 效能越差）
- 演算法
- 圖表層一
- 圖表層二
- 方案層
AntV 開源程序
- F2 針對移動端，IoT場景（H5）
- G6 關係圖（名字來源於六度空間關係）圖編輯，腦圖
- L7 地圖 11月22日開源
演講三：大資料視覺化效能優化
演講者：宿爽（爽爺）@百度 ECharts
減省計算
- 取樣 （圖形呈現順序與資料順序：折線圖）
- 圖形的簡化 （K線圖在縮小後可以簡化為線）
- 合併路徑 （減少抽象引起效能的損耗，例如在樣式可以一致的時候可以先統一設定樣式，逐一繪製）
並行化
- 力引導佈局
- 非 GPU：演算法 + Web Worker 等優化
- GPU：用 shader 計算，寫在紋理裡面；效能提升效果顯著（缺點是相容性不足，程式設計繁瑣）
2. 漸進計算和渲染（Progressive）
- Chrome：不阻塞系統（不卡）的速度要達到：每幀的執行時間 16ms 以下，或至少50ms 以下
- 分片作業 & 流（EChart 3 至 4 的主要優化），主要應用到縮放場景
- 分片的實現：取模優於取樣（速度快，且視覺上閃現更少）
- 增量載入（分塊）/ 增量渲染（流）
3. Web Worker （仍在嘗試階段）
- 用另一個執行緒計算佈局，完成後再通知主 UI 執行緒
程式設計實現的雕琢
（工程方面；通用性一般，不得不做時才做）
- 熱點程式碼和路徑
- 記憶體的使用
- GC（垃圾管理）的影響 -> 極致效能
- 適時釋放
- 重用物件？（而非經常建立大物件；僅為一個思路，未測試驗證其有效性）
- 使用 Typed Array（用於記憶體效能敏感的場景，控制使用的記憶體；但管理比較麻煩）
圓桌討論
Q：對於在視覺化中加入動畫效果的看法？ECharts 和 AntV 有沒有計劃開發和提供開箱即用的動畫功能？
A（經筆者整理自三位講師的回答）：
1. 是否引入動畫的考量依據：動畫是否攜帶/傳達了資訊
- 動畫本身往往是會妨礙使用者對視覺化的理解認知的，因此不建議加不攜帶任何資訊（即非功能性）的動畫（例如，在柱狀圖載入資料時，從x軸升起的動畫）
- 但並非所有載入資料的動畫都是無意義的，例如折線圖的實時資料載入，折線從右往左移動的動畫體現的資料的時序變化
2. 推薦使用：具備功能性的動畫
- transition 轉場動畫：用於銜接資料的變化，幫助使用者理解資料從哪裡移動到哪裡，可以蘊含數值上升/下降趨勢等資訊；同時視覺上更流暢，提升使用者體驗
- 用動畫展現某一維度的資料（通常是時間緯度）：實際用到的也是 transition 動畫，屬於常見的具體場景，典型案例是 Hans Rosling 的氣泡圖動畫系列。
- 用於突出強調的動畫：通過動畫吸引使用者的注意力，從而突出某部分資料的展示
3. 圖表庫對動畫功能的支援和規劃
- AntV G2：目前支援比較基礎，採用 D3 的動畫實現，即支援且僅支援 D3 提供的動畫。未提及後續計劃。
- ECharts：目前對功能性的動畫（主要為轉場動畫）支援較好，但對自定義動畫支援還比較少。下一個版本有計劃增強定製動畫的功能，預計將一定程度上實現開箱即用的動畫。
Resources
1. Lottie 動畫樣例：https://www.lottiefiles.com
2. 視覺化私房菜（AntV 團隊部落格）：https://www.yuque.com/antv/blog
3. https://observer.com/tag/data-visualization/