CN111859213A - 动态图形生成方法、装置、计算机设备和存储介质 - Google Patents
动态图形生成方法、装置、计算机设备和存储介质 Download PDFInfo
- Publication number
- CN111859213A CN111859213A CN202010511506.4A CN202010511506A CN111859213A CN 111859213 A CN111859213 A CN 111859213A CN 202010511506 A CN202010511506 A CN 202010511506A CN 111859213 A CN111859213 A CN 111859213A
- Authority
- CN
- China
- Prior art keywords
- picture
- original
- complete picture
- complete
- pictures
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/70—Information retrieval; Database structures therefor; File system structures therefor of video data
- G06F16/71—Indexing; Data structures therefor; Storage structures
Abstract
本申请涉及一种动态图形生成方法、装置、计算机设备和存储介质,所述方法包括:获取多帧原始图片的信息,所述原始图片的信息包括:地址及顺序;根据所述地址获取多帧原始图片;根据所述顺序将获取的多帧所述原始图片拼合成完整图片;将所述完整图片链接至目标元素,所述目标元素用于接收操作命令并根据所述操作命令使所述完整图片按预设方式显示。本申请实施例中,生成的动态图形显示会更加流畅。
Description
技术领域
本申请涉及图像处理领域,尤其涉及一种动态图形生成方法、装置、计算机设备和存储介质。
背景技术
随着互联网的发展,在网页、APP、聊天程序、社交程序等上提供动态图形,以更动态的方法来演示内容,是常用的提高用户使用体验的手段。
现有技术中,设计动态图形的专业工具有多种,这些专业动态图形工具会将设计好的动态图形导出特定的格式,并引入相应的动态图形库中,才能将动态图形作用在目标元素上。
由于现有技术中的动态图形必须引入相应的动态图形库才能使用,使得网页、APP、聊天软件、社交程序等体积增大,数据处理量大,动态图形显示不流畅。
发明内容
为了解决上述技术问题或者至少部分地解决上述技术问题,本申请提供了一种动态图形生成方法、装置、计算机设备和存储介质。
一方面,本申请提供了一种动态图形生成方法,所述方法包括:
获取多帧原始图片的信息,所述原始图片的信息包括:地址及顺序;
根据所述地址获取多帧原始图片;
根据所述顺序将获取的多帧所述原始图片拼合成完整图片;
将所述完整图片链接至目标元素,所述目标元素用于接收操作命令并根据所述操作命令使所述完整图片按预设方式显示。
另一方面,提供了一种动态图形生成装置,包括:
信息获取单元,用于获取多帧原始图片的信息,所述原始图片的信息包括:地址及顺序;
图片获取单元,用于根据所述地址获取多帧原始图片;
拼合单元,用于根据所述顺序将获取的多帧所述原始图片拼合成完整图片;
链接单元,用于将所述完整图片链接至目标元素,所述目标元素用于接收操作命令并根据所述操作命令使所述完整图片按预设方式显示。
另一方面,提供了一种计算机设备,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序,所述处理器执行所述计算机程序时实现上述任一项所述方法的步骤。
另一方面,提供了一种计算机可读存储介质,其上存储有计算机程序,所述计算机程序被处理器执行时实现上述任一项所述的方法的步骤。
本申请实施例提供了一种动态图形生成方法,所述方法包括:获取多帧原始图片的信息,所述原始图片的信息包括:地址及顺序;根据所述地址获取多帧原始图片;根据所述顺序将获取的多帧所述原始图片拼合成完整图片;将所述完整图片链接至目标元素,所述目标元素用于接收操作命令并根据所述操作命令使所述完整图片按预设方式显示。本申请实施例中,生成动态图形时,将多帧原始图片拼合成完整图片,在将完整图片按照预设方式显示,由于显示的是完整图片,即动态图形的全部内容都是在本地加载完成的,所以生成的动态图形在显示期间不需要多次加载,也不需要多次读取地址来显示构成动态图形的图片,因此显示会更加流畅,可以提高用户的使用体验;此外,本申请实施例的方法,实际上是通过对图片的显示来实现动态图形功能,因此无需引入动态图形库,可以减少系统的数据加载量和处理量,减少系统开销,使动态图形显示流程。
附图说明
此处的附图被并入说明书中并构成本说明书的一部分,示出了符合本申请的实施例,并与说明书一起用于解释本申请的原理。
为了更清楚地说明本申请实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,对于本领域普通技术人员而言,在不付出创造性劳动性的前提下,还可以根据这些附图获得其他的附图。
图1所示为本申请实施例中动态图形生成方法的应用环境图;
图2所示为本申请实施例中动态图形生成方法的流程示意图;
图3所示为本申请实施例的坐标系及定位坐标的示意图;
图4所示为本申请实施例的图片拼接示意图;
图5所示为本申请实施例的显示完整图片的示意图;
图6所示为本申请实施例的动态图形生成方法的示意图;
图7所示为本申请实施例的动态图形生成装置的示意图;
图8所示为本申请实施例中计算机设备的内部结构图。
具体实施方式
为使本申请实施例的目的、技术方案和优点更加清楚,下面将结合本申请实施例中的附图,对本申请实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例是本申请的一部分实施例,而不是全部的实施例。基于本申请中的实施例,本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例,都属于本申请保护的范围。
图1为本申请实施例中动态图形生成方法的应用环境图。参照图1,该动态图形生成方法应用于动态图形生成系统。该动态图形生成系统包括终端110和服务器120。终端110和服务器120通过网络连接。终端110具体可以是台式终端或移动终端,移动终端具体可以手机、平板电脑、笔记本电脑等中的至少一种。服务器120可以用独立的服务器或者是多个服务器组成的服务器集群来实现。动态图形,也可以称为动画。
如图2所示,在一个实施例中,提供了一种动态图形生成方法。本实施例主要以该方法应用于上述图1中的终端110(或服务器120)来举例说明。参照图2,该动态图形生成方法具体包括如下步骤:
步骤201,获取多帧原始图片的信息,所述原始图片的信息包括:地址及顺序。
本申请实施例中,原始图片的地址可以是本地地址,或可以是互联网地址。
本申请实施例中,原始图片的顺序可以是以数字表示,例如00001,00002……,或可以是字母表示,例如A、B……,或可以是字母与数字的混合,例如A01,A02,B01……,或可以是以任何形式定义的顺序。
步骤202,根据所述地址获取多帧原始图片。
步骤203,根据所述顺序将获取的多帧所述原始图片拼合成完整图片。
通常,原始图片都是四边形的,设其左边为第一边,按照顺时针方向设置第二边、第三边和第四边,第一边和第三边相对,第二边和第四边相对。在将原始图片拼合成完整图片的时,有两种方式,一是将当前帧原始图片的第一边与前一帧原始图片的第三边拼接,如图3所示;二是将当前帧原始图片的第二边与前一帧原始图片的第四边拼接,如图4所示。
步骤204,将所述完整图片链接至目标元素,所述目标元素用于接收操作命令并根据所述操作命令使所述完整图片按预设方式显示。
本申请实施例中,生成动态图形时,将多帧原始图片拼合成完整图片,在将完整图片按照预设方式显示。本发明实施例中,可以认为是包含动态图形所要显示的全部内容的图片,在拼合过程中已经读取了所有原始图片,即已经加载过了所有原始图片,因此,本发明实施例中显示的完整图片,即动态图形的全部内容都是在本地加载完成的,所以生成的动态图形在显示期间不需要多次加载,也不需要多次读取地址来显示构成动态图形的图片,因此显示会更加流畅;此外,本申请实施例的方法,实际上是通过对图片的显示来实现动态图形功能,因此无需引入动态图形库,可以减少系统的数据加载量和处理量,减少系统开销,使动态图形显示流畅。本申请实施例中,对图片的格式、颜色没有限制,如果采用png-24,可以支持1600万色,因此色彩显示更加丰富。而其他动态图形生成方式,例如GIF动态图形,支持256色。
本申请实施例中,聊天软件、社交软件等采用客户端canvas技术的软件,接口较为简单,一些专业软件生成的动态图形,由于接口差异较大,无法直接使用,而本申请实施例的方法,实际上是对图片的显示,因此可以兼容多种接口,在聊天软件、社交软件上也可以使用。
图1为一个实施例中动态图形生成方法的流程示意图。应该理解的是,虽然图1的流程图中的各个步骤按照箭头的指示依次显示,但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明,这些步骤的执行并没有严格的顺序限制,这些步骤可以以其它的顺序执行。而且,图1中的至少一部分步骤可以包括多个子步骤或者多个阶段,这些子步骤或者阶段并不必然是在同一时刻执行完成,而是可以在不同的时刻执行,这些子步骤或者阶段的执行顺序也不必然是依次进行,而是可以与其它步骤或者其它步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。
本申请实施例中,在步骤203之后,步骤204之前,即所述根据顺序将获取的多帧原始图片拼合成完整图片之后,所述将完整图片链接至目标元素之前,所述方法还包括:
获取所述完整图片中每一帧原始图片的定位坐标,所述定位坐标用于指示对应的原始图片在所述完整图片中的位置信息;
所述将完整图片链接至目标元素,包括:
将所述完整图片中第一帧原始图片的定位坐标链接至所述目标元素。
本申请实施例中,定位坐标是定位点的坐标,定位点可以是原始图片中的任意一点,但是每一帧原始图片的定位点必须是对应相同的,例如都以原始图片的左下角的点作为定位点,或都以原始图片的中心点作为定位点。
本申请实施例中,可以以完整图片的任意一点,通常可以是完整图片左下角点作为原点建立一个坐标系,以每一帧原始图片的中心点作为该帧原始图片的定位点。
本申请实施例中,所述获取完整图片中每一帧原始图片的定位坐标,包括:
若当前原始图片的顺序为第一帧,则在所述当前原始图片上选取任意一点作为定位点,获取所述定位点的坐标作为定位坐标;
若当前原始图片的顺序不是第一帧,则:
获取所述顺序为第一帧的原始图片的定位坐标,
根据所述当前原始图片的顺序、第一帧原始图片的定位坐标及每一帧原始图片的尺寸,获取所述当前原始图片的定位坐标。
图3所示为本申请实施例的坐标系及定位坐标的示意图,如图3所示,由3帧原始图片拼合成的完整图片,以完整图片的左下角点作为原点O,原点坐标(0,0),每一帧原始图片的中心点A1、A2、A3作为对应原始图片的定位点,A1、A2、A3的坐标即原始图片的定位点的坐标,即定位坐标。
在本申请的其他实施例中,每一帧原始图片的定位坐标也可以通过计算获得。例如,若每一帧原始图片的尺寸分别为2X*2Y,即宽2X,高2Y,原始图片的顺序为i(i为自然数),则每一帧原始图像的中心点坐标为((2i-1)*X,Y),每一帧原始图像左下角点的坐标为((i-1)*X,0)。
定位坐标可以是原始图像的中心点,或可以是原始图像的左下角点。
例如图3所示的实施例中,每一帧原始图片的尺寸是长500像素,宽400像素。那么A1对应的原始图片是第一帧,A1的坐标为(200,250),A2、A3的坐标分别为(600,250)和(800,250)。
如果每一帧原始图片的定位点是左下角点,例如图3中的B1、B2、B3,那么B1、B2、B3的坐标分别为(0,0)(400,0)和(600,0)。
本申请实施例中,目标元素可以是网页页面上的一个例如“播放动态图形”的按钮,或可以是APP页面的按钮,或可以是网页页面或APP页面上的控制自动播放动态图形的程序,或可以是嵌入聊天软件、社交软件中的小程序上的按钮,或可以是网页、APP或小程序中可以根据手指的滑动轨迹来进行操作的控件、程序等。本申请实施例中,将第一帧原始图片的定位坐标,即A1的坐标链接至目标元素后,可以通过对目标元素的操作来显示完整图片以播放动态图形。
目标元素可以完成的操作除了可以是“播放”外,目标元素还可以是暂停、快进、后退、前跳等功能按钮或控件,此时对目标元素的操作,可以对完整动态图形执行相应的操作。或者是,目标元素为控件或监控控件等,在满足某一条件的情况下,触发操作命令,并根据所述操作命令使所述完整图片按预设方式显示。例如,当检测到用户在相应屏幕上用鼠标或手指划过特定的轨迹,则触发操作命令,或者当检测到用户打开了相应的页面、相应的APP界面等,则触发操作指令,按照预设方式显示动态图形。
本申请实施例中,将原始图片拼接成完整图片,可以是按照如图3所示的“左右”拼接,还可以是按照如图4所示的“上下”拼接。
本申请实施例中,步骤204中,所述使完整图片按预设方式显示,包括:
获取每一帧原始图片的第一时长;
使所述完整图片中的每一帧原始图片显示所述第一时长后,显示下一帧原始图片。
本申请实施例中,步骤204中,所述使完整图片按预设方式显示,包括:
获取所述完整图片的总显示时长;
获取所述完整图片中包含的原始图片的总数量;
根据所述完整图片的总显示时长及完整图片中包含的原始图片的总数量,获取每一帧原始图片的第二时长;
使所述完整图片中的每一帧原始图片显示所述第二时长后,显示下一帧原始图片。
本发明实施例中,第一时长可以是用户设置的,或者是系统中预设的。用户设置或者系统中预设的第一时长,可以根据人眼对图形的滞留时间来设置,从而使动态图形显示时是连续性的、无间断的、更流畅的;或用户设置或系统预设第一时长时,可以根据需求设置,例如需要两倍速、三倍速或者慢速显示。
本发明实施例中,总显示时长可以是用户设置的,或者是系统中预设的。用户设置或者系统中预设的总显示时长,可以根据APP、网页加载或者应用加载的时长设置,或可以根据用户的需求设置。本发明实施例中,第二时长是根据总显示时长及原始图片的总数量计算获得的。
本申请实施例提供了两种显示完整图片即播放动态图形的方式,一种是设置显示完整图片中每一帧原始图片的时长,另一种是设置显示完整图片的总时长,自动获取每一帧原始图片的显示时长,此时每一帧原始图片的显示时长是总时长除以总原始图片数量。
本申请实施例中,还可以根据需求设置不同的显示方式,包括但不限于还可以设置倍率或部分倍率,例如全部两倍速度显示,或全部二分之一速度显示,或前半部分两倍速度显示等,可以满足用户的多种需求,给用户提供更好的使用体验。
本申请实施例中,目标元素还可以是暂停、快进、后退、前跳等功能按钮或控件,根据不同的目标元素的设置,可以对完整动态图形执行相应的显示。例如按下代表“暂停”的目标元素之后,动态图形会持续显示当前的原始图片;或者按下代表“快进”的目标原始之后,动态图形会以两倍速度/三倍速度等播放。
本申请实施例中,显示完整图片时,对于每一帧原始图片,会将其定位点设置在显示页面的同一个位置。图5所示为本申请实施例的显示完整图片的示意图,图5中的完整图片包含3帧原始图片,每一帧原始图片的定位坐标在原始图片的中心点。
图5中,粗框为显示页面。
图5(a)中,第一帧原始图片的定位点A1,在显示的时候,位于显示页面的X点。
图5(b)中,第二帧原始图片的定位点A2,在显示的时候,同样位于显示页面的X点。
同理,图5(c)中,第二帧原始图片的定位点A3,在显示的时候,同样位于显示页面的X点。
在本申请实施例中,步骤201之后,步骤203之前,即所述根据地址获取原始图片之后,根据顺序将获取的多帧原始图片拼合成完整图片之前,所述方法还包括:
获取目标尺寸,所述目标尺寸为多帧所述原始图片的最小尺寸、最大尺寸或平均尺寸;
将超出所述目标尺寸的所述原始图片裁剪为所述目标尺寸,或将小于所述目标尺寸的所述原始图片扩展为所述目标尺寸。
为了保证生成动态图形的质量,可能还需要对原始图片的尺寸进行处理,例如上述的剪裁处理。
在一申请实施例中,如果大多数原始图片的尺寸是一致的,仅有一帧或两帧原始图片尺寸较小,如果对其他尺寸一致的原始图片进行裁剪,工作量较大,也会浪费素材。此时,对尺寸较小的原始图片进行少许扩展,例如在尺寸较小的原始图片的边缘部分按照原图片边缘的颜色进行填充,也可以达到使所有原始图片的尺寸一致的目的。
目标尺寸可以是上述实施例中的多帧原始图片中的最大尺寸、最小尺寸,或可以是平均尺寸。确定目标尺寸后,如果当前原始图片的尺寸大于目标尺寸,就进行裁剪,如果当前原始图片的尺寸小于目标尺寸,就进行扩展。
在本申请实施例中,在步骤203之后,步骤204之前,即所述在根据顺序将获取的多帧原始图片拼合成完整图片之后,将完整图片链接至目标元素之前,所述方法还包括:
按照预设格式输出所述完整图片;
按照预设命名规则,对预设格式的所述完整图片命名。
预设命名规则可以是根据第一帧/末帧原始图片的名称为完整图片名称前缀,以区别后缀例如文字“完整”、字母W等表示完整图片,例如第一帧/末帧原始图片名称为企鹅01,则完整图片为企鹅01-完整;或可以是根据原始图片的地址命名,例如原始图片所在文件夹为“跳舞”,完整图片为跳舞-W;或可以根据当前日期+序号,例如当前日期为2020年4月1日,则完整图片名称可以为20200401-001;或可以是上述命名规则的综合,还可以预设其他命名规则,在此不再赘述。
本申请实施例中,最终输出的完整图片的格式可以是css文件,或者wxcc文件,这两种格式的文件总体数据量小,容易解析,兼容性高,因此本申请实施例生成的动态图形,在播放时无需导入动态图形库即可以播放,可以应用于多种场合,例如css文件可以在网页或APP上播出,wxcc文件可以在嵌入聊天软件、社交软件等的小程序中播出。可见,本申请实施例的动态图形生成的方法,兼容性高,使用方便,数据量小,可以更好的满足用户需求,提高用户使用体验。
预设命名规则,可以是根据输出时间、原始图片名称、输出格式等中的一种或几种方式对预设格式的完整图片命名,或可以是用户自定义的命名方式。
图6所示为本申请实施例的动态图形生成方法的示意图,如图6所示,共有11张原始图片,如图6(a)所示,编号分别为:企鹅-吃鱼-00000……企鹅-吃鱼-00010。
原始图片为长方形,四条边按照顺时针方向分别为第一边、第二边、第三边和第四边,左边可以是第一边。第一边和第三边相对,第二边和第四边相对。拼合时,使每一帧原始图片的第三边和上一帧原始图片的第二边相重合,拼合成的完整图片如图6(b)所示。
在显示的时候,每一帧原始图片显示0.1秒,生成的动态图形总计显示1.1秒。
本申请实施例的动态图形生成方法中,生成动态图形时,将多帧原始图片拼合成完整图片,在将完整图片按照预设方式显示,由于显示的是完整图片,即动态图形的全部内容都是在本地加载完成的,所以生成的动态图形在显示期间不需要多次加载,也不需要多次读取地址来显示构成动态图形的图片,因此显示会更加流畅,能够提高用户的使用体验。
本发明实施例还提供了一种动态图形生成方法的应用场景,包括:
步骤601,信息采集。
用户运行程序,例如gulp脚本,来获取原始图片的地址、动态图形总显示时长,还可以获取原始图片名称、顺序、或生成的动态图形名称、生成的动态图形命名规则等。
步骤602,生成动态图形。
获取原始图片的原始宽高,若有必要,对原始图片的宽、高等进行调整,调整方法可以是裁剪,或可以是填充。按照原始图片的顺序,依次将多帧原始图片列拼合成完整图片,拼合可以是上下拼合,或可以是左右拼合。对图像进行调整和拼合方法可参照上述实施例,在此不再赘述。同时根据处理后的原始图片的数量和宽、高,自动计算出完整图片中每一帧原始图片的定位坐标。
步骤603,输出目标文件。
按照预设格式,生成动态图形;动态图形的名称可以是预设的,也可以是按照预设规则生成的。在动态图形时长处设置指定的第一时长或总显示时长,本实施例中,最终输出的是css文件(网页)或者wxss文件(小程序)。
步骤604,应用到目标元素。
在待使用的页面引入css文件或者wxss文件的动态图形,链接在目标元素上。可以预先设置触发动态图形显示的策略,例如在对目标元素交互时,例如点击、滑过等,根据动态图形中每帧原始图片的定位坐标和第一时长/总显示时长/第二时长等,显示动态图形。
本发明实施例中,生成的动态图形在显示期间不需要多次加载,也不需要多次读取地址来显示构成动态图形的原始图片,因此显示会更加流畅,可以减少系统的数据加载量和处理量,减少系统开销,使动态图形流畅,从而能够进一步提高用户的使用体验。
和上述动态图形生成方法相对应,本申请实施例还提供了一种动态图形生成装置。图7所示为本申请实施例的动态图形生成装置的示意图,如图7所示,动态图形生成装置包括:
信息获取单元710,用于获取多帧原始图片的信息,所述原始图片的信息包括:地址及顺序;
图片获取单元720,用于根据所述地址获取多帧原始图片;
拼合单元730,用于根据所述顺序将获取的多帧所述原始图片拼合成完整图片;
链接单元740,用于将所述完整图片链接至目标元素,所述目标元素用于接收操作命令并根据所述操作命令使所述完整图片按预设方式显示。
本申请实施例中,所述装置还包括坐标获取单元,在根据顺序将获取的多帧原始图片拼合成完整图片之后,所述将完整图片链接至目标元素之前,用于:
获取所述完整图片中每一帧原始图片的定位坐标,所述定位坐标用于指示对应的原始图片在所述完整图片中的位置信息;
链接单元740还用于将所述完整图片中第一帧原始图片的定位点的坐标链接至所述目标元素。
本申请实施例中,所述坐标获取单元还用于:
若当前原始图片的顺序为第一帧,则在所述当前原始图片上选取任意一点作为定位点,获取所述定位点的坐标作为定位坐标;
若当前原始图片的顺序不是第一帧,则:
获取所述顺序为第一帧的原始图片的定位坐标,
根据所述当前原始图片的顺序、第一帧原始图片的定位坐标及每一帧原始图片的尺寸,获取所述当前原始图片的定位坐标。
本申请实施例中,所述装置还包括显示单元,用于:
获取每一帧原始图片的第一时长;
使所述完整图片中的每一帧原始图片显示所述第一时长后,显示下一帧原始图片。
本申请实施例中,所述装置还包括显示单元,用于:
获取所述完整图片的总显示时长;
获取所述完整图片中包含的原始图片的总数量;
根据所述完整图片的总显示时长及完整图片中包含的原始图片的总数量,获取每一帧原始图片的第二时长;
使所述完整图片中的每一帧原始图片显示所述第二时长后,显示下一帧原始图片。
本申请实施例中,所述装置还包括剪裁单元,剪裁单元在根据地址获取原始图片之后,根据顺序将获取的多帧原始图片拼合成完整图片之前,用于:
获取目标尺寸,所述目标尺寸为多帧所述原始图片的最小尺寸、最大尺寸或平均尺寸;
将超出所述目标尺寸的所述原始图片裁剪为所述目标尺寸,或将小于所述目标尺寸的所述原始图片扩展为所述目标尺寸。
本申请实施例中,所述装置还包括输出单元,输出单元在根据顺序将获取的多帧原始图片拼合成完整图片之后,将完整图片链接至目标元素之前,用于:
按照预设格式输出所述完整图片;
按照预设命名规则,对预设格式的所述完整图片命名。
本申请实施例的装置,生成动态图形时,将多帧原始图片拼合成完整图片,在将完整图片按照预设方式显示,由于显示的是完整图片,即动态图形的全部内容都是在本地加载完成的,所以生成的动态图形在显示期间不需要多次加载,也不需要多次读取地址来显示构成动态图形的图片,因此显示会更加流畅,可以提高用户的使用体验;此外,本申请实施例的方法,实际上是通过对图片的显示来实现动态图形功能,因此无需引入动态图形库,可以减少系统的数据加载量和处理量,减少系统开销,使动态图形流畅,从而能够进一步提高用户的使用体验。
图8示出了一个实施例中计算机设备的内部结构图。该计算机设备具体可以是图1中的终端110(或服务器120)。如图8所示,该计算机设备包括该计算机设备包括通过系统总线连接的处理器、存储器、网络接口、输入装置和显示屏。其中,存储器包括非易失性存储介质和内存储器。该计算机设备的非易失性存储介质存储有操作系统,还可存储有计算机程序,该计算机程序被处理器执行时,可使得处理器实现动态图形生成方法。该内存储器中也可储存有计算机程序,该计算机程序被处理器执行时,可使得处理器执行动态图形生成方法。计算机设备的显示屏可以是液晶显示屏或者电子墨水显示屏,计算机设备的输入装置可以是显示屏上覆盖的触摸层,也可以是计算机设备外壳上设置的按键、轨迹球或触控板,还可以是外接的键盘、触控板或鼠标等。
本领域技术人员可以理解,图8中示出的结构,仅仅是与本申请方案相关的部分结构的框图,并不构成对本申请方案所应用于其上的计算机设备的限定,具体的计算机设备可以包括比图中所示更多或更少的部件,或者组合某些部件,或者具有不同的部件布置。
在一个实施例中,提供了一种计算机设备,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序,处理器执行计算机程序时实现以下步骤:获取多帧原始图片的信息,所述原始图片的信息包括:地址及顺序;根据所述地址获取多帧原始图片;根据所述顺序将获取的多帧所述原始图片拼合成完整图片;将所述完整图片链接至目标元素,所述目标元素用于接收操作命令并根据所述操作命令使所述完整图片按预设方式显示。
在一个实施例中,处理器执行计算机程序时还实现上述动态图形生成方法的步骤。
在一个实施例中,提供了一种计算机可读存储介质,其上存储有计算机程序,计算机程序被处理器执行时实现以下步骤:获取多帧原始图片的信息,所述原始图片的信息包括:地址及顺序;根据所述地址获取多帧原始图片;根据所述顺序将获取的多帧所述原始图片拼合成完整图片;将所述完整图片链接至目标元素,所述目标元素用于接收操作命令并根据所述操作命令使所述完整图片按预设方式显示。
在一个实施例中,计算机程序被处理器执行时还实现上述动态图形生成方法的步骤。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程,是可以通过计算机程序来指令相关的硬件来完成,所述的程序可存储于一非易失性计算机可读取存储介质中,该程序在执行时,可包括如上述各方法的实施例的流程。其中,本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用,均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限,RAM以多种形式可得,诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。
需要说明的是,在本文中,诸如“第一”和“第二”等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来,而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
以上所述仅是本申请的具体实施方式,使本领域技术人员能够理解或实现本申请。对这些实施例的多种修改对本领域的技术人员来说将是显而易见的,本文中所定义的一般原理可以在不脱离本申请的精神或范围的情况下,在其它实施例中实现。因此,本申请将不会被限制于本文所示的这些实施例,而是要符合与本文所申请的原理和新颖特点相一致的最宽的范围。
Claims (10)
1.一种动态图形生成方法,其特征在于,所述方法包括:
获取多帧原始图片的信息,所述原始图片的信息包括:地址及顺序;
根据所述地址获取多帧原始图片;
根据所述顺序将获取的多帧所述原始图片拼合成完整图片;
将所述完整图片链接至目标元素,所述目标元素用于接收操作命令并根据所述操作命令使所述完整图片按预设方式显示。
2.根据权利要求1所述的方法,其特征在于,所述根据顺序将获取的多帧原始图片拼合成完整图片之后,所述将所述完整图片链接至目标元素之前,所述方法还包括:
获取所述完整图片中每一帧原始图片的定位坐标,所述定位坐标用于指示对应的原始图片在所述完整图片中的位置信息;
所述将完整图片链接至目标元素,包括:
将所述完整图片中第一帧原始图片的定位坐标链接至所述目标元素。
3.根据权利要求2所述的方法,其特征在于,所述获取所述完整图片中每一帧原始图片的定位坐标,包括:
若当前原始图片的顺序为第一帧,则在所述当前原始图片上选取任意一点作为定位点,获取所述定位点的坐标作为定位坐标;
若当前原始图片的顺序不是第一帧,则:
获取所述顺序为第一帧的原始图片的定位坐标,
根据所述当前原始图片的顺序、第一帧原始图片的定位坐标及每一帧原始图片的尺寸,获取所述当前原始图片的定位坐标。
4.根据权利要求1所述的方法,其特征在于,所述使所述完整图片按预设方式显示,包括:
获取每一帧原始图片的第一时长;
使所述完整图片中的每一帧原始图片显示所述第一时长后,显示下一帧原始图片。
5.根据权利要求1所述的方法,其特征在于,所述使所述完整图片按预设方式显示,包括:
获取所述完整图片的总显示时长;
获取所述完整图片中包含的原始图片的总数量;
根据所述完整图片的总显示时长及所述完整图片中包含的原始图片的总数量,获取每一帧原始图片的第二时长;
使所述完整图片中的每一帧原始图片显示所述第二时长后,显示下一帧原始图片。
6.根据权利要求1所述的方法,其特征在于,所述根据所述地址获取原始图片之后,所述根据所述顺序将获取的多帧所述原始图片拼合成完整图片之前,所述方法还包括:
获取目标尺寸,所述目标尺寸为多帧所述原始图片的最小尺寸、最大尺寸或平均尺寸;
将超出所述目标尺寸的所述原始图片裁剪为所述目标尺寸,或将小于所述目标尺寸的所述原始图片扩展为所述目标尺寸。
7.根据权利要求1所述的方法,其特征在于,所述根据所述顺序将获取的多帧原始图片拼合成完整图片之后,所述将所述完整图片链接至目标元素之前,所述方法还包括:
按照预设格式输出所述完整图片;
按照预设命名规则,对预设格式的所述完整图片命名。
8.一种动态图形生成装置,其特征在于,包括:
信息获取单元,用于获取多帧原始图片的信息,所述原始图片的信息包括:地址及顺序;
图片获取单元,用于根据所述地址获取多帧原始图片;
拼合单元,用于根据所述顺序将获取的多帧所述原始图片拼合成完整图片;
链接单元,用于将所述完整图片链接至目标元素,所述目标元素用于接收操作命令并根据所述操作命令使所述完整图片按预设方式显示。
9.一种计算机设备,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序,其特征在于,所述处理器执行所述计算机程序时实现权利要求1至7中任一项所述方法的步骤。
10.一种计算机可读存储介质,其上存储有计算机程序,其特征在于,所述计算机程序被处理器执行时实现权利要求1至7中任一项所述的方法的步骤。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202010511506.4A CN111859213A (zh) | 2020-06-08 | 2020-06-08 | 动态图形生成方法、装置、计算机设备和存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202010511506.4A CN111859213A (zh) | 2020-06-08 | 2020-06-08 | 动态图形生成方法、装置、计算机设备和存储介质 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN111859213A true CN111859213A (zh) | 2020-10-30 |
Family
ID=72986373
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202010511506.4A Pending CN111859213A (zh) | 2020-06-08 | 2020-06-08 | 动态图形生成方法、装置、计算机设备和存储介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN111859213A (zh) |
Cited By (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN113419802A (zh) * | 2021-06-21 | 2021-09-21 | 网易(杭州)网络有限公司 | 图集生成方法、装置、电子设备及存储介质 |
Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
JPH0683932A (ja) * | 1992-07-02 | 1994-03-25 | Gurafuika:Kk | 画像表示装置 |
CN107403460A (zh) * | 2017-07-11 | 2017-11-28 | 北京潘达互娱科技有限公司 | 动画生成方法及装置 |
CN109729420A (zh) * | 2017-10-27 | 2019-05-07 | 腾讯科技(深圳)有限公司 | 图片处理方法及装置、移动终端及计算机可读存储介质 |
CN110111241A (zh) * | 2019-04-30 | 2019-08-09 | 北京字节跳动网络技术有限公司 | 用于生成动态图像的方法和装置 |
-
2020
- 2020-06-08 CN CN202010511506.4A patent/CN111859213A/zh active Pending
Patent Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
JPH0683932A (ja) * | 1992-07-02 | 1994-03-25 | Gurafuika:Kk | 画像表示装置 |
CN107403460A (zh) * | 2017-07-11 | 2017-11-28 | 北京潘达互娱科技有限公司 | 动画生成方法及装置 |
CN109729420A (zh) * | 2017-10-27 | 2019-05-07 | 腾讯科技(深圳)有限公司 | 图片处理方法及装置、移动终端及计算机可读存储介质 |
CN110111241A (zh) * | 2019-04-30 | 2019-08-09 | 北京字节跳动网络技术有限公司 | 用于生成动态图像的方法和装置 |
Non-Patent Citations (1)
Title |
---|
独孤二神: "css3动画实现------利用长图片资源(jpg png 等)实现帧动画", pages 1 - 3, Retrieved from the Internet <URL:《https://blog.csdn.net/baidu_35103407/article/details/80247476》> * |
Cited By (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN113419802A (zh) * | 2021-06-21 | 2021-09-21 | 网易(杭州)网络有限公司 | 图集生成方法、装置、电子设备及存储介质 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US9111007B2 (en) | Adaptive rendering of a webpage on an electronic display device | |
CN108279966B (zh) | 网页截图方法、装置、终端及存储介质 | |
US9921723B2 (en) | Method for switching pages, and electronic device and non-transitory computer readable storage medium for performing same | |
US20150248722A1 (en) | Web based interactive multimedia system | |
CN112416346B (zh) | 界面配色方案的生成方法、装置、设备及存储介质 | |
WO2018126899A1 (zh) | 一种视频界面显示方法及装置 | |
CN113411664B (zh) | 基于子应用的视频处理方法、装置和计算机设备 | |
CN110908762A (zh) | 一种动态壁纸实现方法及设备 | |
CN113741763A (zh) | 电子书的显示方法、装置及电子设备 | |
CN114357345A (zh) | 图片处理方法、装置、电子设备及计算机可读存储介质 | |
CN111596911A (zh) | 生成控件的方法、装置、计算机设备和存储介质 | |
CN109343770B (zh) | 交互反馈方法、设备和记录介质 | |
CN112445400A (zh) | 视觉图形创建方法、装置、终端及计算机可读存储介质 | |
CN111859213A (zh) | 动态图形生成方法、装置、计算机设备和存储介质 | |
JP2011086050A (ja) | 情報処理端末及びコンピュータプログラム | |
CN113127410A (zh) | 一种ppt文件格式转换的方法和系统 | |
KR20100130186A (ko) | 그래픽 디지털 문서의 동영상화 장치 및 방법 | |
CN114995699B (zh) | 一种界面交互方法及装置 | |
CN113096217B (zh) | 图片生成方法、装置、电子设备以及存储介质 | |
CN113676677B (zh) | 动态图片合成方法、装置、电子设备及可读存储介质 | |
US20210073458A1 (en) | Comic data display system, method, and program | |
CN113393294A (zh) | 一种页面显示方法及装置、设备、存储介质 | |
JP3381903B2 (ja) | 地図表示システム及びそれにおける画像スクロール処理方法 | |
CN111782333B (zh) | 游戏中的界面显示方法、装置、存储介质与终端设备 | |
CN111611038B (zh) | 电子书阅读页面中视图对象的插入方法及计算设备 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination |