动画播放方法、装置及服务器

文档序号:96542 发布日期:2021-10-12 浏览:26次 >En<

阅读说明:本技术 动画播放方法、装置及服务器 (Animation playing method and device and server ) 是由 杨泽伟 于 2021-07-07 设计创作,主要内容包括:本发明提供了一种动画播放方法、装置及服务器,包括:获取待播放的逐帧动画,并从逐帧动画所包含的多张帧位图中确定目标帧位图;基于逐帧动画中每张帧位图相对于目标帧位图的差异部位,分别生成背景图像和差异图像;其中,背景图像包括每张帧位图之间的非差异部位,差异图像包括每张帧位图相对于目标帧位图的差异部位;将背景图像与差异图像叠加,并控制差异图像相对于背景图像移动,以在差异图像移动过程中将非差异部位分别与每个差异部位进行组合,实现逐帧动画的播放。本发明可以有效改善Web逐帧动画播放时的前端性能问题。(The invention provides an animation playing method, device and server, comprising: acquiring a frame-by-frame animation to be played, and determining a target frame bitmap from a plurality of frame bitmaps contained in the frame-by-frame animation; respectively generating a background image and a difference image based on the difference part of each frame bitmap relative to a target frame bitmap in the frame-by-frame animation; the background image comprises non-difference parts between each frame bitmap, and the difference image comprises difference parts of each frame bitmap relative to the target frame bitmap; and superposing the background image and the difference image, and controlling the difference image to move relative to the background image so as to combine the non-difference part with each difference part respectively in the moving process of the difference image, thereby realizing the playing of the animation frame by frame. The invention can effectively improve the front-end performance problem of Web frame-by-frame animation playing.)

动画播放方法、装置及服务器

技术领域

本发明涉及渲染

技术领域

,尤其是涉及一种动画播放方法、装置及服务器。

背景技术

目前,Web(World Wide Web,全球局域网)逐帧动画作为一种小而美的动画方案在近几年各大网站里得到大量的应用,Web逐帧动画比视频更加小巧且比GIF(GraphicsInterchange Format,图形交换格式)更加精致,使得其在网页视觉动态里占据一席之地。但是,若Web逐帧动画播放时间较长或播放区域过大,Web逐帧动画播放所需的帧位图数量或帧位图尺寸均将以量级增长,此时必将引发诸多前端性能问题,诸如,消耗网络资源的带宽较多、页面渲染性能损耗较大、引发JS(JavaScript)线程阻塞、Web逐帧动画打包体积较大等诸多问题。

发明内容

有鉴于此,本发明的目的在于提供一种动画播放方法、装置及服务器,可以有效改善Web逐帧动画播放时的前端性能问题。

第一方面,本发明实施例提供了一种动画播放方法,包括:获取待播放的逐帧动画,并从所述逐帧动画所包含的多张帧位图中确定目标帧位图;基于所述逐帧动画中每张所述帧位图相对于所述目标帧位图的差异部位,分别生成背景图像和差异图像;其中,所述背景图像包括每张所述帧位图之间的非差异部位,所述差异图像包括每张所述帧位图相对于所述目标帧位图的差异部位;将所述背景图像与所述差异图像叠加,并控制所述差异图像相对于所述背景图像移动,以在所述差异图像移动过程中将所述非差异部位分别与每个所述差异部位进行组合,实现所述逐帧动画的播放。

在一种实施方式中,所述基于所述逐帧动画中每张所述帧位图相对于所述目标帧位图的差异部位,分别生成背景图像和差异图像的步骤,包括:将所述逐帧动画中每张所述帧位图均与所述目标帧位图进行对比,确定每张所述帧位图之间的非差异部位,并基于所述非差异部位生成背景图像;将所述逐帧动画中每张所述帧位图均与所述背景图像进行对比,确定每张所述帧位图相对于所述背景图像的差异部位,并基于每张所述帧位图对应的所述差异部位生成差异图像。

在一种实施方式中,所述将所述逐帧动画中每张所述帧位图均与所述目标帧位图进行对比,确定每张所述帧位图之间的非差异部位,并基于所述非差异部位生成背景图像的步骤,包括:对于所述逐帧动画中的首张帧位图,将所述首张帧位图与所述目标帧位图进行对比,并基于所述首张帧位图相对于所述目标帧位图的非差异部位,调整所述目标帧位图的像素数据,得到所述首张帧位图对应的中间参照图;对于所述逐帧动画中的其余帧位图,基于所述逐帧动画的位图顺序,将该帧位图与上一张帧位图对应的中间参照图进行对比,并基于该帧位图相对于所述上一张帧位图对应的中间参照图的非差异部位,调整所述上一张帧位图对应的中间参照图的像素数据,得到该帧位图对应的中间参照图;将所述逐帧动画中最后一张帧位图对应的中间参照图,确定为背景图像。

在一种实施方式中,所述基于所述首张帧位图相对于所述目标帧位图的非差异部位,调整所述目标帧位图的像素数据,得到所述首张帧位图对应的中间参照图的步骤,包括:利用指定数值替换所述目标帧位图中所述非差异部位之外的像素点的像素数据,得到所述首张帧位图对应的中间参照图。

在一种实施方式中,所述将所述逐帧动画中每张所述帧位图均与所述背景图像进行对比,确定每张所述帧位图相对于所述背景图像的差异部位的步骤,包括:对于所述逐帧动画中的每张所述帧位图,将该帧位图转换为第一文件数组,以及将所述背景图像转换为第二文件数组;其中,所述第一文件数组包括所述该帧位图中每个像素点的像素数据,所述第二文件数组包括所述背景图像中每个像素点的像素数据;判断该帧位图和所述背景图像中同一位置处的像素点对应的像素数据是否一致;如果否,确定该像素点位于所述该帧位图相对于所述背景图像的差异部位。

在一种实施方式中,所述将该帧位图转换为第一文件数组,以及将所述背景图像转换为第二文件数组的步骤,包括:将该帧位图和所述背景图像均转换为文本对象;利用第一指定函数将该帧位图对应的文本对象转换为第一文件数组,以及利用所述第一指定函数将所述背景图像对应的文本对象转换为第二文件数组。

在一种实施方式中,所述基于每张所述帧位图对应的所述差异部位生成差异图像的步骤,包括:对于所述逐帧动画中的每张所述帧位图,基于该帧位图对应的差异部位生成该帧位图对应的差异子图像;按照所述逐帧动画的位图顺序,将每张所述帧位图对应的差异子图像进行拼接,得到差异图像。

在一种实施方式中,所述基于该帧位图对应的差异部位生成该帧位图对应的差异子图像的步骤,包括:利用指定数值替换该帧位图中所述差异部位之外的像素点的像素数据,得到该帧位图对应的差异子图像。

在一种实施方式中,所述控制所述差异图像相对于所述背景图像移动的步骤,包括:调用第二指定函数;其中,所述第二指定函数包括step函数;通过所述第二指定函数控制所述差异图像相对于所述背景图像移动。

在一种实施方式中,所述控制所述差异图像相对于所述背景图像移动的步骤,还包括:将所述差异子图像的图像尺寸确定为移动单位;按照所述移动单位控制所述差异图像相对于所述背景图像移动。

在一种实施方式中,所述差异子图像的图像尺寸与所述背景图像的图像尺寸一致。

在一种实施方式中,所述从所述逐帧动画所包含的多张帧位图中确定目标帧位图的步骤,包括:按照所述逐帧动画的位图顺序,将所述逐帧动画中的首张帧位图确定为目标帧位图。

第二方面,本发明实施例还提供一种动画播放装置,包括:目标确定模块,用于获取待播放的逐帧动画,并从所述逐帧动画所包含的多张帧位图中确定目标帧位图;图像生成模块,用于基于所述逐帧动画中每张所述帧位图相对于所述目标帧位图的差异部位,分别生成背景图像和差异图像;其中,所述背景图像包括每张所述帧位图之间的非差异部位,所述差异图像包括每张所述帧位图相对于所述目标帧位图的差异部位;动画播放模块,用于将所述背景图像与所述差异图像叠加,并控制所述差异图像相对于所述背景图像移动,以在所述差异图像移动过程中将所述非差异部位分别与每个所述差异部位进行组合,实现所述逐帧动画的播放。

第三方面,本发明实施例还提供一种服务器,包括处理器和存储器;所述存储器上存储有计算机程序,所述计算机程序在被所述处理器运行时执行如第一方面提供的任一项所述的方法。

第四方面,本发明实施例还提供一种计算机存储介质,用于储存为第一方面提供的任一项所述方法所用的计算机软件指令。

本发明实施例提供的一种动画播放方法、装置及服务器,首先获取逐帧动画,并从逐帧动画所包含的多张帧位图中确定目标帧位图,然后基于逐帧动画中每张帧位图相对于目标帧位图的差异部位,分别生成差异图像和背景图像,再将差异图像与背景图像叠加,并控制差异图像相对于背景图像移动,以在差异图像移动过程中将非差异部位分别与每个差异部位进行组合,实现逐帧动画的播放。上述方法中,生成的差异图像包括有每张帧位图相对于目标帧位图的差异部位,生成的背景图像包括有每张帧位图之间的非差异部位,将差异图像中某张帧位图相对于目标帧位图的差异部位与背景图像中的非差异部位组合后即可与该帧位图一致,通过控制差异图像相对于背景图像移动,将不同帧位图相对于目标帧位图的差异部位与非差异部位进行组合,即可实现逐帧动画的播放,本发明实施例间接减少了帧位图中非差异部位的渲染时间和图像像素体积,达到动态去重压缩的效果,从而可以有效改善Web逐帧动画播放时的前端性能问题,进而可以达到降低网络资源带宽的消耗、降低页面渲染性能的损耗、缓解JS线程阻塞问题以及缩小逐帧动画打包体积等效果。

本发明的其他特征和优点将在随后的说明书中阐述,并且,部分地从说明书中变得显而易见,或者通过实施本发明而了解。本发明的目的和其他优点在说明书、权利要求书以及附图中所特别指出的结构来实现和获得。

为使本发明的上述目的、特征和优点能更明显易懂,下文特举较佳实施例,并配合所附附图,作详细说明如下。

附图说明

为了更清楚地说明本发明

具体实施方式

或现有技术中的技术方案,下面将对具体实施方式或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图是本发明的一些实施方式,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。

图1为本发明实施例提供的一种动画播放方法的流程示意图;

图2为本发明实施例提供的一种逐帧动画的示意图;

图3为本发明实施例提供的另一种逐帧动画的示意图;

图4为本发明实施例提供的一种动画播放装置的结构示意图;

图5为本发明实施例提供的一种服务器的结构示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚,下面将结合实施例对本发明的技术方案进行清楚、完整地描述,显然,所描述的实施例是本发明一部分实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都属于本发明保护的范围。

Web逐帧动画是在时间轴的每一帧上绘制不同内容并使之连续播放组成动画,可看作是一个断续的动画片段,通过时间流逝将多个动画片段串联在一起。浏览器将Web逐帧动画的每一张帧位图按顺序播放成片段,可认为Web逐帧动画是一个类似GIF的动画。当构建一个Web逐帧动画所需的帧位图过多时,必将引起诸多前端性能问题,从网络层面和渲染层面两方面出发,可能引发如下问题:

(1)帧位图过多将会引发多次HTTP(Hypertext Transfer Protocol,超文本传输协议)请求,从而过多消耗网络资源的带宽。

(2)帧位图过大将会引起页面渲染性能损耗,动画运行过程中不断回流重绘将引发浏览器内部的渲染线程操作负荷,从而降低动画运行的FPS(Frames Per Second,每秒传输帧数),从而使得逐帧动画播放卡顿。

(3)相关技术中提出,使用setInterval()函数操作动画的间隔播放,即控制动画执行,从浏览器事件循环角度来说,意味着每个动画均将新建一个宏任务,而宏任务作为一个阻塞任务在执行过程中会产生多个微任务,若同一页面中存在多个Web逐帧动画会引发JS线程阻塞,此时用户将看到一个Web逐帧动画加载完而其他Web逐帧动画还未开始加载。

(4)Web逐帧动画包含的帧位图越多,则Web逐帧动画打包体积越大。

基于此,本发明实施提供了一种动画播放方法、装置及服务器,可以有效改善Web逐帧动画播放时的前端性能问题。

为便于对本实施例进行理解,首先对本发明实施例所公开的一种动画播放方法进行详细介绍,参见图1所示的一种动画播放方法的流程示意图,该方法主要包括以下步骤S102至步骤S106:

步骤S102,获取待播放的逐帧动画,并从逐帧动画所包含的多张帧位图中确定目标帧位图。其中,逐帧动画是指在时间轴的每一帧上绘制不同内容并使之连续播放组成动画,每一帧都对应一张图像,也即上述帧位图,且每张帧位图的类型和尺寸均相同。在一种实施方式中,可从逐帧动画所包含的多张帧位图中选择任一帧位图作为目标帧位图,例如,将逐帧动画中的首张帧位图确定为目标帧位图,目标帧位图可以用作参照图,用于与逐帧动画中每张帧位图进行对比。

步骤S104,基于逐帧动画中每张帧位图相对于目标帧位图的差异部位,分别生成背景图像和差异图像。其中,背景图像包括每张帧位图之间的非差异部位,差异图像包括每张帧位图相对于目标帧位图的差异部位。其中,帧位图相对于目标帧位图的差异部位可以理解为在该帧位图和目标帧位图相同位置处所表征的内容不同的区域,帧位图相对于目标帧位图的非差异部位可以理解为在该帧位图和目标帧位图相同位置处所表征的内容相同的区域。在一种实施方式中,可以通过遍历该帧位图和目标帧位图中每个像素点的像素数据,判断在两张帧位图中该像素点的像素数据是否相同,如果否,则确定该像素点位于差异部位。另外,背景图像中除非差异部位之外的区域均为透明区域,差异图像中除每个差异部位之外的区域均为透明区域。

例如,逐帧动画中包含三张帧位图,帧位图A1、帧位图A2和帧位图A3,且帧位图A1为目标帧位图,将帧位图A2和帧位图A3分别与帧位图A1进行对比,确定帧位图A1、帧位图A2和帧位图A3之间的非差异部位,然后基于该非差异部位生成背景图像,然后再将帧位图A1、帧位图A2和帧位图A3分别与背景图像进行比对,确定帧位图A1相对于背景图像的差异部位、确定帧位图A2相对于背景图像的差异部位和帧位图A3相对于背景图像的差异部位,基于各个差异部位生成差异图像。

步骤S106,将背景图像与差异图像叠加,并控制差异图像相对于背景图像移动,以在差异图像移动过程中将非差异部位分别与每个差异部位进行组合,实现逐帧动画的播放。在一种实施方式中,由于背景图像中除非差异部位之外的区域均为透明区域,差异图像中除每个差异部位之外的区域均为透明区域,因此将背景图像与差异图像叠加,可以将背景图像中的非差异部位与差异图像中的差异部位组合,从而组合后所包含的内容将与原帧位图一致。例如,将帧位图A1相对于背景图像的差异部位与背景图像中的非差异部位组合后的内容将与原帧位图A1一致。

可选的,可以基于逐帧动画的位图顺序和图像尺寸控制差异图像相对于背景图像移动,例如,首先将帧位图A1相对于背景图像的差异部位与背景图像中的非差异部位组合,然后控制差异图像相对于背景图像移动,使帧位图A2相对于背景图像的差异部位与背景图像中的非差异部位组合,继续控制差异图像相对于背景图像移动,使帧位图A3相对于背景图像的差异部位与背景图像中的非差异部位组合,从而实现逐帧动画的播放。

本发明实施例提供的上述动画播放方法,生成的差异图像包括有每张帧位图相对于目标帧位图的差异部位,生成的背景图像包括有每张帧位图之间的非差异部位,将差异图像中某张帧位图相对于目标帧位图的差异部位与背景图像中的非差异部位组合后即可与该帧位图一致,通过控制差异图像相对于背景图像移动,将不同帧位图相对于目标帧位图的差异部位与非差异部位进行组合,即可实现逐帧动画的播放,本发明实施例间接减少了帧位图中非差异部位的渲染时间和图像像素体积,达到动态去重压缩的效果,从而可以有效改善Web逐帧动画播放时的前端性能问题,进而可以达到降低网络资源带宽的消耗、降低页面渲染性能的损耗、缓解JS线程阻塞问题以及缩小逐帧动画打包体积等效果。

在一实施例中,本发明实施例提供了一种从逐帧动画所包含的多张帧位图中确定目标帧位图的实施方式,可以按照逐帧动画的位图顺序,将逐帧动画中的首张帧位图确定为目标帧位图。其中,位图顺序也即逐帧动画中每张帧图像的播放顺序。示例性的,参见图2所示的一种逐帧动画的示意图,逐帧动画包括四张帧位图,对逐帧动画的每张帧位图按位图顺序进行命名,例如命名为“time-1.png”、“time-2.png”、“time-3.png”和“time-4.png”,且每张帧位图的尺寸完全一致,然后将帧位图time-1.png确定为目标帧位图。可选的,也可从多张帧位图中选择其他帧位图作为目标帧位图,诸如选择帧位图time-2.png作为目标帧位图,具体可基于实际需求进行选择。

为便于理解,本发明实施例还提供了一种基于逐帧动画中每张帧位图相对于目标帧位图的差异部位,分别生成背景图像和差异图像的实施方式,参见如下步骤1至步骤2:

步骤1,将逐帧动画中每张帧位图均与目标帧位图进行对比,确定每张帧位图之间的非差异部位,并基于非差异部位生成背景图像。在一种实施方式中,可以参见如下步骤1.1至步骤1.3:

步骤1.1,对于逐帧动画中的首张帧位图,将首张帧位图与目标帧位图进行对比,并基于首张帧位图相对于目标帧位图的非差异部位,调整目标帧位图的像素数据,得到首张帧位图对应的中间参照图。在一种实施方式中,可以将帧位图time-1.png和目标帧位图均转换为文本对象(例如,canvas对象),再利用第一指定函数(例如,canvas的getImageData()函数)将帧位图time-1.png对应的文本对象转换为第三文件数组,以及将目标帧位图对应的文本对象转换为第四文件数组,第三文件数组中包含有帧位图time-1.png中每个像素点对应的像素数据,第四文件数组中包含有模板帧位图中每个像素点对应的像素数据,通过比对第三文件数组和第四文件数组中相同位置处像素点对应的像素数据,若像素数据完全一致则可以确定该位置处的像素点是否处于非差异部位。遍历第三文件数组和第四文件数组中每个像素点对应的像素数据,即可确定出帧位图time-1.png相对于目标帧位图的非差异部位。

在确定出帧位图time-1.png相对于目标帧位图的非差异部位后,即可调整目标帧位图的像素数据,得到首张帧位图对应的中间参照图,在一种可选的实施方式中,利用指定数值替换目标帧位图中非差异部位之外的像素点的像素数据,得到首张帧位图对应的中间参照图,其中,指定数值可以为“0”。在一种实施方式中,目标帧位图中每个像素点均对应一个像素数据,可以保留目标帧位图中非差异部位内像素点的像素数据,并利用“0”替换目标帧位图中非差异部位之外的像素点的像素数据,此时得到的中间参照图中将保留非差异部位,且其余区域均为透明区域。

步骤1.2,对于逐帧动画中的其余帧位图,基于逐帧动画的位图顺序,将该帧位图与上一张帧位图对应的中间参照图进行对比,并基于该帧位图相对于上一张帧位图对应的中间参照图的非差异部位,调整上一张帧位图对应的中间参照图的像素数据,得到该帧位图对应的中间参照图。例如,帧位图time-2.png与首张帧位图对应的中间参照图M1进行比对,确定出帧位图time-2.png相对于中间参照图M1的非差异部位,从而将中间参照图M1中除非差异部位之外的区域置为透明区域,得到帧位图time-2.png对应的中间参照图M2;同理,依次确定出帧位图time-3.png对应的中间参照图M3、帧位图time-4.png对应的中间参照图M4。在具体实现时,可参照前述步骤1.1中生成首张帧位图对应的中间参照图的过程,本发明实施例在此不再赘述。

步骤1.3,将逐帧动画中最后一张帧位图对应的中间参照图,确定为背景图像。在实际应用中,可以将帧位图time-4.png对应的中间参照图M4确定为背景图像,该背景图像中仅包括所有帧位图中的非差异部位(即相同部位)。

在一种可选的实施方式中,可以复制帧位图time-1.png生成一张副本图像time-0.png,将副本图像time-0.png作为目标帧位图,并与其余帧位图进行比对,副本图像每次与其余帧位图进行比对时只保留非差异部位,直至对比完所有帧位图,即可得到只包含有全部帧位图非差异部位的背景图像。

步骤2,将逐帧动画中每张帧位图均与背景图像进行对比,确定每张帧位图相对于背景图像的差异部位,并基于每张帧位图对应的差异部位生成差异图像。在一种实施方式中,可以参见如下步骤2.1至步骤2.5:

步骤2.1,对于逐帧动画中的每张帧位图,将该帧位图转换为第一文件数组,以及将背景图像转换为第二文件数组。其中,第一文件数组包括该帧位图中每个像素点的像素数据,第二文件数组包括背景图像中每个像素点的像素数据,像素数据可以包括颜色通道值和透明度通道值(Alpha),颜色通道值又可以包括红通道值(Red)、绿通道值(Green)、蓝通道值(Blue)。

在一种实施方式中,可以将该帧位图和背景图像均转换为文本对象,然后利用第一指定函数将该帧位图对应的文本对象转换为第一文件数组,以及利用第一指定函数将背景图像对应的文本对象转换为第二文件数组。例如,将该帧位图和背景图像转换为canvas对象,分别标记为A和B。通过canvas的getImageData()函数将A和B分别转换成一个文件数组,分别标记为第一文件数组Fa和第二文件数组Fb。两个文件数组的形式均为一个有规律的数组,其中,数组形式可以为[R1,G1,B1,A1,R2,G2,B2,A2,…]。数组里从索引为0开始往右遍历,每四个数据就组成一个像素点的像素数据,如[R1,G1,B1,A1]和[R2,G2,B2,A2],文件数组包括上述红通道值(Red)、绿通道值(Green)、蓝通道值(Blue)、透明度通道值(Alpha)。

步骤2.2,判断该帧位图和背景图像中同一位置处的像素点对应的像素数据是否一致。在实际应用中,透明像素数据为[R,G,B,0],可能是[0,0,0,0]也可能是[255,255,255,0],非透明像素数据为[R,G,B,1]。在此基础上,可以同时遍历该帧位图和背景图像,由于该帧位图和背景图像的尺寸完全一致,因此每次遍历指针指到该帧位图的某个位置,那么该位置也对应背景图像的同一个位置,此时分别记两个位置为Pa和Pb。当Pa完全等于Pb时(R1=R2、G1=G2、B1=B2、A1=A2),即确定同一位置处的像素点对应的颜色通道值一致;当Pa不完全等于Pb时,确定同一位置处的像素点对应的颜色通道值不一致。

步骤2.3,如果否,确定该像素点位于该帧位图相对于背景图像的差异部位。

步骤2.4,对于逐帧动画中的每张帧位图,基于该帧位图对应的差异部位生成该帧位图对应的差异子图像。在一种实施方式中,利用指定数值替换该帧位图中差异部位之外的像素点的像素数据,并保留该帧位图中差异部位的像素点的像素数据,得到该帧位图对应的差异子图像。当Pa完全等于Pb时,则两者像素数据为非差异部位,使用透明值填充Pb成为透明区域,即将[R2,G2,B2,A2]变成[0,0,0,0]。当Pa不完全等于Pb时,则两者像素数据为差异部位,[R2,G2,B2,A2]保留。当该帧位图和背景图像同时遍历完成,背景图像将只剩下差异部位,其他非差异部位全部被填充成透明区域,此时即可得到差异子图像。对逐帧动画中每张帧图像均进行上述处理,即可得到每张帧图像分别对应的差异子图像,诸如图3所示的另一种逐帧动画的示意图。其中,差异子图像的图像尺寸与背景图像的图像尺寸一致,且与原帧位图的图像尺寸一致。

步骤2.5,按照逐帧动画的位图顺序,将每张帧位图对应的差异子图像进行拼接,得到差异图像。在一种实施方式中,可以从首张帧位图对应的差异子图像开始,依次从左向右合并成一张长图,该长图即为上述差异图像,该差异图像包含了从首张帧位图开始到最后一张帧位图与背景图像对比的差异部位。

本发明实施例通过上述步骤1至2,将差异化精确到像素,使得Web逐帧动画最细微的差异细节都得以保留,为后期的动画过渡效果提供稳定的输出。

为便于对上述步骤S108进行理解,本发明实施例还提供了以下控制差异图像相对于背景图像移动的实施方式,参见如下方式一至方式二:

方式一,调用第二指定函数,然后通过第二指定函数控制差异图像相对于背景图像移动。其中,第二指定函数包括step函数。在一种实施方式中,通过CSS Animation将差异图像固定在背景图像上,通过step()函数逐帧播放产生动画。本发明实施例巧妙利用到CSS(Cascading Style Sheets,层叠样式表)动画依托浏览器的GPU(graphics processingunit,图形处理器)性能自行优化图层。

方式二,将差异子图像的图像尺寸确定为移动单位,然后按照移动单位控制差异图像相对于背景图像移动。在一种实施方式中,在逐帧动画的播放过程中,按差异子图像的图像尺寸移动差异图像,例如,首先将帧位图time-1.png对应的差异子图像固定在背景图像上,按照移动单位控制差异图像相对于背景图像移动,使帧位图time-2.png对应的差异子图像固定在背景图像上,直至将帧位图time-4.png对应的差异子图像固定在背景图像上,实现整个逐帧动画的播放。

本发明实施例提供过的上述动画播放方法,实际上是以背景图像为背景底,顺序从左到右切换差异部位的显示从而产生动画。整个动画播放过程没有本质的改变,将每张帧位图那些相同部位抹除并使用透明填充成透明区域,从而间接减少帧位图相同部位的渲染时间和图像像素体积,达到动态去重(重复部位)压缩(图像体积)的效果。整合核心思路是抽离图像的差异部位,图像的相同部位不变且固定显示,整个动画过程就是在播放那些差异部位,通过切换差异部位从而形成动画效果。

在实际应用中,从前端性能优化角度来看,优化上百行代码都不及优化一张帧位图的体积,基于此,本发明实施例提供了上述动画播放方法,在播放Web逐帧动画前,可动态为Web逐帧动画所有帧位图做去重压缩处理,从而有效降低Web逐帧动画所有帧位图的体积,还可以提高动画执行性能。

综上所述,本发明实施例提供的动画播放方法,至少具有以下特点:

(1)播放相同的Web逐帧动画,本发明实施例所优化的最终图像体积会更小更轻便,从而符合前端性能优化的规范,为页面的执行开源节流。

(2)本发明实施例整体实现方案使用到类似Photoshop图层叠加的方式展示动画,不是一张一张帧位图在同一图层切换产生动画效果,而是将不变部位固定为一个图层,将变动部位提升成一个新图层,在新图层里变化可变部位,有效较少图层的回流重绘影响,间接加快浏览器渲染性能。

(3)本发明实施例提供的动画播放方法,只有可变部位的图层在不变渲染变化,达到一种局部修改视图的效果,而无需整张图层修改,从而提升动画的流畅性,即使FPS下降对其影响也相对较小。

(4)本发明实施例将逐帧动画的可变部位依据原有逐帧动画的顺序合并成一张长图,有效将多张图像请求合并。以上述为例,不合并时需请求4张图像,合并后只需请求2张图像(一张背景图像和一张差异图像),有效减少HTTP请求,节省服务器带宽。

对于前述实施例提供的动画播放方法,本发明实施例提供了一种动画播放装置,参见图4所示的一种动画播放装置的结构示意图,该装置主要包括以下部分:

目标确定模块402,用于获取待播放的逐帧动画,并从逐帧动画所包含的多张帧位图中确定目标帧位图;

图像生成模块404,用于基于逐帧动画中每张帧位图相对于目标帧位图的差异部位,分别生成背景图像和差异图像;其中,背景图像包括每张帧位图之间的非差异部位,差异图像包括每张帧位图相对于目标帧位图的差异部位;

动画播放模块406,用于将背景图像与差异图像叠加,并控制差异图像相对于背景图像移动,以在差异图像移动过程中将非差异部位分别与每个差异部位进行组合,实现逐帧动画的播放。

本发明实施例提供的上述动画播放装置,生成的差异图像包括有每张帧位图相对于目标帧位图的差异部位,生成的背景图像包括有每张帧位图之间的非差异部位,将差异图像中某张帧位图相对于目标帧位图的差异部位与背景图像中的非差异部位组合后即可与该帧位图一致,通过控制差异图像相对于背景图像移动,将不同帧位图相对于目标帧位图的差异部位与非差异部位进行组合,即可实现逐帧动画的播放,本发明实施例间接减少了帧位图中非差异部位的渲染时间和图像像素体积,达到动态去重压缩的效果,从而可以有效改善Web逐帧动画播放时的前端性能问题,进而可以达到降低网络资源带宽的消耗、降低页面渲染性能的损耗、缓解JS线程阻塞问题以及缩小逐帧动画打包体积等效果。

在一种实施方式中,图像生成模块404还用于:将逐帧动画中每张帧位图均与目标帧位图进行对比,确定每张帧位图之间的非差异部位,并基于非差异部位生成背景图像;将逐帧动画中每张帧位图均与背景图像进行对比,确定每张帧位图相对于背景图像的差异部位,并基于每张帧位图对应的差异部位生成差异图像。

在一种实施方式中,图像生成模块404还用于:对于逐帧动画中的首张帧位图,将首张帧位图与目标帧位图进行对比,并基于首张帧位图相对于目标帧位图的非差异部位,调整目标帧位图的像素数据,得到首张帧位图对应的中间参照图;对于逐帧动画中的其余帧位图,基于逐帧动画的位图顺序,将该帧位图与上一张帧位图对应的中间参照图进行对比,并基于该帧位图相对于上一张帧位图对应的中间参照图的非差异部位,调整上一张帧位图对应的中间参照图的像素数据,得到该帧位图对应的中间参照图;将逐帧动画中最后一张帧位图对应的中间参照图,确定为背景图像。

在一种实施方式中,图像生成模块404还用于:利用指定数值替换目标帧位图中非差异部位之外的像素点的像素数据,得到首张帧位图对应的中间参照图。

在一种实施方式中,图像生成模块404还用于:对于逐帧动画中的每张帧位图,将该帧位图转换为第一文件数组,以及将背景图像转换为第二文件数组;其中,第一文件数组包括该帧位图中每个像素点的像素数据,第二文件数组包括背景图像中每个像素点的像素数据;判断该帧位图和背景图像中同一位置处的像素点对应的像素数据是否一致;如果否,确定该像素点位于该帧位图相对于背景图像的差异部位。

在一种实施方式中,图像生成模块404还用于:将该帧位图转换为第一文件数组,以及将背景图像转换为第二文件数组的步骤,包括:将该帧位图和背景图像均转换为文本对象;利用第一指定函数将该帧位图对应的文本对象转换为第一文件数组,以及利用第一指定函数将背景图像对应的文本对象转换为第二文件数组。

在一种实施方式中,图像生成模块404还用于:对于逐帧动画中的每张帧位图,基于该帧位图对应的差异部位生成该帧位图对应的差异子图像;按照逐帧动画的位图顺序,将每张帧位图对应的差异子图像进行拼接,得到差异图像。

在一种实施方式中,图像生成模块404还用于:利用指定数值替换该帧位图中差异部位之外的像素点的像素数据,得到该帧位图对应的差异子图像。

在一种实施方式中,动画播放模块406还用于:调用第二指定函数;其中,第二指定函数包括step函数;通过第二指定函数控制差异图像相对于背景图像移动。

在一种实施方式中,动画播放模块406还用于:将差异子图像的图像尺寸确定为移动单位;按照移动单位控制差异图像相对于背景图像移动。

在一种实施方式中,差异子图像的图像尺寸与背景图像的图像尺寸一致。

在一种实施方式中,目标确定模块402还用于:按照逐帧动画的位图顺序,将逐帧动画中的首张帧位图确定为目标帧位图。

本发明实施例所提供的装置,其实现原理及产生的技术效果和前述方法实施例相同,为简要描述,装置实施例部分未提及之处,可参考前述方法实施例中相应内容。

本发明实施例提供了一种服务器,具体的,该服务器包括处理器和存储装置;存储装置上存储有计算机程序,计算机程序在被所述处理器运行时执行如上所述实施方式的任一项所述的方法。

图5为本发明实施例提供的一种服务器的结构示意图,该服务器100包括:处理器50,存储器51,总线52和通信接口53,所述处理器50、通信接口53和存储器51通过总线52连接;处理器50用于执行存储器51中存储的可执行模块,例如计算机程序。

其中,存储器51可能包含高速随机存取存储器(RAM,Random Access Memory),也可能还包括非不稳定的存储器(non-volatile memory),例如至少一个磁盘存储器。通过至少一个通信接口53(可以是有线或者无线)实现该系统网元与至少一个其他网元之间的通信连接,可以使用互联网,广域网,本地网,城域网等。

总线52可以是ISA总线、PCI总线或EISA总线等。所述总线可以分为地址总线、数据总线、控制总线等。为便于表示,图5中仅用一个双向箭头表示,但并不表示仅有一根总线或一种类型的总线。

其中,存储器51用于存储程序,所述处理器50在接收到执行指令后,执行所述程序,前述本发明实施例任一实施例揭示的流过程定义的装置所执行的方法可以应用于处理器50中,或者由处理器50实现。

处理器50可能是一种集成电路芯片,具有信号的处理能力。在实现过程中,上述方法的各步骤可以通过处理器50中的硬件的集成逻辑电路或者软件形式的指令完成。上述的处理器50可以是通用处理器,包括中央处理器(Central Processing Unit,简称CPU)、网络处理器(Network Processor,简称NP)等;还可以是数字信号处理器(Digital SignalProcessing,简称DSP)、专用集成电路(Application Specific Integrated Circuit,简称ASIC)、现成可编程门阵列(Field-Programmable Gate Array,简称FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本发明实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合本发明实施例所公开的方法的步骤可以直接体现为硬件译码处理器执行完成,或者用译码处理器中的硬件及软件模块组合执行完成。软件模块可以位于随机存储器,闪存、只读存储器,可编程只读存储器或者电可擦写可编程存储器、寄存器等本领域成熟的存储介质中。该存储介质位于存储器51,处理器50读取存储器51中的信息,结合其硬件完成上述方法的步骤。

本发明实施例所提供的可读存储介质的计算机程序产品,包括存储了程序代码的计算机可读存储介质,所述程序代码包括的指令可用于执行前面方法实施例中所述的方法,具体实现可参见前述方法实施例,在此不再赘述。

所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时,可以存储在一个计算机可读取存储介质中。基于这样的理解,本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质中,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括:U盘、移动硬盘、只读存储器(ROM,Read-Only Memory)、随机存取存储器(RAM,Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

最后应说明的是:以上所述实施例,仅为本发明的具体实施方式,用以说明本发明的技术方案,而非对其限制,本发明的保护范围并不局限于此,尽管参照前述实施例对本发明进行了详细的说明,本领域的普通技术人员应当理解:任何熟悉本技术领域的技术人员在本发明揭露的技术范围内,其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化,或者对其中部分技术特征进行等同替换;而这些修改、变化或者替换,并不使相应技术方案的本质脱离本发明实施例技术方案的精神和范围,都应涵盖在本发明的保护范围之内。因此,本发明的保护范围应所述以权利要求的保护范围为准。

17页详细技术资料下载
上一篇:一种医用注射器针头装配设备
下一篇:图像特效的生成方法、装置、电子设备及存储介质

网友询问留言

已有0条留言

还没有人留言评论。精彩留言会获得点赞!

精彩留言,会给你点赞!