，图形学专家陈宝全弟子，本文经AI新媒体量子位（公众号ID：QbitAI）授权转载，转载请联系出处。让我们来看看一组炫酷的动画图表：在演讲、报告、门户网站主页上使用这样的效果是不是很吸睛？一定很难做吧？不！很简单：您不必编写一行代码！只需在以下图形界面中导入您制作好的图表的SVG文件，然后用鼠标拖动图表单元，设置出现时间和动画效果即可。数据和动画始终保持一致，你不需要计算动画背后的各种复杂机制。速度、形式、缓动功能等参数都为你安排好了：动态图表快速实现的背后，如虎添翼。还有一种用于视觉动画的声明性语言——Canis。不依赖任何第三方库，由北京大学图形学专家陈宝全教授的弟子葛彤等人提出；葛彤刚刚顺利完成博士答辩。它也是第一个为构建视觉动画提供全面支持的领域特定语言(DSL)。陈教授还称赞葛彤自己开发了这样一个多层次的系统。除了以上提到的功能，平台还支持丰富的图表形式：只要你会制作，都可以在这里实现动画效果。而且除了可以导出mp4文件应用到日常场景之外，如果你是开发者——那太棒了，量身定制：它可以导出Lottie动画的JSON格式，帮助你轻松跨iOS、Android、Web和其他平台。第一视觉动画构建语言在图形大师的带领下。葛彤的研究方向是数据可视化。这项技术可以大大提高信息传输的效率。但他发现市面上制作相关动画的工具不够方便。例如，有些类库（如D3）需要用户手动计算动画中的每个时间节点，并调整底层视觉通道状态来实现动画效果；另一个例子是熟悉的工具，如Matplotlib和Pandas。需要一行一行的写代码才能做出效果。这些对于不会编程的用户来说是非常不友好的。专业的动画制作工具（如AE）制作动画图表时不需要编程，但是操作过程也很繁琐：需要逐帧制作，动画和数据是分离的，没办法以保证结果的一致性。然后利用所学，自己动手制作一个数据驱动的可视化动画图表制作工具。一开始，葛彤打算直接打造一个非程序化的创作平台。但是，他在早期的探索和尝试中发现，这样一个复杂的系统需要有一套严谨的支持规则来描述各种图表的各种动画形式，以及相应的编译和渲染机制。于是他们从广义的动画理论入手进行研究，然后结合可视化的特点和可视化动画应用过程中的一些规律和特殊的结构特点，探索如何在语法上合理地编码和反映这些特点。最后设计了这个DSL语言Canis（它的意思是ChartAnimations，solid的缩写是Canis，也是CanisMajor星座的名字，好记）。据葛彤介绍，这也是整个项目中难度最大的一步，前人也没有相关研究。最终，他们提出的Canis拥有一个完整的体系，包括声明式语法规范（就像JSON格式）、数据驱动的动画声明方式和编译机制，不依赖任何第三方库。他们的第一个成果是直接通过Canis编程的在线动画平台：该平台借助数据管理基元（例如，条形图中的每个条都是一个基元），定义动画时序结构和动画效果。这样就可以实现视觉动画中数据、视觉编码和时序之间关系的建立，保证动画和数据的一致性。一开始我们需要导入的图表（一个或多个图表都可以），格式是SVG的变体dSVG（可以直接用Canis的预处理器生成）。它将三个附加属性添加到与文件中每个基元对应的标签：“id”、“class”和“datum”。其中“id”和“class”为图元提供索引，描述图元类型（如矩形、圆形、自由路径等）；而“datum”则包含图元（最左）对应的源数据内容。通过它们，Canis可以自动建立图元之间的联系，然后我们就可以定义图元的动画效果了。由于Canis解耦了编码和实现逻辑，用户只需定义要做什么，而不是如何做。您只需填写“选择器”、“分组”、“时序”、“转场效果（类型）”等“参数”即可（具体语法请参考Canis在线平台文档）。例如，在下面的气泡图中，通过将“type”设置为“fade”，气泡可以以淡出的方式切换数据状态。如果这对您来说听起来有点生硬-只需将“淡入淡出”更改为“魔术动作”即可。Canis编译器此时会在状态之间进行插值，实现平滑的变形变换，不需要设置其他参数。再比如，通过改变分组所依据的数据属性，可以快速改变动画时序，将下表中的划分依据由类型（Type）改为时间（Month）。说到Canis编译器，它是用JavaScript编写的。为了支持高效的跨平台渲染和应用，代码会通过以下五个步骤编译成Lottie代码：在编译过程中，编译后的代码会以数据表的形式存储和维护中间变量，比如this:更友好的自动补全算法界面虽然Canis语法简单，但真正人性化的平台还是尽量避免直接代码控制，所以他们的第二个结果出来了：基于Canis我做了一个图形界面，不会requirecoding，也就是文章开头看到的那个，葛彤给它取名为CAST（CanisStudio）。CAST采用直观描述动画过程的可视化规范，优化Canis编译器，支持增量编译，提高交互渲染效率。用户在界面中的交互行为会转化为相应的动画调整指令，生成并更新系统中维护的Canis对象，Canis对象的更新会在界面中实时反馈给用户。除了增量编译，CAST还加入了数据驱动的自动补全算法，帮助用户更快地完成动画制作。主要包括两个方面：一是关键帧的自动补全。这主要是为了解决在构建关键帧的过程中，一些图元太小或者与其他图元重叠使得选择过程非常困难且错误率高的问题。CAST的方法是在用户选择少量图元后，根据视觉通道的感知效果，比较选中和未选中图元对应的数据属性编码的视觉通道。然后根据编码感知有效性最高的通道的数据属性（例如用位置信息编码的数据属性比使用颜色更容易被发现和观察），将未选择的图元分组过滤反馈给用户。如下。第二个是推荐完成的动画序列。当用户完成少量关键帧的构建后（比如完成第一帧后），CAST仍会按照感知有效性的原则，根据用户创建的关键帧中的图元对所有图元进行分组的视觉通道。创建后续关键帧。并根据数据属性的各种可能的排列组合，生成可能的关键帧序列。之后对比序列内容，找出关键帧差异，反馈给用户选择，确认最终用户期望的动画序列。在上图中，预期的动画是相同颜色的点簇以逐行方式动画。创建第一个关键帧后，用户只需要选择关键帧两次（第二帧和第三帧）就可以确定唯一的动画序列自动补全。至此，第一个专门为视觉动画研发设计的系统已经暂时完成。当被问到Canis/Canis未来会有哪些更新或改进时，葛博士表示可以增加gif导出功能，进一步提高实用性。此外，对于Canis，考虑将其扩展成一个更通用的插件库，使其可以嵌入任何常用的视觉创作语言，完成可视化和动画创作过程的整合；对于CAST，可以考虑嵌入预处理模块，与图形可视化构建工具对接或融合，达到同样的目的。作者介绍即将从山东大学博士毕业的葛彤，是Canis&CAST两篇论文中的第一篇；导师陈宝全（北京大学教授、前沿计算研究中心执行主任、IEEEFellow）和王云海（山东大学计算机学院教授）。之所以选择数据可视化作为研究方向，葛博士说：一方面，自己平时喜欢写一些可以解决工作或生活中实际问题的小程序；另一方面，我喜欢画画和做设计。在理解数据可视化的过程中，你会被严谨的美感所吸引。同时，它在数据分析过程中发挥着越来越重要的作用，有效解决了我们身边的问题。除了他的两位导师，还有很多研究人员为Canis&CAST的完成做出了贡献：如微软雷德蒙德研究所研究员BongshinLee，是人机交互和可视化领域颇具影响力的专家；来自加州大学的山东赵悦，任东浩，博士。毕业于加州大学圣巴巴拉分校等。最后葛彤表示，Canis/CAST是一个开源项目，希望有更多的人加入进来，让这个越来越完善，对各个领域的应用产生影响。线上平台：Canishttps://canisjs.github.io/canis-editor/CASThttps://chartanimation.github.io/cast/#/论文地址：Canishttp://www.yunhaiwang.net/EuroVis2020/canis/paper。pdfCASThttps://tgeconf.github.io/assets/pdf/CHI_2021__CAST_compressed.1a9a51d2.pdf(ACMCHI2021BestPaperHonorableMention)
