图像处理方法及装置

技术领域

本申请涉及计算机技术领域，特别涉及一种图像处理方法。本申请同时涉及一种图像处理装置，一种计算设备，以及一种计算机可读存储介质。

背景技术

随着计算机技术的快速发展，动画越来越受到人们的喜爱，生活和工作中随处可见各种各样的小动画。现有技术中，需要由设计人员绘制好动画的每一帧画面，再将绘制好的画面合成对应的动画，后续下载并播放该动画。然而，每一帧动画都需要单独绘制，重复的内容不能复用，且只要动画内容发生微小变化，就需要重新制作动画的每一帧画面，动画内容的复用率较低，浪费了大量的处理资源，动画制作效率较低。另外，在播放动画时，需要预先下载制作好的完整的动画，需要获取的资源较大，导致获取动画的时间较长，页面可能会出现空白时间，导致用户体验感受较差。

发明内容

有鉴于此，本申请实施例提供了一种图像处理方法。本申请同时涉及一种图像处理装置，一种计算设备，以及一种计算机可读存储介质，以解决现有技术中存在的动画内容复用率较低、浪费处理资源的问题。

根据本申请实施例的第一方面，提供了一种图像处理方法，包括：

在检测到动画触发条件的情况下，在待制作动画的背景图像的预设移动区域内为动画对象设置至少一个显示位置；

确定所述动画对象在所述至少一个显示位置的位置图像；

根据所述背景图像以及所述位置图像构造所述动画对象的目标图像。

根据本申请实施例的第二方面，提供了一种图像处理装置，包括：

设置模块，被配置为在检测到动画触发条件的情况下，在待制作动画的背景图像的预设移动区域内为动画对象设置至少一个显示位置；

第一确定模块，被配置为确定所述动画对象在所述至少一个显示位置的位置图像；

第一构造模块，被配置为根据所述背景图像以及所述位置图像构造所述动画对象的目标图像。

根据本申请实施例的第三方面，提供了一种计算设备，包括：

存储器和处理器；

所述存储器用于存储计算机可执行指令，所述处理器用于执行所述计算机可执行指令：

在检测到动画触发条件的情况下，在待制作动画的背景图像的预设移动区域内为动画对象设置至少一个显示位置；

确定所述动画对象在所述至少一个显示位置的位置图像；

根据所述背景图像以及所述位置图像构造所述动画对象的目标图像。

根据本申请实施例的第四方面，提供了一种计算机可读存储介质，其存储有计算机可执行指令，该计算机可执行指令被处理器执行时实现任意所述图像处理方法的步骤。

本申请提供的图像处理方法，可以在检测到动画触发条件的情况下，在待制作动画的背景图像的预设移动区域内为动画对象设置至少一个显示位置，然后确定所述动画对象在所述至少一个显示位置的位置图像，之后可以根据所述背景图像以及所述位置图像构造所述动画对象的目标图像。

这种情况下，可以控制动画对象根据设置的显示位置进行移动，并确定动画对象在每一个显示位置处显示的位置图像，后续仅根据背景图像和位置图像，即可构造得到目标图像，无需重复绘制待制作动画每一帧图像的全部内容，重复的背景内容只需在初始时获取并渲染一次，在后续动画帧中可以复用之前渲染的背景内容，提高了动画内容的复用率，节省了处理资源；另外，只需加载背景图像和动画对象即可，无需加载完整的动画，需要获取的资源较小，节省了时间，避免了页面出现空白时间，提高了用户体验。

附图说明

图1是本申请一实施例提供的一种图像处理方法的流程图；

图2是本申请一实施例提供的一种初始图像示意图；

图3是本申请一实施例提供的一种动画对象的显示位置示意图；

图4是本申请一实施例提供的一种构造滚动画面的示意图；

图5是本申请一实施例提供的一种应用于配置扭蛋机场景的图像处理方法的处理流程图；

图6是本申请一实施例提供的一种图像处理装置的结构示意图；

图7是本申请一实施例提供的一种计算设备的结构框图。

具体实施方式

在下面的描述中阐述了很多具体细节以便于充分理解本申请。但是本申请能够以很多不同于在此描述的其它方式来实施，本领域技术人员可以在不违背本申请内涵的情况下做类似推广，因此本申请不受下面公开的具体实施的限制。

在本申请一个或多个实施例中使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本申请一个或多个实施例。在本申请一个或多个实施例和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义。还应当理解，本申请一个或多个实施例中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。

应当理解，尽管在本申请一个或多个实施例中可能采用术语第一、第二等来描述各种信息，但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如，在不脱离本申请一个或多个实施例范围的情况下，第一也可以被称为第二，类似地，第二也可以被称为第一。取决于语境，如在此所使用的词语“如果”可以被解释成为“在……时”或“当……时”或“响应于确定”。

在本申请中，提供了一种图像处理方法，本申请同时涉及一种图像处理装置，一种计算设备，以及一种计算机可读存储介质，在下面的实施例中逐一进行详细说明。

图1示出了根据本申请一实施例提供的一种图像处理方法的流程图，具体包括以下步骤：

步骤102：获取并渲染待制作动画的背景图像，获取动画对象的预设初始位置，根据所述预设初始位置生成所述动画对象的初始位置图像，并根据所述背景图像和所述初始位置图像，生成所述待制作动画的初始图像。

实际应用中，需要由设计人员绘制好动画的每一帧画面，再将绘制好的画面合成对应的动画，后续下载并播放该动画。然而，每一帧动画都需要单独绘制，重复的内容不能复用，且只要动画内容发生微小变化，就需要重新制作动画的每一帧画面，动画内容的复用率较低，浪费了大量的处理资源，动画制作效率较低。另外，在播放动画时，需要预先加载动画的每一帧内容，需要获取的资源较大，导致获取动画的时间较长，页面可能会出现空白时间，导致用户体验感受较差。

因而，本申请为了提高动画内容的复用率，节省处理资源，提供了一种图像处理方法，可以获取并渲染待制作动画的背景图像，且获取动画对象的预设初始位置，先根据所述预设初始位置生成所述动画对象的初始位置图像，然后根据所述背景图像和所述初始位置图像，生成所述待制作动画的初始图像；在检测到动画触发条件的情况下，在待制作动画背景图像的预设移动区域内为动画对象设置至少一个显示位置，并确定所述动画对象在所述至少一个显示位置的位置图像；根据背景图像以及所述位置图像构造所述动画对象的目标图像。如此，无需重复绘制待制作动画的每一帧图像的全部内容，重复的背景内容只需在初始时获取并渲染一次，在后续动画帧中可以复用之前渲染的背景内容，提高了动画内容的复用率，节省了处理资源；且需要获取的资源较小，节省了时间，避免了页面出现空白时间，提高了用户体验。

具体的，待制作动画是指需要播放动画的终端最后需要合成的动画，即终端最终需要进行播放的动画；背景图像是指动画的背景内容，即不发生变化的内容，动画对象是指在背景图像中移动的对象，即位置可能会发生变化的对象，预设初始位置是指动画对象在背景图像中初始的显示位置。另外，位置图像是指仅包括显示在某个位置的动画对象的图像，初始位置图像是指仅包括显示在预设初始位置的动画对象的图像。

需要说明的是，预设初始位置是设计人员预先手动设置的位置，该位置可以是在背景图像中的坐标，根据该预设初始位置可以确定动画对象在背景图像中的初始显示位置，从而生成动画对象的初始位置图像，然后结合背景图像形成初始图像。实际实现时，针对每个动画对象，可以获取该动画对象的预设初始位置和对应的图画，然后根据该预设初始位置和对应的图画生成动画对象的初始位置图像。

另外，由于整个动画可以存在有多个动画对象发生移动，即动画对象的个数可以为一个、两个甚至多个，因而可以获取至少一个动画对象的预设初始位置，即针对每一个动画对象，均获取其对应的初始位置，并根据获取到的各个预设初始位置生成动画对象的初始位置图像，从而结合背景图像得到初始图像。

示例的，图2是本申请一实施例提供的一种初始图像示意图，如图2中的(a)所示，其为获取并渲染出的背景图像，假设有3个动画对象，其对应的图画如图2中的(b)所示，假设其预设初始位置分别为位置1、位置2和位置3，此时可以根据位置1、位置2和位置3生成上述3个动画对象的初始位置图像，如图2中的(c)所示，然后将生成的初始位置图像和背景图像相结合，可以得到初始图像如图2中的(d)所示。

本实施例一个可选的实施方式中，在生成初始图像后，还可以进一步控制动画对象在当前位置进行摆动，从而生成更生动形象的动画效果，也即根据所述背景图像和所述初始位置图像，生成所述待制作动画的初始图像之后，还包括：

获取所述动画对象的摆动参数，不同的所述动画对象的摆动参数相同或不同；

控制所述动画对象以所述预设初始位置为中心，根据所述摆动参数进行摆动，构造所述动画对象的摆动画面。

具体的，摆动参数是指动画对象进行摆动的数值，如摆动延时、摆动周期、摆动方向和摆动幅度等。需要说明的是，动画对象的个数可以为至少一个，因而可以控制各个动画对象的摆动参数相同，即每个动画对象的摆动一致，如此可以使得所有的动画对象整齐一致的摆动；或者，还可以控制各个动画对象的摆动参数不同，即每个动画对象有自己的摆动方式，使得动画对象的摆动更灵活，动画效果更逼真。实际实现时，至少一个动画对象中每个动画对象的摆动参数均是随机设置的，即可以随机获取各个动画对象的摆动参数。

本实施例一个可选的实施方式中，所述摆动参数包括摆动延时、摆动周期、摆动方向和摆动幅度；所述控制所述动画对象以所述预设初始位置为中心，根据所述摆动参数进行摆动，构造所述动画对象的摆动画面，包括：

在到达所述摆动延时的情况下，控制所述动画对象以所述预设初始位置为中心，并以所述摆动周期和摆动幅度沿所述摆动方向进行摆动，构造所述动画对象的摆动画面。

具体的，摆动延时是指动画对象什么时间开始摆动，如摆动延时为3秒，则在背景图像中渲染完所有的动画对象，合成初始图像之后，当时间到达3秒时，控制该动画对象开始摆动。摆动周期是指动画对象完成一次完整摆动回到初始位置所花费的时间，如摆动周期为2.8秒，则该动画对象需要在2.8秒内完成一次完整的摆动。摆动方向是指动画对象进行摆动的方向，该方向可以为沿水平方向左右摆动、沿垂直方向上下摆动等。摆动幅度是指动画对象在摆动过程中移动的距离，如0.5毫米、0.8毫米等。

需要说明的是，控制所述动画对象以所述预设初始位置为中心，并以所述摆动周期和摆动幅度沿所述摆动方向进行摆动，构造所述至少一个动画对象的摆动画面，实际上就是，确定各个时刻，动画对象的摆动位置，控制所述动画对象在所述摆动位置显示并保存对应的摆动画面。

另外，在未检测到动画触发条件的情况下，可以控制动画对象一直进行摆动，即显示摆动画面，直至检测到动画触发条件，则停止显示摆动画面。

示例的，有3个动画对象，动画对象1的摆动参数为：摆动延时3秒、摆动周期2.8秒、摆动方向为左右摆动、摆动幅度为0.5毫米；动画对象2的摆动参数为：摆动延时2秒、摆动周期3.2秒、摆动方向为左右摆动、摆动幅度为0.5毫米；动画对象3的摆动参数为：摆动延时4秒、摆动周期3.6秒、摆动方向为左右摆动、摆动幅度为0.5毫米。

本申请中需要播放动画的终端可以仅获取动画的背景图像和动画对象，然后该终端可以根据动画对象和初始位置，生成对应的初始位置图像，并根据所述背景图像和所述初始位置图像，生成所述待制作动画的初始图像，无需直接获取制作好的动画，节省了时间和资源消耗；之后，还可以控制所述动画对象在背景图像中以当前位置为中心，进行小幅度摆动，得到相应的摆动画面，即可以仅根据随机获取的摆动参数，构造摆动画面，无需单独生成每一帧摆动画面，从而在达到更逼真、更灵活的动画效果，提高用户体验的基础上，提高动画内容复用率，进而提高动画制作效率。

步骤104：在检测到动画触发条件的情况下，在待制作动画的背景图像的预设移动区域内为动画对象设置至少一个显示位置。

具体的，动画触发条件是指显示滚动动画的条件，如“抽奖控件”被触发、“播放控件”被触发等。预设移动区域是指动画对象的中心位置不能超出的安全区域。显示位置是指动画对象在预设移动区域内移动过程中的各个移动位置，即动画对象的中心的各个移动点位，显示位置用横纵坐标表示，如显示位置为(left，top)。

需要说明的是，动画对象可以为至少一个，且每个动画对象的滚动过程并不完全相同，即每个动画对象都有对应的显示位置，因而可以针对至少一个动画对象中的每一个设置至少一个显示位置，各个不同的动画对象的至少一个显示位置可以相同，也可以不同。

本实施例一个可选的实施方式中，在设置显示位置之前，还需要先确定动画对象可以进行移动的区域，也即在待制作动画的背景图像的预设移动区域内为动画对象设置至少一个显示位置之前，还包括：

对所述背景图像进行识别，确定所述背景图像中的动画区域；

确定所述动画区域的最大内接多边形；

将所述最大内接多边形确定为所述预设移动区域。

具体的，动画区域是指动画对象移动的最大范围，根据动画区域可以确定出动画对象移动过程中，中心位置不能超过的安全区域，即预设移动区域，预设移动区域位于动画区域内。由于移动对象往往会占据一定面积，如扭蛋机中的“扭蛋”，其往往是一个圆形的对象，为了保证“扭蛋”在移动过程中边缘不会超出动画区域，需要控制“扭蛋”的中心位置位于预设移动区域内。

示例的，如图2中的(a)所示，动画区域为背景区域的圆形内，此时预设移动区域为该圆形的最大内接四边形。

本申请中引入了预设移动区域的概念，由于每一个动画对象在既定轨迹移动的过程中，还可能伴随着按自身中心点的旋转，引入“预设移动区域”可以保证每一个动画对象在移动过程中自转不会超出动画区域。

本实施例一个可选的实施方式中，在为动画对象设置至少一个显示位置时，可以先确定动画对象移动的圈数，然后确定每一圈的显示位置，也即在待制作动画的背景图像的预设移动区域内为动画对象设置至少一个显示位置，包括：

确定所述动画对象的预设动画参数，所述预设动画参数包括所述动画对象沿所述预设移动区域进行移动的移动圈数；

获取所述移动圈数组位置坐标，每组所述位置坐标为所述动画对象沿所述移动区域移动一圈对应的位置坐标，所述位置坐标位于所述预设移动区域内；

将每组所述位置坐标确定为所述至少一个显示位置。

具体的，预设动画参数是指动画对象移动的各种参数值，如预设动画参数可以包括动画对象沿预设移动区域进行移动的移动圈数，即动画对象的滚动圈数。需要说明的是，各个动画对象沿预设移动区域进行移动的移动圈数可以相同，也可以不同，本申请中以各个不同的动画对象的移动圈数相同为例进行说明。

另外，由于动画对象是从当前位置开始滚动，因而在沿着预设移动区域移动第一圈时，可以将当前显示位置(即预设初始位置)确定为滚动第一圈的第一个显示位置；另外，动画对象滚动完成后，还可以回到初始位置，因而可以将当前显示位置(即预设初始位置)确定为滚动最后一圈的最后一个显示位置。

实际应用中，预设动画参数包括所述动画对象沿所述预设移动区域进行移动的移动圈数，该移动圈数可以是随机设置的；且动画对象在每圈移动过程中的各个显示位置都可以是随机设置的，也就是说，本申请中可以随机为动画对象设置移动位置，便于后续根据随机设置的显示位置，控制动画对象进行移动。

示例的，图3是本申请一实施例提供的一种动画对象的显示位置示意图，如图3所示，各个数字对应的位置代表某一个动画对象沿预设移动区域内移动的各个显示位置，其中，数字“1”代表移动第一圈的各个显示位置，数字“2”代表移动第二圈的各个显示位置，数字“3”代表移动第三圈的各个显示位置。

本申请中可以针对至少一个动画对象中的每个动画对象，随机设置其在预设移动区域内进行移动的各个移动位置，即随机确定动画对象的至少一个显示位置，便于后续直接根据该显示位置，显示并保存对应的位置图像，从而无需设计人员单独绘制每一帧画面。

本实施例一个可选的实施方式中，除了确定动画对象在预设移动区域内进行移动的至少一个显示位置外，还可以确定动画对象在各个显示位置处显示时，对应的进度百分比，即动画进程，也即将每组所述位置坐标确定为所述至少一个显示位置之后，还包括：

确定所述动画对象在所述背景图像中移动所述移动圈数的总路径长度；

针对每个所述显示位置，确定所述显示位置与所述预设初始位置之间的移动路径长度；

根据所述移动路径长度和所述总路径长度，确定所述显示位置对应的移动进度。

具体的，移动进度是指当前移动距离占需要移动的总距离的百分比，因而可以先计算出动画对象在背景图像中滚动获取到的移动圈数，所需移动的总距离，即总路径长度；并且，计算出移动至当前显示位置，移动了多少距离，即移动路径长度；然后计算出移动路径长度占总路径长度的比例，即为当前移动进度，即动画进程。

本实施例一个可选的实施方式中，所述预设动画参数还包括所述动画对象沿所述预设移动区域进行移动的移动方向；

确定所述动画对象在所述背景图像中移动所述移动圈数的总路径长度，包括：

根据所述移动方向，确定所述动画对象对应的各个显示位置的先后顺序；

根据所述先后顺序，确定相邻两个显示位置之间的移动距离；

根据所述相邻两个显示位置之间的移动距离，确定所述总路径长度。

需要说明的是，确定相邻两个显示位置之间的移动距离时，可以确定相邻两个显示位置的横纵坐标，然后根据相邻两个显示位置的横纵坐标，计算该两个显示位置之间的距离，将该距离确定为移动距离。具体实现过程如下公式(1)所示：

其中，L表示相邻两个显示位置之间的移动距离，X

沿用上例，如图3所示，假设移动方向为顺时针移动，且动画对象最后回到初始位置，那么从左至右，依次确定第一个数字“1”和第二个数字“1”之间的移动距离、第二个数字“1”和第三个数字“1”之间的移动距离、第三个数字“1”和第四个数字“1”之间的移动距离、第四个数字“1”和第一个数字“2”之间的移动距离、第一个数字“2”和第二个数字“2”之间的移动距离、第二个数字“2”和第三个数字“2”之间的移动距离、第三个数字“2”和第四个数字“2”之间的移动距离、第四个数字“2”和第一个数字“3”之间的移动距离、第一个数字“3”和第二个数字“3”之间的移动距离、第二个数字“3”和第三个数字“3”之间的移动距离、第三个数字“3”和第四个数字“3”之间的移动距离、第四个数字“3”和第一个数字“1”之间的移动距离。将上述确定出的移动距离依次相加，可以得到动画对象在所述背景图像中移动所述移动圈数的总路径长度。

本实施例一个可选的实施方式中，针对每个所述显示位置，确定所述显示位置与所述预设初始位置之间的移动路径长度，包括：

将所述预设初始位置、所述显示位置，以及所述预设初始位置和显示位置之间的各个显示位置，确定为参考显示位置；

根据所述移动方向，确定所述动画对象对应的各个参考显示位置的先后顺序；

根据所述先后顺序，确定相邻两个参考显示位置之间的移动距离；

根据所述相邻两个参考显示位置之间的移动距离，确定所述移动路径长度。

具体的，预设初始位置是动画对象开始移动前的初始位置，显示位置是指要移动到的当前显示位置。

沿用上例，假设当前确定的显示位置为图3中的第二个数字“2”对应的位置处，即动画对象要移动至第二个数字“2”对应的位置。此时，将第一个数字“1”、第二个数字“1”、第三个数字“1”、第四个数字“1”、第一个数字“2”以及第二个数字“2”，确定为参考显示位置。然后根据移动方向顺时针移动，确定相邻两个参考显示位置之间的移动距离，即依次确定第一个数字“1”和第二个数字“1”之间的移动距离、第二个数字“1”和第三个数字“1”之间的移动距离、第三个数字“1”和第四个数字“1”之间的移动距离、第四个数字“1”和第一个数字“2”之间的移动距离、第一个数字“2”和第二个数字“2”之间的移动距离。将上述确定出的移动距离依次相加，可以得到当前显示位置与预设初始位置之间的移动路径长度。

示例的，显示位置(130，200)对应的移动进度为0％，即显示位置(130，200)为初始显示位置；显示位置(240，108)对应的移动进度为7％；显示位置(215，85)对应的移动进度为8％；显示位置(95，188)对应的移动进度为16％；显示位置(166，205)对应的移动进度为20％；显示位置(240，179)对应的移动进度为24％；显示位置(185，85)对应的移动进度为29％。

步骤106：确定所述动画对象在所述至少一个显示位置的位置图像。

具体的，在检测到动画触发条件的情况下，在待制作动画的背景图像的预设移动区域内为动画对象设置至少一个显示位置的基础上，进一步地，将确定所述动画对象在所述至少一个显示位置的位置图像。其中，位置图像是指动画对象显示在该显示位置形成的图像，即位置图像是指仅包括在显示位置处显示的动画对象的图像。

需要说明的是，在为所述动画对象设置至少一个显示位置后，即确定出了动画对象在预设移动区域内进行移动的各个移动点位，然后可以控制动画对象在所述至少一个显示位置显示，即控制动画对象根据获取到的显示位置进行移动，从而可以得到动画对象移动至各个位置时的位置图像。

本实施例一个可选的实施方式中，确定所述动画对象在所述至少一个显示位置的位置图像，具体实现过程可以如下：

控制所述动画对象在所述背景图像中对应的显示位置处显示，并显示所述显示位置对应的移动进度，得到对应的位置图像。

需要说明的是，如果针对每个显示位置，计算得到了对应的移动进度，那么还可以在显示位置处显示动画对象的同时，显示该显示位置对应的移动进度，得到对应的位置图像，从而使得用户可以清楚获知当前动画对象的移动进程，即动画的播放进程。

本实施例一个可选的实施方式中，所述预设动画参数还包括所述动画对象在所述显示位置的显示时长，不同所述动画对象对应的显示时长相同或不同；

确定所述动画对象在所述至少一个显示位置的位置图像，包括：

控制所述动画对象在所述至少一个显示位置显示所述显示时长，得到对应的位置图像。

需要说明的是，不同的动画对象对应的动画总时长可以不同也可以相同，动画总时长是指动画对象完成所有圈数的移动所耗费的时长，如动画对象1移动完3圈耗时5秒，动画对象2移动完3圈耗时5.2秒，动画对象3移动完3圈耗时5.4秒。

实际应用中，将动画总时长除以显示位置的总个数，可以确定出动画对象在每个显示位置处显示的显示时长，然后控制所述至少一个动画对象中的每一个在所述至少一个显示位置显示所述显示时长，并保存对应的位置图像。如此，可以控制各个动画对象以相同的速度或不同的速度进行移动，得到对应的滚动动画。

本实施例一个可选的实施方式中，确定所述动画对象在所述至少一个显示位置的位置图像之前，还包括：

获取所述动画对象的自转参数，不同的所述动画对象对应的自转参数相同或不同；

相应地，确定所述动画对象在所述至少一个显示位置的位置图像，包括：

根据所述显示位置和所述自转参数，控制所述动画对象在所述至少一个显示位置显示，并以所述自转参数进行自转，得到对应的位置图像。

具体的，自转参数是指动画对象的自转方向、自转速度等参数。不同的动画对象的自转参数可以相同，也可以不同。一个动画对象在不同时刻的自转参数也可以不同，如动画对象开始移动的预设时长内动画对象以第一速度进行自转，预设时长后，以第二速度进行自转，直至停止移动的同时，停止自转；或者动画对象开始移动的预设时长内动画对象以第一速度进行自转，预设时长后，自转速度从第二速度开始递减，直至停止移动的同时，停止自转。

需要说明的是，动画对象除了在预设移动区域内进行滚动外，还可以在滚动的过程中进行自转，因而还可以获取每个动画对象的自转参数，在控制动画对象从一个显示位置移动至另一个显示位置处的过程中，伴随着自转进行移动，得到对应的位置图像，丰富了动画效果。

步骤108：根据所述背景图像以及所述位置图像构造所述动画对象的目标图像。

具体的，在确定所述动画对象在所述至少一个显示位置的位置图像的基础上，进一步地，将根据所述背景图像以及所述位置图像构造所述动画对象的目标图像。其中，目标图像是指合成背景图像和位置图像得到的完整图像，也即目标图像为待制作动画中的图像帧。

本实施例一个可选的实施方式中，由于构造得到的各个目标图像合起来就是待制作动画，因而根据所述背景图像以及所述位置图像构造所述动画对象的目标图像之后，还包括：

根据所述目标图像构造所述待制作动画的滚动动画。

实际应用中，需要播放动画的终端在根据所述背景图像以及各个位置图像构造得到动画对象的各个目标图像后，可以按顺序将各个目标图像拼接后进行播放，即可实现播放动画。

需要说明的是，动画对象在每个显示位置处显示都可以得到对应的位置图像，基于背景图像和各个位置图像，即可构造得到对应的滚动动画，无需单独绘制每一帧的全部动画内容，提高相同动画内容的复用率，大大节省了处理资源。

示例的，图4是本申请一实施例提供的一种构造滚动画面的示意图，如图4所示，(a)是指根据待制作动画的背景图像以及初始位置图像生成的初始图像，(b)是指动画对象移动到位置X1处保存的位置图像，(c)是指动画对象移动至位置X2处保存的位置图像，(d)是指动画对象移动至位置X3处保存的位置图像，然后分别依次结合初始图像(a)中的背景图像和(b)、(c)、(d)中的位置图像，即可构造得到相应的滚动动画。

需要说明的是，现有技术中往往是单独制作每一帧动画画面，假设动画共包括10帧动画画面，每一帧动画画面的大小为10M，其中背景图像占7M，动画对象占3M，那么现有技术中需要传递和下载的动画大小为10M*10M等于100M。而本申请中，只在最初渲染时，获取一次背景图像，后续仅传递动画对象的位置图像(即动画对象的移动过程)，即需要传递和下载的动画大小为10M+3*10M等于40M，可以大大节省处理资源。

本申请提供的图像处理方法，可以获取并渲染所述待制作动画的背景图像，且获取所述动画对象的预设初始位置，先根据所述预设初始位置生成所述动画对象的初始位置图像，再根据所述背景图像和所述初始位置图像，生成所述待制作动画的初始图像；然后，在检测到动画触发条件的情况下，在待制作动画的背景图像的预设移动区域内为动画对象设置至少一个显示位置，确定所述动画对象在所述至少一个显示位置的位置图像，之后根据所述背景图像以及所述位置图像构造所述动画对象的目标图像，然后根据所述目标图像构造所述待制作动画的滚动动画。

这种情况下，只需要在初始时获取并渲染一次动画的背景图像，之后，可以控制动画对象根据设置的显示位置进行移动，确定动画对象在每一个显示位置处显示的位置图像，后续仅根据背景图像和位置图像，即可构造得到动画对象的目标图像，从而得到待制作动画的滚动动画，无需重复绘制待制作动画的每一帧图像的全部内容，重复的背景内容只需在初始时获取并渲染一次，在后续动画帧中可以复用之前渲染的背景内容，提高了动画内容的复用率，且节省了处理资源；另外，只需加载背景图像和动画对象即可，无需加载完整的动画，需要获取的资源较小，节省了时间，避免了页面出现空白时间，提高了用户体验。

下述结合附图5，以本申请提供的图像处理方法在运营活动管理平台里配置扭蛋机场景中的应用为例，对所述图像处理方法进行进一步说明。其中，图5示出了本申请一实施例提供的一种应用于配置扭蛋机场景的图像处理方法的处理流程图，具体包括以下步骤：

步骤502：获取并渲染扭蛋机图像，获取扭蛋的预设初始位置，根据所述预设初始位置生成所述扭蛋的初始扭蛋图像，并根据所述扭蛋机图像和所述初始扭蛋图像，生成待制作动画的初始图像。

实际应用中，目前扭蛋机的实现，摆动画面和滚动动画都需要由设计人员画出每一帧(每一帧中包含扭蛋机的状态及每一个扭蛋的位置、旋转角度等)，再分别将静止摆动动画和滚动动画的图片帧合成动画，或者由前端将每一帧按固定顺序渲染成静止或滚动动画。然而，每一帧动画都需要单独绘制，重复的内容不能复用，且只要动画内容发生微小变化，就需要重新制作动画的每一帧画面，动画内容的复用率较低，浪费了大量的处理资源，动画制作效率较低。另外，在播放动画时，需要预先加载动画的每一帧内容，需要获取的资源较大，导致获取动画的时间较长，页面可能会出现空白时间，导致用户体验感受较差。

因而，本申请为了提高动画内容的复用率，节省处理资源，提供了一种图像处理方法，通过配置每一个扭蛋的初始位置和显示位置，即可动态生成摆动画面和滚动画面，配置更灵活，无需单独绘制动画的每一帧，重复的背景内容只需在初始时获取并渲染一次，在后续动画帧中可以复用之前渲染的内容，提高了动画内容的复用率，节省了处理资源；另外，只需加载背景图像和动画对象即可，无需加载完整的动画，需要获取的资源较小，节省了时间，避免了页面出现空白时间，提高了用户体验。

步骤504：为所述扭蛋设置安全区域。

具体实现时，可以对所述扭蛋机图像进行识别，确定所述扭蛋机图像中的球体区域，确定所述球体区域的最大内接四边形，将所述最大内接四边形确定为所述安全区域。

本申请中引入了安全区域的概念，由于每一个扭蛋在既定轨迹移动的过程中，还可能伴随着按自身中心点的旋转，引入“安全区域”可以保证每一个扭蛋在移动过程中自转不会超出容器。

步骤506：获取所述扭蛋的摆动参数，控制所述扭蛋以预设初始位置为中心，根据所述摆动参数进行摆动，构造所述扭蛋的摆动画面。

步骤508：在检测到抽奖控件被触发的情况下，在所述扭蛋机图像的安全区域内为所述扭蛋设置至少一个显示位置；然后确定扭蛋的总路径长度，并针对每个所述显示位置，确定所述显示位置与所述预设初始位置之间的移动路径长度，根据所述移动路径长度和所述总路径长度，确定所述显示位置对应的移动进度。

步骤510：获取所述扭蛋的自转参数，根据所述显示位置和所述自转参数，控制所述扭蛋在所述至少一个显示位置显示，以所述自转参数进行自转，并显示所述显示位置对应的移动进度，得到对应的扭蛋图像。

具体实现时，在获取预设初始位置、至少一个显示位置及对应的移动进度后，可以根据这些信息创建CSS的keyframes字符串，生成一个动画并为之命名(如rotate)并添加进样式表中，从而得到对应的扭蛋图像。

步骤512：根据所述扭蛋机图像以及所述扭蛋图像构造所述扭蛋的目标图像，并根据所述目标图像构造所述扭蛋的滚动动画。

步骤514：在所述滚动动画显示完成的情况下，返回执行步骤506，显示所述摆动画面。

本申请提供的图像处理方法，只需要获取并渲染一次待制作动画的扭蛋机图像，之后，可以控制扭蛋根据设置的显示位置进行移动，确定扭蛋在每一个显示位置处显示的扭蛋图像，后续仅根据扭蛋机图像和扭蛋图像，即可构造得到动画对象的目标图像，从而得到待制作动画的滚动动画，无需重复绘制扭蛋动画的每一帧图像的全部内容，重复的扭蛋机内容只需在初始时获取并渲染一次，在后续动画帧中可以复用之前渲染的扭蛋机内容，提高了动画内容的复用率，节省了处理资源；另外，只需加载扭蛋机图像和扭蛋即可，无需加载完整的动画，需要获取的资源较小，节省了时间，避免了页面出现空白时间，提高了用户体验。

与上述方法实施例相对应，本申请还提供了图像处理装置实施例，图6示出了本申请一实施例提供的一种图像处理装置的结构示意图。如图6所示，该装置包括：

设置模块602，被配置为在检测到动画触发条件的情况下，在待制作动画的背景图像的预设移动区域内为动画对象设置至少一个显示位置；

第一确定模块604，被配置为确定所述动画对象在所述至少一个显示位置的位置图像；

第一构造模块606，被配置为根据所述背景图像以及所述位置图像构造所述动画对象的目标图像。

可选地，所述装置还包括第二确定模块，被配置为：

对所述背景图像进行识别，确定所述背景图像中的动画区域；

确定所述动画区域的最大内接多边形；

将所述最大内接多边形确定为所述预设移动区域。

可选地，设置模块602进一步被配置为：

确定所述动画对象的预设动画参数，所述预设动画参数包括所述动画对象沿所述预设移动区域进行移动的移动圈数；

获取所述移动圈数组位置坐标，每组所述位置坐标为所述动画对象沿所述移动区域移动一圈对应的位置坐标，所述位置坐标位于所述预设移动区域内；

将每组所述位置坐标确定为所述至少一个显示位置。

可选地，设置模块602进一步被配置为：

确定所述动画对象在所述背景图像中移动所述移动圈数的总路径长度；

针对每个所述显示位置，确定所述显示位置与所述预设初始位置之间的移动路径长度；

根据所述移动路径长度和所述总路径长度，确定所述显示位置对应的移动进度。

可选地，所述预设动画参数还包括所述动画对象沿所述预设移动区域进行移动的移动方向；

设置模块602进一步被配置为：

根据所述移动方向，确定所述动画对象对应的各个显示位置的先后顺序；

根据所述先后顺序，确定相邻两个显示位置之间的移动距离；

根据所述相邻两个显示位置之间的移动距离，确定所述总路径长度。

可选地，设置模块602进一步被配置为：

将所述预设初始位置、所述显示位置，以及所述预设初始位置和显示位置之间的各个显示位置，确定为参考显示位置；

根据所述移动方向，确定所述动画对象对应的各个参考显示位置的先后顺序；

根据所述先后顺序，确定相邻两个参考显示位置之间的移动距离；

根据所述相邻两个参考显示位置之间的移动距离，确定所述移动路径长度。

可选地，第一确定模块604进一步被配置为：

控制所述动画对象在所述背景图像中对应的显示位置处显示，并显示所述显示位置对应的移动进度，得到对应的位置图像。

可选地，所述预设动画参数还包括所述动画对象在所述显示位置的显示时长，不同所述动画对象对应的显示时长相同或不同；

第一确定模块604进一步被配置为：

控制所述动画对象在所述至少一个显示位置显示所述显示时长，得到对应的位置图像。

可选地，所述装置还包括生成模块，被配置为：

获取并渲染所述待制作动画的背景图像；

获取所述动画对象的预设初始位置，根据所述预设初始位置生成所述动画对象的初始位置图像；

根据所述背景图像和所述初始位置图像，生成所述待制作动画的初始图像。

可选地，所述装置还包括第一获取模块，被配置为：

获取所述动画对象的自转参数，不同的所述动画对象对应的自转参数相同或不同；

相应地，所述第一确定模块604进一步被配置为：

根据所述显示位置和所述自转参数，控制所述动画对象在所述至少一个显示位置显示，并以所述自转参数进行自转，得到对应的位置图像。

可选地，所述装置还包括第二获取模块，被配置为：

获取所述动画对象的摆动参数，不同的所述动画对象的摆动参数相同或不同；

控制所述动画对象以所述预设初始位置为中心，根据所述摆动参数进行摆动，构造所述动画对象的摆动画面。

可选地，所述摆动参数包括摆动延时、摆动周期、摆动方向和摆动幅度；

所述第二获取模块进一步被配置为：

在到达所述摆动延时的情况下，控制所述动画对象以所述预设初始位置为中心，并以所述摆动周期和摆动幅度沿所述摆动方向进行摆动，构造所述动画对象的摆动画面。

可选地，所述装置还包括第二构造模块，被配置为：

根据所述目标图像构造所述待制作动画的滚动动画。

本申请提供的图像处理装置，只需要在初始时获取并渲染一次动画的背景图像，之后，可以控制动画对象根据设置的显示位置进行移动，确定动画对象在每一个显示位置处显示的位置图像，后续仅根据背景图像和位置图像，即可构造得到动画对象的目标图像，从而得到待制作动画的滚动动画，无需重复绘制待制作动画每一帧图像的全部内容，重复的背景内容只需在初始时获取并渲染一次，在后续动画帧中可以复用之前渲染的背景内容，提高了动画内容的复用率，节省了处理资源；另外，只需加载背景图像和动画对象即可，无需加载完整的动画，需要获取的资源较小，节省了时间，避免了页面出现空白时间，提高了用户体验。

上述为本实施例的一种图像处理装置的示意性方案。需要说明的是，该图像处理装置的技术方案与上述的图像处理方法的技术方案属于同一构思，图像处理装置的技术方案未详细描述的细节内容，均可以参见上述图像处理方法的技术方案的描述。

图7示出了根据本申请一实施例提供的一种计算设备700的结构框图。该计算设备700的部件包括但不限于存储器710和处理器720。处理器720与存储器710通过总线730相连接，数据库750用于保存数据。

计算设备700还包括接入设备770，接入设备770使得计算设备700能够经由一个或多个网络760通信。这些网络的示例包括公用交换电话网(PSTN)、局域网(LAN)、广域网(WAN)、个域网(PAN)或诸如因特网的通信网络的组合。接入设备770可以包括有线或无线的任何类型的网络接口(例如，网络接口卡(NIC))中的一个或多个，诸如IEEE802.11无线局域网(WLAN)无线接口、全球微波互联接入(Wi-MAX)接口、以太网接口、通用串行总线(USB)接口、蜂窝网络接口、蓝牙接口、近场通信(NFC)接口，等等。

在本申请的一个实施例中，计算设备700的上述部件以及图7中未示出的其他部件也可以彼此相连接，例如通过总线。应当理解，图7所示的计算设备结构框图仅仅是出于示例的目的，而不是对本申请范围的限制。本领域技术人员可以根据需要，增添或替换其他部件。

计算设备700可以是任何类型的静止或移动计算设备，包括移动计算机或移动计算设备(例如，平板计算机、个人数字助理、膝上型计算机、笔记本计算机、上网本等)、移动电话(例如，智能手机)、可佩戴的计算设备(例如，智能手表、智能眼镜等)或其他类型的移动设备，或者诸如台式计算机或PC的静止计算设备。计算设备700还可以是移动式或静止式的服务器。

其中，处理器720用于执行如下计算机可执行指令：

在检测到动画触发条件的情况下，在待制作动画的背景图像的预设移动区域内为动画对象设置至少一个显示位置；

确定所述动画对象在所述至少一个显示位置的位置图像；

根据所述背景图像以及所述位置图像构造所述动画对象的目标图像。

上述为本实施例的一种计算设备的示意性方案。需要说明的是，该计算设备的技术方案与上述的图像处理方法的技术方案属于同一构思，计算设备的技术方案未详细描述的细节内容，均可以参见上述图像处理方法的技术方案的描述。

本申请一实施例还提供一种计算机可读存储介质，其存储有计算机可执行指令，该计算机可执行指令被处理器执行时以用于上述图像处理方法的操作步骤。

上述为本实施例的一种计算机可读存储介质的示意性方案。需要说明的是，该存储介质的技术方案与上述的图像处理方法的技术方案属于同一构思，存储介质的技术方案未详细描述的细节内容，均可以参见上述图像处理方法的技术方案的描述。

上述对本申请特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。

所述计算机指令包括计算机程序代码，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质可以包括：能够携带所述计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、电载波信号、电信信号以及软件分发介质等。需要说明的是，所述计算机可读介质包含的内容可以根据司法管辖区内立法和专利实践的要求进行适当的增减，例如在某些司法管辖区，根据立法和专利实践，计算机可读介质不包括电载波信号和电信信号。

需要说明的是，对于前述的各方法实施例，为了简便描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本申请并不受所描述的动作顺序的限制，因为依据本申请，某些步骤可以采用其它顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定都是本申请所必须的。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其它实施例的相关描述。

以上公开的本申请优选实施例只是用于帮助阐述本申请。可选实施例并没有详尽叙述所有的细节，也不限制该发明仅为所述的具体实施方式。显然，根据本申请的内容，可作很多的修改和变化。本申请选取并具体描述这些实施例，是为了更好地解释本申请的原理和实际应用，从而使所属技术领域技术人员能很好地理解和利用本申请。本申请仅受权利要求书及其全部范围和等效物的限制。