來看一組炫酷的動畫圖表：

這樣的效果拿去演講、報告、放在門戶主頁上豈不是非常吸睛？

製作起來一定很難吧？

NO！很簡單：一行程式碼也不用寫！

只需在下面這個圖形介面中，匯入一個你做好的圖表的 SVG 檔案，然後通過滑鼠拖動圖表單元，設定出場一下時間和動畫效果就可以了。

資料和動畫始終保持一致，也無需你計算實現動畫背後的各種複雜機制，速度、形式、緩動函式等引數都已幫你安排好：

而如此快捷地實現動態圖表的背後，更厲害的是還有一門針對視覺化動畫的宣告式語言 ——Canis。

它不依賴任何第三方庫，由圖形學大牛北京大學陳寶權教授的弟子 —— 葛彤等人提出；葛彤剛剛在山東大學成功博士答辯，合作導師是汪雲海教授。

也是第一門為構建視覺化動畫提供全面支援的領域特定語言（DSL）。

陳教授也讚揚葛彤以一己之力開發了這樣一個多層級系統。

除了上面所說的特點，該平臺支援的圖表形式也非常豐富：只要你能做出來的都可以在這裡實現動畫效果。

而且除了可以匯出 mp4 檔案應用到日常場景，如果你是開發人員 —— 那就太好了，量身定做：

它可以匯出 Lottie 動畫的 JSON 格式，幫你輕鬆實現跨 iOS、Android、Web 等平臺使用。

第一門視覺化動畫構建語言

拜在圖形學大牛門下，葛彤的研究方向為資料視覺化，這種技術可以大大提升資訊傳遞的效率。

但他發現市面上製作相關動畫的工具都不夠便利。

比如有些類庫（比如 D3）需要使用者手動計算動畫中的各個時間節點並通過調整底層的視覺通道狀態來實現動畫效果；

再比如 Matplotlib、Pandas 這種大家很熟悉的工具，雖然很強大但更是需要你一行一行地寫程式碼才能製作效果。

這些都對不會程式設計的使用者非常不友好。

而建立動畫的專業工具（比如 AE）在製作動畫圖表時，雖然不需要程式設計了，但操作過程也很繁瑣：需要逐幀製作，而且動畫與資料是脫離的，根本沒法保證結果一致性。

那就利用所學自己搞一個數據驅動的視覺化動畫圖表創作工具吧。

一開始，葛彤準備直接做一個去程式設計化的創作平臺。

但他在前期的探索和嘗試中發現，這樣一個複雜系統的內部需要有一個嚴謹且支援描述各類圖表多樣的動畫形式的規則，以及相應的編譯和渲染機制。

於是他們從廣義的動畫理開始研究，之後結合視覺化的特點以及視覺化動畫在應用過程中的一些規律、特殊結構特點，並探索在語法中如何能夠合理地編碼和反映這些特點。

最終設計出來了這門 DSL 語言 Canis（其含義是 Chart Animations，固縮寫為 Canis，也是大犬星座的名稱，方便記憶）。

葛彤介紹道，這也是整個工程中最困難的一步，前人也沒有相關研究。

最終他們提出的 Canis 擁有一套完整的包括宣告式語法規範（就像 JSON 格式一樣）、資料驅動的動畫宣告方式以及編譯機制在內的體系，不依賴任何第三方庫。

他們的第一個成果是直接通過 Canis 程式設計來實現動畫的線上平臺：

該平臺藉助資料對圖元（比如一個條形圖中每一個條形就是一個圖元）進行管理、定義動畫時序結構和動畫效果。

從而實現對視覺化動畫中資料、視覺編碼、時序三者關係的建立，保證動畫與資料的一致性。

我們最開始需要匯入的圖表（一張多張都可），格式為 SVG 的變體 dSVG（可以通過 Canis 的前處理器直接生成）。

它會在檔案中各圖元所對應的標籤分別新增三個額外屬性：“id”、“class”和“datum”。

其中“id”與“class”為圖元提供索引並描述圖元型別（例如矩形、圓形、自由路徑等）；

而“datum”則包含了該圖元所對應的源資料內容（下圖最左）。

通過它們，Canis 就能自動建立好圖元之間的聯絡，之後我們就可以定義圖元的動畫效果了。

由於 Canis 解耦了編碼與實現邏輯，使用者只需要定義做什麼，而不需要定義如何做。

你只需要填好“選擇（selector）”、“劃分 (grouping)”、“時序效果 (timing)”、“過渡效果（type）”等的“引數”就好了（具體語法可參見 Canis 線上平臺的文件）。

比如在下面這個氣泡圖中，通過將“type”設定為“fade”就能實現氣泡以淡出的方式進行資料狀態切換。

如果你覺得這樣有點生硬 —— 只需把“fade”改成“magic move”就好了。

Canis 編譯器此時會在狀態間進行插值，實現平滑的 morphing 變換，不需要你設定別的引數。

再比如通過改變 grouping 所依據的資料屬性，就能快捷地改變動畫時序把下表中的劃分依據從按型別（Type）變成按時間 (Month)。

說到 Canis 編譯器，它採用 JavaScript 編寫而成，為支援高效的跨平臺渲染和應用，會經過以下五個步驟將程式碼編譯為 Lottie 編碼：

編譯過程中又會以資料表的形式儲存和維護編譯中間變數，就像這樣：

新增自動補全演算法的更友好介面

雖然 Canis 的語法簡單，但一個真正使用者友好的平臺還是儘量避免直接進行程式碼控制，於是他們的第二個成果就出來了：

基於 Canis 做了一個不需要編碼的圖形介面，就是文章開頭看到的那個，葛彤將其命名為 CAST（Canis Studio）。

CAST 採用了直觀描述動畫過程的視覺規範，對 Canis 編譯器進行了優化，提供了增量式編譯的支援，以提高互動渲染效率。

使用者在介面中的互動行為會被翻譯為相應的動畫調整指令，用以生成和更新系統內部所維護的 Canis 物件，而 Canis 物件的更新又會實時的在介面中反饋給使用者。

除了增量編譯，CAST 還增加了資料驅動的自動補全演算法，以幫助使用者更快捷地完成動畫製作。

主要包括兩方面內容：

一是關鍵幀的自動補全。

這主要是為了解決在構建關鍵幀的過程中，一些過小或與其他重疊的圖元導致選擇過程十分困難且錯誤率較高的問題。

CAST 的做法是在使用者選擇少量圖元之後，根據視覺通道的感知有效性，對已選和未選圖元所對應的資料屬性編碼的視覺通道進行對比。

之後根據編碼感知有效性最高的通道的資料屬性（如相比使用顏色，用位置資訊所編碼的資料屬性更容易被人發現和觀察），對未選圖元進行分組和篩選並反饋給使用者，如下所示。

二是動畫序列推薦補全。

在使用者完成少量關鍵幀的構建後（如完成第一幀後），CAST 依舊是會依據視覺通道的感知有效性原則，根據使用者已經建立的關鍵幀中的圖元，對全部的圖元進行分組以建立後序的關鍵幀。

並依據資料屬性各種可能的排列組合順序生成可能的關鍵幀序列。

之後對比序列內容找到關鍵幀差異位點，反饋給使用者進行選擇，以確認終端使用者所預期的動畫序列。

在上面這個示意圖中，預期動畫為顏色相同的點簇按照先行後列的方式進行動畫。

使用者在建立完第一個關鍵幀之後，僅需通過兩次關鍵幀的選擇（第二幀和第三幀）系統便可確定唯一的動畫序列進行自動補全。

至此，第一個專門為視覺化動畫而研究和設計的系統就暫時完成了。

在被問及到未來還會對 Canis/Canis 做什麼更新或改進時，葛博士表示，可以新增 gif 匯出功能，來進一步提升實用性。

另外，對於 Canis 而言，考慮將其擴充套件為一個通用性更強的外掛庫，使其能夠嵌入任何常見的視覺化創作語言中，完成視覺化與動畫的創作過程的融合；

對於 CAST 則是考慮通過嵌入預處理模組，將其與圖形化的視覺化構建工具進行對接或融合以達到相同的目的。

作者介紹

葛彤，即將從山東大學博士畢業，為 Canis&CAST 這兩篇論文的一作；

導師為陳寶權（北京大學教授，前沿計算研究中心執行主任，IEEE Fellow）和汪雲海（山東大學計算機學院教授）。

之所以選擇資料視覺化作為研究方向，葛博士表示：

一方面是平時比較喜歡去寫一些能夠解決工作或者生活中的實際問題的小程式；另一方面是愛好畫畫和做設計。

在瞭解資料視覺化的過程中，會被那種嚴謹的美感所吸引，同時它又在資料分析的過程中扮演著越來越重要的角色，切實的解決著我們身邊的問題。

而除了他的兩位導師，還有很多研究人員對 Canis&CAST 的完成作出了貢獻：

比如微軟雷德蒙研究院的研究員 Bongshin Lee，她是人機互動和視覺化領域有影響力的專家；

還有山東大學的 Zhao Yue，加州大學聖巴巴拉分校博士畢業的 Ren Donghao 等人。

最後，葛彤表示，Canis/CAST 是一個開源專案，希望有更多的人加入進來，把這個做的越來越完善，在各個領域的應用中產生影響。

線上平臺：

Canishttps://canisjs.github.io/canis-editor/

CASThttps://chartanimation.github.io/cast/#/

論文地址：

Canishttp://www.yunhaiwang.net/EuroVis2020/canis/paper.pdf

CASThttps://tgeconf.github.io/assets/pdf/CHI_2021__CAST_compressed.1a9a51d2.pdf（ACM CHI 2021 最佳論文榮譽提名）