建站
咨詢
售后
建站咨詢
新聞中心
本文經(jīng)AI新媒體量子位（公眾號ID:QbitAI）授權(quán)轉(zhuǎn)載，轉(zhuǎn)載請聯(lián)系出處。
來看一組炫酷的動畫圖表：
這樣的效果拿去演講、報告、放在門戶主頁上豈不是非常吸睛？
制作起來一定很難吧？
NO！很簡單：一行代碼也不用寫！
只需在下面這個圖形界面中，導入一個你做好的圖表的SVG文件，然后通過鼠標拖動圖表單元，設(shè)定出場一下時間和動畫效果就可以了。
數(shù)據(jù)和動畫始終保持一致，也無需你計算實現(xiàn)動畫背后的各種復(fù)雜機制，速度、形式、緩動函數(shù)等參數(shù)都已幫你安排好：
而如此快捷地實現(xiàn)動態(tài)圖表的背后，更厲害的是還有一門針對可視化動畫的聲明式語言——Canis。
它不依賴任何第三方庫，由圖形學大牛北京大學陳寶權(quán)教授的弟子——葛彤等人提出；葛彤剛剛在山東大學成功博士答辯，合作導師是汪云海教授。
也是第一門為構(gòu)建可視化動畫提供全面支持的領(lǐng)域特定語言（DSL）。
陳教授也贊揚葛彤以一己之力開發(fā)了這樣一個多層級系統(tǒng)。
[[423436]]
除了上面所說的特點，該平臺支持的圖表形式也非常豐富：只要你能做出來的都可以在這里實現(xiàn)動畫效果。
而且除了可以導出mp4文件應(yīng)用到日常場景，如果你是開發(fā)人員——那就太好了，量身定做：
它可以導出Lottie動畫的JSON格式，幫你輕松實現(xiàn)跨iOS、Android、Web等平臺使用。
第一門可視化動畫構(gòu)建語言
拜在圖形學大牛門下，葛彤的研究方向為數(shù)據(jù)可視化，這種技術(shù)可以大大提升信息傳遞的效率。
但他發(fā)現(xiàn)市面上制作相關(guān)動畫的工具都不夠便利。
比如有些類庫（比如D3）需要用戶手動計算動畫中的各個時間節(jié)點并通過調(diào)整底層的視覺通道狀態(tài)來實現(xiàn)動畫效果；
再比如Matplotlib、Pandas這種大家很熟悉的工具，雖然很強大但更是需要你一行一行地寫代碼才能制作效果。
這些都對不會編程的用戶非常不友好。
而創(chuàng)建動畫的專業(yè)工具（比如AE）在制作動畫圖表時，雖然不需要編程了，但操作過程也很繁瑣：需要逐幀制作，而且動畫與數(shù)據(jù)是脫離的，根本沒法保證結(jié)果一致性。
那就利用所學自己搞一個數(shù)據(jù)驅(qū)動的可視化動畫圖表創(chuàng)作工具吧。
一開始，葛彤準備直接做一個去編程化的創(chuàng)作平臺。
但他在前期的探索和嘗試中發(fā)現(xiàn)，這樣一個復(fù)雜系統(tǒng)的內(nèi)部需要有一個嚴謹且支持描述各類圖表多樣的動畫形式的規(guī)則，以及相應(yīng)的編譯和渲染機制。
于是他們從廣義的動畫理開始研究，之后結(jié)合可視化的特點以及可視化動畫在應(yīng)用過程中的一些規(guī)律、特殊結(jié)構(gòu)特點，并探索在語法中如何能夠合理地編碼和反映這些特點。
最終設(shè)計出來了這門DSL語言Canis（其含義是Chart Animations，固縮寫為Canis，也是大犬星座的名稱，方便記憶）。
葛彤介紹道，這也是整個工程中最困難的一步，前人也沒有相關(guān)研究。
[[423438]]
最終他們提出的Canis擁有一套完整的包括聲明式語法規(guī)范（就像JSON格式一樣）、數(shù)據(jù)驅(qū)動的動畫聲明方式以及編譯機制在內(nèi)的體系，不依賴任何第三方庫。
他們的第一個成果是直接通過Canis編程來實現(xiàn)動畫的在線平臺：
該平臺借助數(shù)據(jù)對圖元 （比如一個條形圖中每一個條形就是一個圖元）進行管理、定義動畫時序結(jié)構(gòu)和動畫效果。
從而實現(xiàn)對可視化動畫中數(shù)據(jù)、視覺編碼、時序三者關(guān)系的建立，保證動畫與數(shù)據(jù)的一致性。
我們最開始需要導入的圖表（一張多張都可），格式為SVG的變體dSVG（可以通過Canis的預(yù)處理器直接生成）。
它會在文件中各圖元所對應(yīng)的標簽分別添加三個額外屬性：“id”、“class” 和 “datum”。
其中“id”與“class”為圖元提供索引并描述圖元類型（例如矩形、圓形、自由路徑等）；
而 “datum” 則包含了該圖元所對應(yīng)的源數(shù)據(jù)內(nèi)容（下圖最左）。
通過它們，Canis就能自動建立好圖元之間的聯(lián)系，之后我們就可以定義圖元的動畫效果了。
由于Canis解耦了編碼與實現(xiàn)邏輯，用戶只需要定義做什么，而不需要定義如何做。
你只需要填好“選擇（selector）”、“劃分(grouping)”、“時序效果(timing)”、“過渡效果（type）”等的“參數(shù)”就好了（具體語法可參見Canis在線平臺的文檔）。
比如在下面這個氣泡圖中，通過將“type”設(shè)置為“fade”就能實現(xiàn)氣泡以淡出的方式進行數(shù)據(jù)狀態(tài)切換。
如果你覺得這樣有點生硬——只需把“fade”改成“magic move”就好了。
Canis編譯器此時會在狀態(tài)間進行插值，實現(xiàn)平滑的morphing變換，不需要你設(shè)定別的參數(shù)。
再比如通過改變grouping所依據(jù)的數(shù)據(jù)屬性，就能快捷地改變動畫時序把下表中的劃分依據(jù)從按類型（Type）變成按時間(Month)。
說到Canis編譯器，它采用JavaScript編寫而成，為支持高效的跨平臺渲染和應(yīng)用，會經(jīng)過以下五個步驟將代碼編譯為Lottie編碼：
編譯過程中又會以數(shù)據(jù)表的形式存儲和維護編譯中間變量，就像這樣：
添加自動補全算法的更友好界面
雖然Canis的語法簡單，但一個真正用戶友好的平臺還是盡量避免直接進行代碼控制，于是他們的第二個成果就出來了：
基于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)鍵幀的過程中，一些過小或與其他重疊的圖元導致選擇過程十分困難且錯誤率較高的問題。
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導出功能，來進一步提升實用性。
另外，對于Canis而言，考慮將其擴展為一個通用性更強的插件庫，使其能夠嵌入任何常見的可視化創(chuàng)作語言中，完成可視化與動畫的創(chuàng)作過程的融合；
對于CAST則是考慮通過嵌入預(yù)處理模塊，將其與圖形化的可視化構(gòu)建工具進行對接或融合以達到相同的目的。
作者介紹
葛彤，即將從山東大學博士畢業(yè)，為Canis&CAST這兩篇論文的一作；
[[423439]]
導師為陳寶權(quán)（北京大學教授，前沿計算研究中心執(zhí)行主任，IEEE Fellow）和汪云海（山東大學計算機學院教授）。
[[423440]]
之所以選擇數(shù)據(jù)可視化作為研究方向，葛博士表示：
一方面是平時比較喜歡去寫一些能夠解決工作或者生活中的實際問題的小程序；另一方面是愛好畫畫和做設(shè)計。
在了解數(shù)據(jù)可視化的過程中，會被那種嚴謹?shù)拿栏兴?，同時它又在數(shù)據(jù)分析的過程中扮演著越來越重要的角色，切實的解決著我們身邊的問題。
而除了他的兩位導師，還有很多研究人員對Canis&CAST的完成作出了貢獻：
比如微軟雷德蒙研究院的研究員Bongshin Lee，她是人機交互和可視化領(lǐng)域有影響力的專家；
[[423441]]
還有山東大學的Zhao Yue，加州大學圣巴巴拉分校博士畢業(yè)的Ren Donghao等人。
最后，葛彤表示，Canis/CAST是一個開源項目，希望有更多的人加入進來，把這個做的越來越完善，在各個領(lǐng)域的應(yīng)用中產(chǎn)生影響。
在線平臺：
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最佳論文榮譽提名）
網(wǎng)站題目：不編程，拖拖鼠標圖表自己動起來！來自圖形學大牛陳寶權(quán)弟子
本文地址：http://m.fisionsoft.com.cn/article/cociois.html
