[发明专利]一种基于Web的帧动画处理系统及帧动画处理方法

说明书

技术领域

本发明涉及一种帧动画处理技术，具体涉及一种基于Web的帧动画处理系统及帧动画处理方法，属于计算机技术领域。

背景技术

随着计算机技术和互联网技术的发展，为了使网页富有活力，达到吸引眼球和引导页面浏览操作的目的，越来越多的炫酷动画需要在移动端设备中被展示出来。动画是通过连续播放一系列连续画面而形成动感的视觉映像，现有的展示连续流畅的动画效果的处理方式有视频和帧动画两种，视频方式受限于无法交互，帧动画在需要交互和流畅动画的场景下就成为了必然的选择。

现有的帧动画技术方案通过不停的显示、隐藏每一帧的图片以达到连贯动画的效果。这种帧动画技术比较原始，需要将大量的图片叠放在一起，交替显示以达到动画效果。此方案需要加载大量的图片资源，而网页加载时请求越多，对服务器的负荷越大，加载页面的时间也会大大增加；页面的结构也会非常冗余，修改调试等都会非常繁琐，同时，过于零散的结构在操作动画时也不够灵活。

因此，研制一种克服现有技术中页面结构冗余、加载时间长、不方便灵活控制的帧动画处理系统和方法不但是非常必要的，也有重要的应用前景。

发明内容

本发明针对上述现有技术存在的问题做出改进，即本发明的第一个目的在于公开一种基于Web的帧动画处理系统，本发明的第二个目的在于公开一种基于该系统的帧动画处理方法。克服现有技术中页面结构冗余、加载时间长、不方便灵活控制的问题。

为了实现上述目标，本发明所采用的技术方案是：

一种基于Web的帧动画处理系统，包括若干个客户端(1)和服务端(2)，所述客户端(1)从所述服务端(2)请求数据，其特征在于，所述服务端(2)还包括：帧动画合成模块(3)，所述客户端(1)还包括：帧动画控制模块(4)；

所述帧动画合成模块(3)使用CSS精灵图技术将多张帧图合成为一张整图；

所述帧动画控制模块(4)读取被所述帧动画合成模块(3)合成的整图并播放帧动画。

前述的基于Web的帧动画处理系统，其特征在于，所述客户端(1)为计算机或移动设备。

前述的基于Web的帧动画处理系统，其特征在于，所述帧动画合成模块(3)合成的帧图是由CSS文件格式存储的帧图。

前述的基于Web的帧动画处理系统，其特征在于，所述帧动画合成模块(3)合成的整图带有被合成的各张帧图的位置数据。

前述的基于Web的帧动画处理系统，其特征在于，所述帧动画控制模块(4)包括以下至少一种帧动画的播放方式：匀速播放、加速播放、减速播放、正向播放、反向播放、局部播放、重复播放、局部重复播放。

一种基于Web的帧动画处理系统的帧动画处理方法，其特征在于，包括以下步骤：

(1)、所述服务端(2)的所述帧动画合成模块(3)引入包含位置信息的CSS帧图文件，然后使用CSS精灵图技术将多张帧图合成为一张整图；

(2)、所述客户端(1)请求所述服务端(2)的所述帧动画合成模块(3)合成的整图，所述客户端(1)的所述帧动画控制模块(4)根据整图文件新建客户端页面文档结构；

(3)、所述客户端(1)的所述帧动画控制模块(4)初始化帧动画；

(4)、所述客户端(1)的所述帧动画控制模块(4)读写属于不同帧的不同位置数据播放动画。

一种基于Web的帧动画处理系统的帧动画处理方法，其特征在于，所述帧动画控制模块(4)通过调整所述帧动画合成模块(3)合成的整图的大小调整帧动画的大小。

与现有技术相比，本发明的有益之处在于：

(1)引入了CSS精灵图技术，将大量的图片合成为一张图片，减少加载网页图片时对服务器的请求次数，降低服务器压力，同时提高了页面的加载速度，节约服务器的流量；

(2)提高页面的加载速度，由多张图片合并而成的单张图片整体文件大小会大大小于所有单个图片相加后的文件大小，整个帧动画过程只需渲染一张图片即可；

(3)整体页面结构的优化，使用本技术只需在页面上维护一个块级元素，而原始帧动画技术则每一帧都需要一个页面结构，如果有上百帧的帧动画需要执行时，页面结构就会非常冗余、繁复；

(4)可以对帧动画进行非常灵活的控制。可以对帧动画进行加速、减速、暂停、结束、重复、部分重复、正向、反向播放操作；

(5)可以同时满足移动设备端和PC端帧动画的需求；

附图说明

图1是本发明的基于Web的帧动画处理系统的系统结构示意图；

图2是图1中基于Web的帧动画处理系统的工作流程图。