CN102866886A - 一种基于Web的算法动画可视化开发系统 - Google Patents

Abstract

一种基于Web的算法动画可视化开发系统，该系统由3个模块组成：可视化编辑模块、动画生成模块以及绘图模块。可视化编辑模块通过新建动画生成模块对象和调用动画生成模块接口操纵界面动画元素；动画生成模块管理所有动画元素对象的绘制及更新，动画生成模块调用绘图模块的绘制接口将动画元素绘制在画布上；绘图模块包括绘制动画元素接口，接受来自动画生成模块的调用，实现图形图像和文字的绘制。该系统包含了算法动画常用的元素，并使用基于时间线脚本序列的动画实现方法，使在网页上创建算法动画更便捷，脚本序列自动生成并支持最终用户编程，提高算法动画开发效率和代码复用性。

Description

一种基于Web的算法动画可视化开发系统

技术领域

本发明涉及一种基于Web的算法动画可视化开发系统，属于软件可视化领域。

背景技术

算法动画以动态交互的图形化方式来形象的表示算法的执行过程，是对算法进行可视化教学的具体表现形式。目前算法动画主要分为两类，运行于终端的算法动画系统和运行于网络的算法动画，随着网络技术的发展，运行于网络的算法动画逐渐取代了运行于终端的算法动画系统，创建运行于网络的算法动画的技术主要有Java Applet、Flash。因为Java Applet程序不能独立运行，需安装Java虚拟机解释执行Applet的字节码程序，所以运行缓慢，使用起来不方便，尤其是打开或关闭一个Java Applet程序，将占用大量系统资源，这限制了它的广泛使用。Flash是一个多媒体动画制作软件，采用矢量绘图技术的关键帧动画，通过对关键帧进行设计，可将图形、图像、音效、动画融合在一起，制作出多种动态效果。但Flash作为一个相对封闭的技术，需经过专业的学习才能制作出比较好的动画，完成后需安装插件才能播放，Flash与网络上其他开放标准也没有完全融合的方案，如Flash中的元素与网页中其它元素进行交互需消耗大量时间和资源，而且编程上也相当不方便。

Flash和很多软件一样提供给用户的是一个封装好的程序，用户不能对软件进行修改，软件为了能够符合各种用户的设计需求，不得不给软件增加很多功能，使得软件程序做得很庞大，但大部分用户只需使用其中的一个或几个功能，因此理想的情况是能够让最终用户自己定制程序，使软件能够最大限度的符合用户的需求。最终用户编程的思想在软件开发的应用主要通过是减少不必要的软件功能来满足用户的需求，并提供用户容易编程的接口，用户编程的过程中不需要或需要少量的编程方面的知识。

HTML5是下一代富网络应用技术标准，与Flash相比，HTML5是完全开发的标准，它除了提供新的元素（标签），还提供了新的应用程序编程接口（API），使我们能够在网页上提供更多丰富的多媒体和互动功能，且无需使用专有的插件。HTML5规范中新增的绘图元素canvas，使开发人员用JavaScript脚本语言可以在canvas画布上进行一系列基于canvas API的图形绘制操作，如可以画布上画各种图形、处理图像、创建动画等。

HTML5为Web提供了全新的框架和平台，与传统应用相比，基于Web的系统和应用（Web App）有着无须本地安装、跨平台、节省资源等多种优势，Web App已经成为目前移动互联网的一大趋势。例如传统应用想要共享算法动画作品，必须先从软件中将动画文件导出，然后上传至Web，但HTML5应用可在Web的实时画布上协作创建算法动画，省掉现在算法动画创建流程中的导出上传环节，将整个创作过程都转移到线上，直至作品完成。目前已经出现的HTML5动画平台Mugeda，是一款在线的动画编辑器，为开发人员提供类似Flash的开发环境，创建动画的操作流程与Flash基本一致，允许用户在浏览器中直接创建，共享和发布HTML5动画。同Flash类似，为了满足不同用户对动画设计的需求，Mugeda平台加载了很多算法动画不需要的功能，由于动画设计不是针对算法动画开发，所以并不能提高算法动画的开发效率，本发明通过引入最终用户编程思想，改进动画设计，设计中包含了算法动画常用的元素和效果，用户选择并输入绘图参数即可简单快速的创建算法动画。另一方面，Mugeda平台采用的关键帧动画概念并不符合现实动画产生的过程，本发明使用基于时间线脚本序列的动画实现方法，脚本序列按照动画操作步骤自动生成且按顺序排放，更符合实际上的算法动画制作过程，脚本序列采用操作图标显示，容易识别每步操作的作用，方便进行再修改。

发明内容

本发明的技术解决问题：克服现有技术的不足，提供一种基于Web的算法动画可视化开发系统，使用可编程脚本能提高熟练用户的开发效率和代码复用性，能够很好的应用于算法教学或实验中。

本发明的技术解决方案：一种基于Web的算法动画可视化开发系统，自上而下依次包括可视化编辑模块，动画生成模块和绘图模块，上层部分可以调用邻近的下层对象，可视化编辑模块通过新建动画生成模块对象和调用动画生成模块接口来操作界面动画元素对象，动画生成模块通过调用绘图模块接口完成动画元素的绘制及更新。

可视化编辑模块：把算法动画中常用的动画元素和动画效果的对应属性信息作为绘图参数封装在具体的鼠标事件中，动画效果通过改变动画元素的属性信息实现；鼠标移动时调用绘图参数实时绘制相应动画元素，鼠标弹起时结束绘图，或采用键盘输入参数，把最终的绘图参数信息生成以相应操作图标显示的脚本，并按脚本的顺序排列在时间线上；所述脚本的排列顺序是指按生成脚本的先后次序递增排列，遍历执行脚本序列生成算法动画，该模块通过新建动画生成模块对象和调用动画生成模块接口操纵界面动画元素；

动画生成模块：管理所有动画元素的绘制及更新，该模块对象由可视化编辑模块自动创建后，生成画布对象并创建相应的动画元素对象管理器，对象管理器控制画布上所有动画元素属性信息的改变，并利用定时器更新画布上的动画元素，该模块调用绘图模块的绘制接口将动画元素绘制在画布上；

绘图模块：绘制所有动画元素的接口，包括图形图像、文字的动画元素对象，每个动画元素对象有自己的属性和方法，每个动画元素对象必须有自己的绘制方法，动画生成模块调用动画元素对象的绘制方法更新画布，该模块接受来自动画生成模块的调用，实现图形图像和文字的动画元素绘制。

所述的可视化编辑模块实现过程如下：

（1）清空画布及动画元素管理数组，新建动画生成模块对象；

（2）把用户鼠标键盘操作输入的绘图参数传给动画生成模块对象完成在画布上的实时绘制；

（3）生成以绘图参数为内容，以操作图标为显示的脚本，按先后顺序排放在时间线上，时间线上的所有脚本组成脚本序列，绘图参数之间用分隔符‘<;>’连接；

（4）遍历脚本序列的内容，调用动画生成模块对象生成算法动画；

（5）脚本可直接编辑，或进行可视化编辑：如果要调节动画时序则编辑时间线上的脚本序列，如果要修改某脚本则选择该脚本重新输入绘图参数后，转到步骤（2），修改完成则继续或结束。

所述的动画生成模块实现过程如下：

（1）动画生成模块由可视化编辑模块自动创建后，生成画布对象并创建相应的动画元素对象管理器；

（2）动画生成模块接收可视化编辑模块创建动画时自动生成的绘图参数脚本，解析接收的绘图参数，根据绘图参数的类别调用相应的绘图模块API完成绘制；

（3）对象管理器中的动画元素管理数组存放动画元素的最新属性信息，每新建一个动画元素，将它的属性信息放入动画元素管理数组中，每新建一个作用在动画元素上的动画效果，要实时改变动画元素在管理数组中的属性信息；

（4）通过定时器，每隔一段时间就重画一下画布，同时改变画布上动画元素对象的位置、属性信息，具体为读取动画元素管理数组中动画元素的属性信息，根据属性信息更新画布上对应动画元素的属性。

本发明与现有技术相比的优点在于：本发明包含了算法动画常用的元素，使用自动记录动画操作中的绘图参数作为脚本顺序添加在时间线上的算法动画实现方法，使在网页上创建基于时间线脚本序列的算法动画更便捷，脚本序列与动画操作相对应且自动生成，并支持最终用户编程，用户可通过直接编辑或可视化编辑的方式改变脚本，从而改变算法动画，因此本发明使用可编程脚本能提高熟练用户的开发效率和代码复用性，能够很好的应用于算法教学或实验中。

附图说明

图1为本发明系统的架构模块示意图；

图2为本发明系统中的可视化编辑模块实现过程；

图3为本发明系统中的可视化编辑界面；

图4为本发明系统中的动画生成模块实现过程；

图5为本发明系统中的绘图模块组成示意图。

具体实施方式

为了更好地理解本发明，先对一些基本概念进行一下解释说明。

本发明生成的算法动画是指用图形、图像、文本表示算法执行过程的动态效果，每一个算法动画由多个动画元素和动画效果组成。动画元素包含了算法动画常用的元素，具体包括矩形、圆形、圆环、文本、链表结点，此外还加入了图像、声音多媒体元素以丰富算法动画的创建。每个动画元素必须有自己特定的属性和实现绘制自身的方法，绘制方法调用自己的属性信息完成绘制。动画元素的属性信息包括形状、大小、颜色、位置等，如矩形的属性有宽、高、位置、颜色、显示值，矩形的实现绘制自身方法要求能够实现根据矩形的属性信息在画布上绘制出相应的矩形，应该指出的是每个绘图元素的属性信息应根据具体的绘图进行设置，其各自的绘图实现方法也应不同。动画效果包含了算法动画的常用效果，具体是指作用在动画元素上的特定效果，通过改变动画元素的属性实现，动画效果包括选择、移动、运动、高亮、连接、删除。其中运动包括曲线运动、函数运动、物理特性运动，即动画元素可以按照特定的运动轨迹生成一段动画效果。从每个动画元素或动画效果里抽取各自的属性信息作为绘图参数，因此，绘图参数包括动画元素或动画效果及其对应属性信息。

每一个动画元素对应一段相对独立可复用的绘图函数（类），它包含单个动画元素的绘制，如一个图形、一幅图像、一段文本等。调用每个绘图元素的绘图函数将其绘制在画布上，通过绘图函数的接口可以获得每个动画元素的属性信息，改变动画元素的属性信息可实现特定的动画效果。绘图函数代码实现部分采取的技术是使用HTML5的canvas元素的应用程序编程接口（API）实现绘制，使用canvas可以实现无需使用第三方插件即可在网页上直接绘图的机制。单独的一个canvas元素只是在页面中定义了一块矩形区域，需要利用JavaScript编写在其中进行绘画的脚本，才能够完成绘制各种图形，线条，文本，路径以及复杂的图形变换等操作。用户选择动画元素或动画效果后，使用鼠标、键盘进行简单交互操作输入绘图参数根据绘图参数调用其绘图函数在画布上实时绘制动画元素，生成以绘图参数为内容、以相应的操作图标为显示的脚本，并按先后顺序排放在时间线上。

下面结合附图对本发明进行详细说明

如图1所示，本发明由3个模块组成：可视化编辑模块、动画生成模块以及绘图模块。可视化编辑模块通过新建动画生成模块对象和调用动画生成模块接口操纵界面动画元素；动画生成模块管理所有动画元素对象的绘制及更新，动画生成模块调用绘图模块的绘制接口将动画元素绘制在画布上；绘图模块包括绘制动画元素接口，接受来自动画生成模块的调用，实现图形图像和文字的绘制。本发明包含了算法动画常用的元素，并使用基于时间线脚本序列的动画实现方法，使在网页上创建算法动画更便捷，脚本序列自动生成并支持最终用户编程，提高算法动画开发效率和代码复用性。

上述各模块的具体实现过程如下：

1．可视化编辑模块

该模块的实现过程如图2所示：

（1）清空画布及动画元素管理数组，新建动画生成模块对象。

（2）把用户鼠标键盘操作输入的绘图参数传给动画生成模块对象完成在画布上的实时绘制。如图3所示，编辑界面包括工具栏，动画显示区，属性栏，代码栏，时间线五个部分，其中代码栏中的代码和时间线上的脚本实时对应。工具栏包括动画元素和动画效果，用户使用鼠标选择动画元素或动画效果后，在动画显示区拖拽鼠标绘制动画元素或选择已绘制的动画元素施加动画效果，属性栏显示调用绘图函数的实时绘图参数，用户可用键盘修改绘图参数，动画显示区实时绘制动画元素或动画效果。因此，输入的绘图参数包括动画元素或动画效果及其对应属性信息。

（3）生成以绘图参数为内容，以操作图标为显示的脚本，按先后顺序排放在时间线上，时间线上的所有脚本组成脚本序列，绘图参数之间用分隔符‘<;>’连接。脚本序列和算法动画实时对应且自动生成，并支持最终用户编程，用户可通过直接编辑或可视化编辑的方式改变脚本。时间线的生成脚本的实现方法是把创建动画时的每一步操作调用的绘图参数生成以相应操作图标显示的脚本，并按顺序排列在时间线上，脚本的排列顺序是指按生成脚本的先后次序递增排列，通过执行脚本序列中的绘图参数，调用相应的HTML5 canvas API完成绘图。时间线上的脚本序列按照动画操作步骤排放，更符合实际上的算法动画制作的过程，且脚本序列采用操作图标显示，容易识别每步操作的作用，方便进行再修改。

（4）遍历脚本序列的内容，调用动画生成模块对象生成算法动画。

（5）脚本可直接编辑，或进行可视化编辑：如果要调节动画时序则编辑时间线上的脚本序列，如果要修改某脚本则选择该脚本重新输入绘图参数后，转到步骤（2），修改完成则继续或结束。脚本的直接编辑方法是选择脚本后代码栏显示相应的脚本代码，直接编辑代码可实时改变脚本。可视化编辑中的编辑脚本序列和修改某脚本均可改变脚本序列的内容，其中编辑脚本序列包括改变脚本顺序、合并脚本、删除脚本，合并脚本是指把分步显示的多个脚本合并为一个脚本，实现了多个脚本的同时播放，这些操作均可以通过操作时间线完成。如果要修改某脚本则需选择该脚本后，分析脚本的内容，获取与该脚本相关的动画元素及其属性信息，然后进入步骤（2），属性栏显示获取的动画元素属性信息，代码栏显示获取的脚本代码，可在属性栏重新输入相应的绘图参数或直接进行代码编辑。用户通过直接编辑或可视化编辑的方式改变脚本，可编程脚本能提高熟练用户的开发效率和代码复用性。

2.动画生成模块

该模块的实现过程如图4所示：

（1）动画生成模块由可视化编辑模块自动创建后，生成画布对象并创建相应的动画元素对象管理器。

（2）动画生成模块接收可视化编辑模块创建动画时自动生成的绘图参数脚本，解析接收的绘图参数，根据绘图参数的类别调用相应的绘图模块API完成绘制。

（3）对象管理器中的动画元素管理数组存放动画元素的最新属性信息，每新建一个动画元素，将它的属性信息放入动画元素管理数组中，每新建一个作用在动画元素上的动画效果，要实时改变动画元素在管理数组中的属性信息。

（4）通过定时器，每隔一段时间就重画一下画布，同时改变画布上动画元素对象的位置、属性信息，具体为读取动画元素管理数组中动画元素的属性信息，根据属性信息更新画布上对应动画元素的属性。

动画生成模块使程序无需关心动画元素对象的重画，只需要通过绘图调整动画元素对象的属性即可，对象管理器负责管理所有的动画元素对象的绘制。

3．绘图模块

该模块组成示意图如图5所示：

每一个动画元素对象是一段相对独立可复用的绘图类，它只包含单个简单元素，例如一个矩形、一幅图、一段文字等。每个绘图类都继承于一个父类Object，可以通过它的接口获得每个动画元素对象的公共属性，每个动画元素通过调用绘图模块的绘图对象将自己最终绘制在画布上。其中绘图对象“Objects”包括矩形、圆形、圆环、文字、链表结点、连接线等，每个绘图对象必须有自己的draw()方法实现；绘图操作“Effects”包括选择修改、移动、高亮、删除等，此外还加入图片、声音等多媒体元素。在设计好具体的绘图对象及操作后，分别实现绘图对象及其操作的相应代码，为了便于动画生成模块调用相应的代码，按照设计好的分类进行封装。绘图模块的代码实现部分采取的技术是使用HTML5的canvas元素的绘图方法（API）实现绘图操作，使用canvas可以实现无需使用第三方插件即可在网页上直接绘图的机制。单独的一个canvas元素只是在页面中定义了一块矩形区域，需要利用JavaScript编写在其中进行绘画的脚本，才能够完成绘制各种图形，线条，文本，路径以及复杂的图形变换等操作。

本发明中未详细阐述的部分属于本领域技术人员的公知技术。

最后所应说明的是，以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明将绘图参数作为脚本记录在时间线上，并遍历时间线上脚本序列生成算法动画以及通过编辑时间线上脚本序列修改算法动画的前提下，还可以做出若干改进或等同替换，都应涵盖在本发明的保护范围内。因此，本发明的保护范围应该以权力要求的保护范围为准。

Claims (3)

1.一种基于Web的算法动画可视化开发系统，其特征在于包括：

可视化编辑模块：把算法动画中常用的动画元素和动画效果的对应属性信息作为绘图参数封装在具体的鼠标事件中，动画效果通过改变动画元素的属性信息实现；鼠标移动时调用绘图参数实时绘制相应动画元素，鼠标弹起时结束绘图，或采用键盘输入参数，把最终的绘图参数信息生成以相应操作图标显示的脚本，并按脚本的顺序排列在时间线上；所述脚本的排列顺序是指按生成脚本的先后次序递增排列，遍历执行脚本序列生成算法动画，该模块通过新建动画生成模块对象和调用动画生成模块接口操纵界面动画元素；

动画生成模块：管理所有动画元素的绘制及更新，该模块对象由可视化编辑模块自动创建后，生成画布对象并创建相应的动画元素对象管理器，对象管理器控制画布上所有动画元素属性信息的改变，并利用定时器更新画布上的动画元素，该模块调用绘图模块的绘制接口将动画元素绘制在画布上；

绘图模块：绘制所有动画元素的接口，包括图形图像、文字的动画元素对象，每个动画元素对象有自己的属性和方法，每个动画元素对象必须有自己的绘制方法，动画生成模块调用动画元素对象的绘制方法更新画布，该模块接受来自动画生成模块的调用，实现图形图像和文字的动画元素绘制。

2.根据权利要求1所述的基于Web的算法动画可视化开发系统，其特征在于：所述可视化编辑模块实现过程如下：

（1）清空画布及动画元素管理数组，新建动画生成模块对象；

（2）把用户鼠标键盘操作输入的绘图参数传给动画生成模块对象完成在画布上的实时绘制；

（3）生成以绘图参数为内容，以操作图标为显示的脚本，按先后顺序排放在时间线上，时间线上的所有脚本组成脚本序列，绘图参数之间用分隔符‘<;>’连接；

（4）遍历脚本序列的内容，调用动画生成模块对象生成算法动画；

（5）脚本可直接编辑，或进行可视化编辑：如果要调节动画时序则编辑时间线上的脚本序列，如果要修改某脚本则选择该脚本重新输入绘图参数后，转到步骤（2），修改完成则继续或结束。

3.根据权利要求1所述的基于Web的算法动画可视化开发系统，其特征在于：所述动画生成模块实现过程如下：

（1）动画生成模块由可视化编辑模块自动创建后，生成画布对象并创建相应的动画元素对象管理器；

（2）动画生成模块接收可视化编辑模块创建动画时自动生成的绘图参数脚本，解析接收的绘图参数，根据绘图参数的类别调用相应的绘图模块API完成绘制；

（3）对象管理器中的动画元素管理数组存放动画元素的最新属性信息，每新建一个动画元素，将它的属性信息放入动画元素管理数组中，每新建一个作用在动画元素上的动画效果，要实时改变动画元素在管理数组中的属性信息；

（4）通过定时器，每隔一段时间就重画一下画布，同时改变画布上动画元素对象的位置、属性信息，具体为读取动画元素管理数组中动画元素的属性信息，根据属性信息更新画布上对应动画元素的属性。

Images