[[423435]]

本文經(jīng)AI新媒體量子位（公眾號(hào)ID:QbitAI）授權(quán)轉(zhuǎn)載，轉(zhuǎn)載請(qǐng)聯(lián)系出處。

來(lái)看一組炫酷的動(dòng)畫圖表：

這樣的效果拿去演講、報(bào)告、放在門戶主頁(yè)上豈不是非常吸睛？

制作起來(lái)一定很難吧？

NO！很簡(jiǎn)單：一行代碼也不用寫！

只需在下面這個(gè)圖形界面中，導(dǎo)入一個(gè)你做好的圖表的SVG文件，然后通過(guò)鼠標(biāo)拖動(dòng)圖表單元，設(shè)定出場(chǎng)一下時(shí)間和動(dòng)畫效果就可以了。

數(shù)據(jù)和動(dòng)畫始終保持一致，也無(wú)需你計(jì)算實(shí)現(xiàn)動(dòng)畫背后的各種復(fù)雜機(jī)制，速度、形式、緩動(dòng)函數(shù)等參數(shù)都已幫你安排好：

而如此快捷地實(shí)現(xiàn)動(dòng)態(tài)圖表的背后，更厲害的是還有一門針對(duì)可視化動(dòng)畫的聲明式語(yǔ)言——Canis。

它不依賴任何第三方庫(kù)，由圖形學(xué)大牛北京大學(xué)陳寶權(quán)教授的弟子——葛彤等人提出；葛彤剛剛在山東大學(xué)成功博士答辯，合作導(dǎo)師是汪云海教授。

也是第一門為構(gòu)建可視化動(dòng)畫提供全面支持的領(lǐng)域特定語(yǔ)言（DSL）。

陳教授也贊揚(yáng)葛彤以一己之力開發(fā)了這樣一個(gè)多層級(jí)系統(tǒng)。

除了上面所說(shuō)的特點(diǎn)，該平臺(tái)支持的圖表形式也非常豐富：只要你能做出來(lái)的都可以在這里實(shí)現(xiàn)動(dòng)畫效果。

而且除了可以導(dǎo)出mp4文件應(yīng)用到日常場(chǎng)景，如果你是開發(fā)人員——那就太好了，量身定做：

它可以導(dǎo)出Lottie動(dòng)畫的JSON格式，幫你輕松實(shí)現(xiàn)跨iOS、Android、Web等平臺(tái)使用。

第一門可視化動(dòng)畫構(gòu)建語(yǔ)言

拜在圖形學(xué)大牛門下，葛彤的研究方向?yàn)閿?shù)據(jù)可視化，這種技術(shù)可以大大提升信息傳遞的效率。

但他發(fā)現(xiàn)市面上制作相關(guān)動(dòng)畫的工具都不夠便利。

比如有些類庫(kù)（比如D3）需要用戶手動(dòng)計(jì)算動(dòng)畫中的各個(gè)時(shí)間節(jié)點(diǎn)并通過(guò)調(diào)整底層的視覺通道狀態(tài)來(lái)實(shí)現(xiàn)動(dòng)畫效果；

再比如Matplotlib、Pandas這種大家很熟悉的工具，雖然很強(qiáng)大但更是需要你一行一行地寫代碼才能制作效果。

這些都對(duì)不會(huì)編程的用戶非常不友好。

而創(chuàng)建動(dòng)畫的專業(yè)工具（比如AE）在制作動(dòng)畫圖表時(shí)，雖然不需要編程了，但操作過(guò)程也很繁瑣：需要逐幀制作，而且動(dòng)畫與數(shù)據(jù)是脫離的，根本沒法保證結(jié)果一致性。

那就利用所學(xué)自己搞一個(gè)數(shù)據(jù)驅(qū)動(dòng)的可視化動(dòng)畫圖表創(chuàng)作工具吧。

一開始，葛彤準(zhǔn)備直接做一個(gè)去編程化的創(chuàng)作平臺(tái)。

但他在前期的探索和嘗試中發(fā)現(xiàn)，這樣一個(gè)復(fù)雜系統(tǒng)的內(nèi)部需要有一個(gè)嚴(yán)謹(jǐn)且支持描述各類圖表多樣的動(dòng)畫形式的規(guī)則，以及相應(yīng)的編譯和渲染機(jī)制。

于是他們從廣義的動(dòng)畫理開始研究，之后結(jié)合可視化的特點(diǎn)以及可視化動(dòng)畫在應(yīng)用過(guò)程中的一些規(guī)律、特殊結(jié)構(gòu)特點(diǎn)，并探索在語(yǔ)法中如何能夠合理地編碼和反映這些特點(diǎn)。

最終設(shè)計(jì)出來(lái)了這門DSL語(yǔ)言Canis（其含義是Chart Animations，固縮寫為Canis，也是大犬星座的名稱，方便記憶）。

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

最終他們提出的Canis擁有一套完整的包括聲明式語(yǔ)法規(guī)范（就像JSON格式一樣）、數(shù)據(jù)驅(qū)動(dòng)的動(dòng)畫聲明方式以及編譯機(jī)制在內(nèi)的體系，不依賴任何第三方庫(kù)。

他們的第一個(gè)成果是直接通過(guò)Canis編程來(lái)實(shí)現(xiàn)動(dòng)畫的在線平臺(tái)：

該平臺(tái)借助數(shù)據(jù)對(duì)圖元 （比如一個(gè)條形圖中每一個(gè)條形就是一個(gè)圖元）進(jìn)行管理、定義動(dòng)畫時(shí)序結(jié)構(gòu)和動(dòng)畫效果。

從而實(shí)現(xiàn)對(duì)可視化動(dòng)畫中數(shù)據(jù)、視覺編碼、時(shí)序三者關(guān)系的建立，保證動(dòng)畫與數(shù)據(jù)的一致性。

我們最開始需要導(dǎo)入的圖表（一張多張都可），格式為SVG的變體dSVG（可以通過(guò)Canis的預(yù)處理器直接生成）。

它會(huì)在文件中各圖元所對(duì)應(yīng)的標(biāo)簽分別添加三個(gè)額外屬性：“id”、“class” 和 “datum”。

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

而 “datum” 則包含了該圖元所對(duì)應(yīng)的源數(shù)據(jù)內(nèi)容（下圖最左）。

通過(guò)它們，Canis就能自動(dòng)建立好圖元之間的聯(lián)系，之后我們就可以定義圖元的動(dòng)畫效果了。

由于Canis解耦了編碼與實(shí)現(xiàn)邏輯，用戶只需要定義做什么，而不需要定義如何做。

你只需要填好“選擇（selector）”、“劃分(grouping)”、“時(shí)序效果(timing)”、“過(guò)渡效果（type）”等的“參數(shù)”就好了（具體語(yǔ)法可參見Canis在線平臺(tái)的文檔）。

比如在下面這個(gè)氣泡圖中，通過(guò)將“type”設(shè)置為“fade”就能實(shí)現(xiàn)氣泡以淡出的方式進(jìn)行數(shù)據(jù)狀態(tài)切換。

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

Canis編譯器此時(shí)會(huì)在狀態(tài)間進(jìn)行插值，實(shí)現(xiàn)平滑的morphing變換，不需要你設(shè)定別的參數(shù)。

再比如通過(guò)改變grouping所依據(jù)的數(shù)據(jù)屬性，就能快捷地改變動(dòng)畫時(shí)序把下表中的劃分依據(jù)從按類型（Type）變成按時(shí)間(Month)。

說(shuō)到Canis編譯器，它采用JavaScript編寫而成，為支持高效的跨平臺(tái)渲染和應(yīng)用，會(huì)經(jīng)過(guò)以下五個(gè)步驟將代碼編譯為L(zhǎng)ottie編碼：

編譯過(guò)程中又會(huì)以數(shù)據(jù)表的形式存儲(chǔ)和維護(hù)編譯中間變量，就像這樣：

添加自動(dòng)補(bǔ)全算法的更友好界面

雖然Canis的語(yǔ)法簡(jiǎn)單，但一個(gè)真正用戶友好的平臺(tái)還是盡量避免直接進(jìn)行代碼控制，于是他們的第二個(gè)成果就出來(lái)了：

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

CAST采用了直觀描述動(dòng)畫過(guò)程的視覺規(guī)范，對(duì)Canis編譯器進(jìn)行了優(yōu)化，提供了增量式編譯的支持，以提高交互渲染效率。

用戶在界面中的交互行為會(huì)被翻譯為相應(yīng)的動(dòng)畫調(diào)整指令，用以生成和更新系統(tǒng)內(nèi)部所維護(hù)的Canis對(duì)象，而Canis對(duì)象的更新又會(huì)實(shí)時(shí)的在界面中反饋給用戶。

除了增量編譯，CAST還增加了數(shù)據(jù)驅(qū)動(dòng)的自動(dòng)補(bǔ)全算法，以幫助用戶更快捷地完成動(dòng)畫制作。

主要包括兩方面內(nèi)容：

一是關(guān)鍵幀的自動(dòng)補(bǔ)全。

這主要是為了解決在構(gòu)建關(guān)鍵幀的過(guò)程中，一些過(guò)小或與其他重疊的圖元導(dǎo)致選擇過(guò)程十分困難且錯(cuò)誤率較高的問題。

CAST的做法是在用戶選擇少量圖元之后，根據(jù)視覺通道的感知有效性，對(duì)已選和未選圖元所對(duì)應(yīng)的數(shù)據(jù)屬性編碼的視覺通道進(jìn)行對(duì)比。

之后根據(jù)編碼感知有效性最高的通道的數(shù)據(jù)屬性（如相比使用顏色，用位置信息所編碼的數(shù)據(jù)屬性更容易被人發(fā)現(xiàn)和觀察），對(duì)未選圖元進(jìn)行分組和篩選并反饋給用戶，如下所示。

二是動(dòng)畫序列推薦補(bǔ)全。

在用戶完成少量關(guān)鍵幀的構(gòu)建后（如完成第一幀后），CAST依舊是會(huì)依據(jù)視覺通道的感知有效性原則，根據(jù)用戶已經(jīng)創(chuàng)建的關(guān)鍵幀中的圖元，對(duì)全部的圖元進(jìn)行分組以創(chuàng)建后序的關(guān)鍵幀。

并依據(jù)數(shù)據(jù)屬性各種可能的排列組合順序生成可能的關(guān)鍵幀序列。

之后對(duì)比序列內(nèi)容找到關(guān)鍵幀差異位點(diǎn)，反饋給用戶進(jìn)行選擇，以確認(rèn)最終用戶所預(yù)期的動(dòng)畫序列。

在上面這個(gè)示意圖中，預(yù)期動(dòng)畫為顏色相同的點(diǎn)簇按照先行后列的方式進(jìn)行動(dòng)畫。

用戶在創(chuàng)建完第一個(gè)關(guān)鍵幀之后，僅需通過(guò)兩次關(guān)鍵幀的選擇（第二幀和第三幀）系統(tǒng)便可確定唯一的動(dòng)畫序列進(jìn)行自動(dòng)補(bǔ)全。

至此，第一個(gè)專門為可視化動(dòng)畫而研究和設(shè)計(jì)的系統(tǒng)就暫時(shí)完成了。

在被問及到未來(lái)還會(huì)對(duì)Canis/Canis做什么更新或改進(jìn)時(shí)，葛博士表示，可以添加gif導(dǎo)出功能，來(lái)進(jìn)一步提升實(shí)用性。

另外，對(duì)于Canis而言，考慮將其擴(kuò)展為一個(gè)通用性更強(qiáng)的插件庫(kù)，使其能夠嵌入任何常見的可視化創(chuàng)作語(yǔ)言中，完成可視化與動(dòng)畫的創(chuàng)作過(guò)程的融合；

對(duì)于CAST則是考慮通過(guò)嵌入預(yù)處理模塊，將其與圖形化的可視化構(gòu)建工具進(jìn)行對(duì)接或融合以達(dá)到相同的目的。

作者介紹

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

導(dǎo)師為陳寶權(quán)（北京大學(xué)教授，前沿計(jì)算研究中心執(zhí)行主任，IEEE Fellow）和汪云海（山東大學(xué)計(jì)算機(jī)學(xué)院教授）。

之所以選擇數(shù)據(jù)可視化作為研究方向，葛博士表示：

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

在了解數(shù)據(jù)可視化的過(guò)程中，會(huì)被那種嚴(yán)謹(jǐn)?shù)拿栏兴瑫r(shí)它又在數(shù)據(jù)分析的過(guò)程中扮演著越來(lái)越重要的角色，切實(shí)的解決著我們身邊的問題。

而除了他的兩位導(dǎo)師，還有很多研究人員對(duì)Canis&CAST的完成作出了貢獻(xiàn)：

比如微軟雷德蒙研究院的研究員Bongshin Lee，她是人機(jī)交互和可視化領(lǐng)域有影響力的專家；

還有山東大學(xué)的Zhao Yue，加州大學(xué)圣巴巴拉分校博士畢業(yè)的Ren Donghao等人。

最后，葛彤表示，Canis/CAST是一個(gè)開源項(xiàng)目，希望有更多的人加入進(jìn)來(lái)，把這個(gè)做的越來(lái)越完善，在各個(gè)領(lǐng)域的應(yīng)用中產(chǎn)生影響。

在線平臺(tái)：
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最佳論文榮譽(yù)提名）