看一組很酷的動畫圖表:

發(fā)表演講和報告，放在門戶網(wǎng)站首頁不是很醒目嗎。

一定很難制作吧。

不！很簡單:你不用寫一行代碼！

只需在下面的圖形界面中導(dǎo)入你的圖表的一個SVG文件，然后用鼠標拖動圖表單元來設(shè)置出現(xiàn)時間和動畫效果。

數(shù)據(jù)始終與動畫保持一致，不需要計算和實現(xiàn)動畫背后的各種復(fù)雜機制。速度，形態(tài)，慢速功能等參數(shù)都為你安排好了:

在動態(tài)圖表快速實現(xiàn)的背后，有一個可視化動畫的聲明性語言——Canis。

它不依賴任何第三方圖書館，由北京大學(xué)陳寶泉教授的弟子童歌提出童歌剛剛在山東大學(xué)成功衛(wèi)冕博士，合作導(dǎo)師為王運海教授

它也是第一個為構(gòu)建視覺動畫提供全面支持的領(lǐng)域特定語言。

陳教授還稱贊自己開發(fā)了這樣一個多層次的系統(tǒng)。

除了上述功能，平臺還支持多種圖表:無論你做什么，都可以在這里制作動畫。

除了導(dǎo)出mp4文件并將其應(yīng)用于日常場景之外，如果您是一名開發(fā)人員——，它將非常棒，而且是量身定制的:

它可以導(dǎo)出洛蒂動畫的JSON格式，幫助你跨iOS，安卓，Web等平臺輕松使用。

第一個視覺動畫構(gòu)造語言。

在圖形學(xué)的背景下，童歌的研究方向是數(shù)據(jù)可視化，這可以大大提高信息傳輸?shù)男省?/p>

可是，他發(fā)現(xiàn)市場上制作相關(guān)動畫的工具不夠方便。

比如有些類庫要求用戶手動計算動畫中的每個時間節(jié)點，通過調(diào)整底層視覺通道的狀態(tài)來實現(xiàn)動畫效果。

比如大家都很熟悉的Matplotlib和Pandas功能強大，但是需要你一行一行寫代碼才能做出效果。

這些對不會編程的用戶非常不友好。

而創(chuàng)作動畫的專業(yè)工具在制作動畫圖表時不需要編程，操作過程也比較繁瑣:需要逐幀制作，動畫和數(shù)據(jù)是分開的，沒有辦法保證結(jié)果的一致性。

然后利用所學(xué)知識創(chuàng)建一個數(shù)據(jù)驅(qū)動的可視化動畫圖表創(chuàng)建工具。

起初，童歌準備直接創(chuàng)建一個去編程平臺。

但他在早期的探索和嘗試中發(fā)現(xiàn)，如此復(fù)雜的系統(tǒng)內(nèi)部，需要一個嚴謹?shù)?，支持性的?guī)則來描述各種圖表的各種動畫形式，以及相應(yīng)的編譯和渲染機制。

因此，他們開始從廣義上研究動畫理論，然后結(jié)合可視化的特點以及視覺動畫在應(yīng)用過程中的一些規(guī)律和特殊結(jié)構(gòu)特征，探索如何在語法上合理地編碼和體現(xiàn)這些特征。

最后，設(shè)計了DSL語言Canis。

童歌介紹，這也是整個項目中最難的一步，之前也沒有相關(guān)研究。

最后，他們提出的Canis有一套完整的體系，包括聲明性語法規(guī)范，數(shù)據(jù)驅(qū)動的動畫聲明和編譯機制，不依賴任何第三方庫。

他們的第一個成果是通過Canis編程直接實現(xiàn)了動畫的在線平臺:

借助數(shù)據(jù)，平臺管理圖元，定義動畫時序結(jié)構(gòu)和動畫效果。

從而實現(xiàn)了可視化動畫中數(shù)據(jù)，視覺編碼和時序之間關(guān)系的建立，保證了動畫和數(shù)據(jù)的一致性。

一開始我們需要導(dǎo)入一個圖表，格式是SVG的變體dSVG。

它向文件中每個元素對應(yīng)的標簽添加了三個附加屬性:id，class和datum。

其中，id和class為圖元提供索引，描述圖元類型。)，

而數(shù)據(jù)包含對應(yīng)于這個原語的源數(shù)據(jù)內(nèi)容(下圖最左邊)。

通過它們，Canis可以自動建立圖元之間的關(guān)系，進而可以定義圖元的動畫效果。

因為Canis將編碼和實現(xiàn)邏輯解耦，所以用戶只需要定義做什么，而不需要定義如何做。

你只需要填寫選擇器，分組，定時，轉(zhuǎn)場效果等參數(shù)(具體語法請參考Canis在線平臺的類型文檔)

例如，在下面的氣泡圖中，通過將類型設(shè)置為淡化，可以通過淡化來切換氣泡的數(shù)據(jù)狀態(tài)。

如果你覺得這個有點生硬，——就把褪色改成魔動。

此時，Canis編譯器會在狀態(tài)之間進行插值，實現(xiàn)平滑的變形變換，不需要設(shè)置其他參數(shù)。

例如，通過更改分組所基于的數(shù)據(jù)屬性，可以快速更改動畫時間序列，并將下表中的劃分基準從類型更改為月份。

說到Canis編譯器，就是用JavaScript寫的。為了支持高效的跨平臺渲染和應(yīng)用，代碼將通過以下五個步驟編譯成洛蒂代碼:

在編譯過程中，中間變量以數(shù)據(jù)表的形式存儲和維護，就像這樣:

增加更友好的自動補全算法界面。

雖然卡尼斯的

語法簡單，但一個真正用戶友好的平臺還是盡量避免直接進行代碼控制，于是他們的第二個成果就出來了:

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

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

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

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

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

一是關(guān)鍵幀的自動補全。

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

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

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

二是動畫序列推薦補全。

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

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

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

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

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

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

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

另外，對于 Canis 而言，考慮將其擴展為一個通用性更強的插件庫，使其能夠嵌入任何常見的可視化創(chuàng)作語言中，完成可視化與動畫的創(chuàng)作過程的融合，

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

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

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

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

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

在了解數(shù)據(jù)可視化的過程中，會被那種嚴謹?shù)拿栏兴?，同時它又在數(shù)據(jù)分析的過程中扮演著越來越重要的角色，切實的解決著我們身邊的問題。

而除了他的兩位導(dǎo)師，還有很多研究人員對 Canisamp，CAST 的完成作出了貢獻:

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

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

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

在線平臺:

論文地址: