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

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

【技术实现步骤摘要】

本专利技术涉及一种基于Web的算法动画可视化开发系统，属于软件可视化领域。
技术介绍
算法动画以动态交互的图形化方式来形象的表示算法的执行过程，是对算法进行可视化教学的具体表现形式。目前算法动画主要分为两类，运行于终端的算法动画系统和运行于网络的算法动画，随着网络技术的发展，运行于网络的算法动画逐渐取代了运行于终端的算法动画系统，创建运行于网络的算法动画的技术主要有Java Applet.Flash.因为Java Applet程序不能独立运行,需安装Java虚拟机解释执行Applet的字节码程序,所以运行缓慢，使用起来不方便，尤其是打开或关闭一个Java Applet程序，将占用大量系统资源，这限制了它的广泛使用。Flash是一个多媒体动画制作软件，采用矢量绘图技术的关键帧动画，通过对关键帧进行设计，可将图形、图像、音效、动画融合在一起，制作出多种动态 效果。但Flash作为一个相对封闭的技术，需经过专业的学习才能制作出比较好的动画，完成后需安装插件才能播放，Flash与网络上其他开放标准也没有完全融合的方案，如Flash中的元素与网页中其它元素进行交互需消耗大量时间和资源，而且编程上也相当不方便。Flash和很多软件一样提供给用户的是一个封装好的程序，用户不能对软件进行修改，软件为了能够符合各种用户的设计需求，不得不给软件增加很多功能，使得软件程序做得很庞大，但大部分用户只需使用其中的一个或几个功能，因此理想的情况是能够让最终用户自己定制程序，使软件能够最大限度的符合用户的需求。最终用户编程的思想在软件开发的应用主要通过是减少不必要的软件功能来满足用户的需求，并提供用户容易编程的接口，用户编程的过程中不需要或需要少量的编程方面的知识。HTML5是下一代富网络应用技术标准，与Flash相比，HTML5是完全开发的标准，它除了提供新的元素(标签)，还提供了新的应用程序编程接口(API)，使我们能够在网页上提供更多丰富的多媒体和互动功能，且无需使用专有的插件。HTML5规范中新增的绘图元素canvas,使开发人员用JavaScript脚本语言可以在canvas画布上进行一系列基于canvasAPI的图形绘制操作，如可以画布上画各种图形、处理图像、创建动画等。HTML5为Web提供了全新的框架和平台，与传统应用相比，基于Web的系统和应用(Web App)有着无须本地安装、跨平台、节省资源等多种优势，Web App已经成为目前移动互联网的一大趋势。例如传统应用想要共享算法动画作品，必须先从软件中将动画文件导出，然后上传至Web，但HTML5应用可在Web的实时画布上协作创建算法动画，省掉现在算法动画创建流程中的导出上传环节，将整个创作过程都转移到线上，直至作品完成。目前已经出现的HTML5动画平台Mugeda，是一款在线的动画编辑器，为开发人员提供类似Flash的开发环境，创建动画的操作流程与Flash基本一致，允许用户在浏览器中直接创建，共享和发布HTML5动画。同Flash类似，为了满足不同用户对动画设计的需求，Mugeda平台加载了很多算法动画不需要的功能，由于动画设计不是针对算法动画开发，所以并不能提高算法动画的开发效率，本专利技术通过引入最终用户编程思想，改进动画设计，设计中包含了算法动画常用的元素和效果，用户选择并输入绘图参数即可简单快速的创建算法动画。另一方面，Mugeda平台采用的关键帧动画概念并不符合现实动画产生的过程，本专利技术使用基于时间线脚本序列的动画实现方法，脚本序列按照动画操作步骤自动生成且按顺序排放，更符合实际上的算法动画制作过程，脚本序列采用操作图标显示，容易识别每步操作的作用，方便进行再修改。
技术实现思路
本专利技术的技术解决问题克服现有技术的不足，提供一种基于Web的算法动画可视化开发系统，使用可编程脚本能提高熟练用户的开发效率和代码复用性，能够很好的应用于算法教学或实验中。本专利技术的技术解决方案一种基于Web的算法动画可视化开发系统，自上而下依次包括可视化编辑模块，动画生成模块和绘图模块，上层部分可以调用邻近的下层对象，可视化编辑模块通过新建动画生成模块对象和调用动画生成模块接口来操作界面动画元素对象，动画生成模块通过调用绘图模块接口完成动画元素的绘制及更新。 可视化编辑模块把算法动画中常用的动画元素和动画效果的对应属性信息作为绘图参数封装在具体的鼠标事件中，动画效果通过改变动画元素的属性信息实现；鼠标移动时调用绘图参数实时绘制相应动画元素，鼠标弹起时结束绘图，或采用键盘输入参数，把最终的绘图参数信息生成以相应操作图标显示的脚本，并按脚本的顺序排列在时间线上；所述脚本的排列顺序是指按生成脚本的先后次序递增排列，遍历执行脚本序列生成算法动画，该模块通过新建动画生成模块对象和调用动画生成模块接口操纵界面动画元素；动画生成模块管理所有动画元素的绘制及更新，该模块对象由可视化编辑模块自动创建后，生成画布对象并创建相应的动画元素对象管理器，对象管理器控制画布上所有动画元素属性信息的改变，并利用定时器更新画布上的动画元素，该模块调用绘图模块的绘制接口将动画元素绘制在画布上；绘图模块绘制所有动画元素的接口，包括图形图像、文字的动画元素对象，每个动画元素对象有自己的属性和方法，每个动画元素对象必须有自己的绘制方法，动画生成模块调用动画元素对象的绘制方法更新画布，该模块接受来自动画生成模块的调用，实现图形图像和文字的动画元素绘制。所述的可视化编辑模块实现过程如下(I)清空画布及动画元素管理数组，新建动画生成模块对象；(2)把用户鼠标键盘操作输入的绘图参数传给动画生成模块对象完成在画布上的实时绘制；(3)生成以绘图参数为内容，以操作图标为显示的脚本，按先后顺序排放在时间线上，时间线上的所有脚本组成脚本序列，绘图参数之间用分隔符‘’连接；(4)遍历脚本序列的内容，调用动画生成模块对象生成算法动画；(5)脚本可直接编辑，或进行可视化编辑如果要调节动画时序则编辑时间线上的脚本序列，如果要修改某脚本则选择该脚本重新输入绘图参数后，转到步骤(2)，修改完成则继续或结束。所述的动画生成模块实现过程如下(I)动画生成模块由可视化编辑模块自动创建后，生成画布对象并创建相应的动画元素对象管理器；(2)动画生成模块接收可视化编辑模块创建动画时自动生成的绘图参数脚本，解析接收的绘图参数，根据绘图参数的类别调用相应的绘图模块API完成绘制；(3)对象管理器中的动画元素管理数组存放动画元素的最新属性信息，每新建一个动画元素，将它的属性信息放入 动画元素管理数组中，每新建一个作用在动画元素上的动画效果，要实时改变动画元素在管理数组中的属性信息；(4)通过定时器，每隔一段时间就重画一下画布，同时改变画布上动画元素对象的位置、属性信息，具体为读取动画元素管理数组中动画元素的属性信息，根据属性信息更新画布上对应动画元素的属性。本专利技术与现有技术相比的优点在于本专利技术包含了算法动画常用的元素，使用自动记录动画操作中的绘图参数作为脚本顺序添加在时间线上的算法动画实现方法，使在网页上创建基于时间线脚本序列的算法动画更便捷，脚本序列与动画操作相对应且自动生成，并支持最终用户编程，用户可通过直接编辑或可视化编辑的方式改变脚本，从而改变算法动本文档来自技高网...

【技术保护点】
一种基于Web的算法动画可视化开发系统，其特征在于包括：可视化编辑模块：把算法动画中常用的动画元素和动画效果的对应属性信息作为绘图参数封装在具体的鼠标事件中，动画效果通过改变动画元素的属性信息实现；鼠标移动时调用绘图参数实时绘制相应动画元素，鼠标弹起时结束绘图，或采用键盘输入参数，把最终的绘图参数信息生成以相应操作图标显示的脚本，并按脚本的顺序排列在时间线上；所述脚本的排列顺序是指按生成脚本的先后次序递增排列，遍历执行脚本序列生成算法动画，该模块通过新建动画生成模块对象和调用动画生成模块接口操纵界面动画元素；动画生成模块：管理所有动画元素的绘制及更新，该模块对象由可视化编辑模块自动创建后，生成画布对象并创建相应的动画元素对象管理器，对象管理器控制画布上所有动画元素属性信息的改变，并利用定时器更新画布上的动画元素，该模块调用绘图模块的绘制接口将动画元素绘制在画布上；绘图模块：绘制所有动画元素的接口，包括图形图像、文字的动画元素对象，每个动画元素对象有自己的属性和方法，每个动画元素对象必须有自己的绘制方法，动画生成模块调用动画元素对象的绘制方法更新画布，该模块接受来自动画生成模块的调用，实现图形图像和文字的动画元素绘制。...

【技术特征摘要】

【专利技术属性】
技术研发人员：周忠，许冉，戴松，吴威，赵沁平，
申请(专利权)人：北京航空航天大学，
类型：发明
国别省市：