看一组很酷的动画图表：
发表演讲和报告，放在门户网站首页不是很醒目吗？
一定很难制作吧？
不！简单：一行代码也不用写!
只需在下面的图形界面中导入图表的一个SVG文件，然后通过鼠标拖动图表单元设置出现时间和动画效果。
数据始终与动画保持一致，不需要计算和实现动画背后的各种复杂机制。速度、形态、慢速功能等参数都为你安排好了：
但是在快速实现动态图表的背后，还有另一个可视化动画的声明式语言――Canis.
它不依赖于任何第三方图书馆，这是图形学大牛北京大学陈宝权教授的弟子提出的――童歌等童歌刚刚在山东大学成功卫冕博士，合作导师为王运海教授。
它也是一种特定于领域的语言(DSL)，为在第一门.构建视觉动画提供全面的支持
陈教授还称赞自己开发了这样一个多层次的系统。
除了上述功能，平台还支持多种图表：无论你做什么，都可以在这里制作动画。
除了能够导出mp4文件并将其应用于日常场景之外，如果您是一名开发人员，那将是非常棒的，量身定制：
可以出口到Lottie动画的JSON格式，帮你轻松认识跨iOS、Android、Web等平台使用。
#第一门视觉动画建构语言。
在图形学的背景下，童歌的研究方向是数据可视化，这可以大大提高信息传输的效率。
然而，他发现市场上制作相关动画的工具不够方便。
比如有些类库(比如D3)要求用户手动计算动画中的每个时间节点，通过调整底层视觉通道的状态来实现动画效果。
另一个例子是Matplotlib、Pandas.
ng> 这种大家很熟悉的工具，虽然很强大但更是需要你一行一行地写代码才能制作效果。这些都对不会编程的用户非常不友好。
而创建动画的专业工具（比如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最佳论文荣誉提名）
― 完 ―
量子位 QbitAI 头条号签约
关注我们，第一时间获知前沿科技动态
