CN115618155A

CN115618155A - 一种生成动画的方法、装置、计算机设备及存储介质

Info

Publication number: CN115618155A
Application number: CN202211635967.8A
Authority: CN
Inventors: 何靖威; 黄武
Original assignee: Chengdu Techman Software Co Ltd
Current assignee: Chengdu Techman Software Co Ltd
Priority date: 2022-12-20
Filing date: 2022-12-20
Publication date: 2023-01-17
Anticipated expiration: 2042-12-20
Also published as: CN115618155B

Abstract

本发明涉及线上教育技术领域，尤其涉及一种生成动画的方法、装置、计算机设备及存储介质，该方法包括：获取待生成动画的目标元素，获取目标元素在至少一个目标动画样式过程中的初始帧、至少一个中间关键帧以及结束帧，并放入对应于每个目标动画样式的队列中并反转，得到每个目标动画样式的反显队列；基于每个目标动画样式的反显队列，生成初始帧、至少一个中间关键帧以及结束帧中任意相邻两者之间的过渡帧，并将过渡帧存入反显队列的相应位置，得到目标队列；基于目标队列，生成目标元素的动画，该动画包括至少一个目标动画样式，进而通过无代码的方式生成动画，提高了线上教育的网页制作效率。

Description

一种生成动画的方法、装置、计算机设备及存储介质

技术领域

本发明涉及线上教育技术领域，尤其涉及一种生成动画的方法、装置、计算机设备及存储介质。

背景技术

现在网络教学，虚拟教学需求急剧增加，由原本的纸质载体变为电子载体，教师能通过简单的操作，就能制作课件成为一种需求，从而推动无代码平台发展，教师或其他用户可以自由制作网页，当成课件等等。

现有在用户拖拽组件放置在画布上时，位置和大小都是需要用户定义，上传，再添加相关交互事件，从而实现页面生成，但是，其效率较低。

因此，如何提高线上教育的网页制作效率是目前亟待解决的技术问题。

发明内容

鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的生成动画的方法、装置、计算机设备及存储介质。

第一方面，本发明提供了一种生成动画的方法，包括：

获取待生成动画的目标元素；

获取所述目标元素在至少一个目标动画样式过程中的初始帧、至少一个中间关键帧以及结束帧，并放入对应于每个目标动画样式的队列中并反转，得到每个目标动画样式的反显队列；

基于每个目标动画样式的反显队列，生成所述初始帧、至少一个中间关键帧以及结束帧中任意相邻两者之间的过渡帧，并将所述过渡帧存入所述反显队列的相应位置，得到目标队列；

基于所述目标队列，生成所述目标元素的动画，所述动画包括至少一个目标动画样式。

优选地，所述目标元素包括如下任意一种：

输入框元素、文本元素、图片元素、视频元素、音频元素及线条元素。

优选地，所述获取待生成动画的目标元素之后，还包括：

对所述目标元素的颜色、位置以及尺寸进行调整。

优选地，在基于每个目标动画样式的反显队列，生成所述初始帧、至少一个中间关键帧以及结束帧中任意相邻两者之间的过渡帧，并将所述过渡帧存入所述反显队列的相应位置，得到目标队列之后，还包括：

对所述目标队列中的初始帧、至少一个中间关键帧、结束帧，以及初始帧、至少一个中间关键帧、结束帧中任意相邻两者之间的过渡帧之间的时间间距进行调整，以控制至少一个目标动画样式的展现时间。

优选地，在对所述目标队列中的初始帧、至少一个中间关键帧、结束帧，以及初始帧、至少一个中间关键帧、结束帧中任意相邻两者之间的过渡帧之间的时间间距进行调整，以控制至少一个目标动画样式的展现时间之后，还包括：

对所述至少一个目标动画样式绑定点击事件。

优选地，所述点击事件包括如下内容：

单击事件、双击事件、鼠标移入事件、鼠标移出事件以及无事件状态。

优选地，所述基于所述目标队列，生成所述目标元素的动画，所述动画包括至少一个目标动画样式，包括：

将每个目标动画样式所对应的目标队列按照预设顺序移至预设框内，生成所述目标元素的动画，所述动画包括至少一个目标动画样式。

第二方面，本发明还提供了一种生成动画的装置，包括：

第一获取模块，用于获取待生成动画的目标元素；

第二获取模块，用于获取所述目标元素在至少一个目标动画样式过程中的初始帧、至少一个中间关键帧以及结束帧，并放入对应于每个目标动画样式的队列中并反转，得到每个目标动画样式的反显队列；

第一生成模块，用于基于每个目标动画样式的反显队列，生成所述初始帧、至少一个中间关键帧以及结束帧中任意相邻两者之间的过渡帧，并将所述过渡帧存入所述反显队列的相应位置，得到目标队列；

第二生成模块，用于基于所述目标队列，生成所述目标元素的动画，所述动画包括至少一个目标动画样式。

第三方面，本发明还提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现第一方面中所述的方法步骤。

第四方面，本发明还提供了一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现第一方面中所述的方法步骤。

本发明实施例中的一个或多个技术方案，至少具有如下技术效果或优点：

本发明提供了一种生成动画的方法，包括：获取待生成动画的目标元素，获取目标元素在至少一个目标动画样式过程中的初始帧、至少一个中间关键帧以及结束帧，并放入对应于每个目标动画样式的队列中并反转，得到每个目标动画样式的反显队列；基于每个目标动画样式的反显队列，生成初始帧、至少一个中间关键帧以及结束帧中任意相邻两者之间的过渡帧，并将过渡帧存入反显队列的相应位置，得到目标队列；基于目标队列，生成目标元素的动画，该动画包括至少一个目标动画样式，进而通过无代码的方式生成动画，提高了线上教育的网页制作效率。

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考图形表示相同的部件。在附图中：

图1示出了本发明实施例中生成动画的方法的步骤流程示意图；

图2示出了本发明实施例中元素调整尺寸的示意图；

图3示出了本发明实施例中控制动画播放时长的示意图；

图4示出了本发明实施例中生成动画的装置的结构示意图；

图5示出了本发明实施例中实现生成动画的方法的计算机设备的结构示意图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

实施例一

本发明的实施例提供了一种生成动画的方法，如图1所示，包括：

S101，获取待生成动画的目标像素；

S102，获取目标元素在至少一个目标动画样式过程中的初始帧、至少一个中间关键帧以及结束帧，并放入对应于每个目标动画样式的队列中并反转，得到每个目标动画样式的反显队列；

S103，基于每个目标动画样式的反显队列，生成初始帧、至少一个中间关键帧以及结束帧中任意相邻两者之间的过渡帧，并将过渡帧存入反显队列的相应位置，得到目标队列；

S104，基于目标队列，生成目标元素的动画，该动画包括至少一个目标动画样式。

首先，数据库中存储有大量元素，这些元素包括如下内容：输入框元素、文本元素、图片元素、视频元素、音频元素以及线条元素。当然，还可以有其他元素，在此就不再详细赘述了。

S101，获取待生成动画的目标元素，比如，获取输入框元素，可以形成按钮的动画。

在获取待生成动画的目标元素之后，对目标元素的颜色、位置以及尺寸进行调整。

其中，对目标元素A的位置进行调整时，具体是将目标元素A拖拽到任意位置来调整；对目标元素A的尺寸进行调整时，具体是对目标元素A的各个拖拽点B进行拖拽，以实现目标元素A的尺寸变化，具体如图2所示。对目标元素A的颜色则通过常规上色方式即可。

在确定目标元素A的颜色、位置以及尺寸之后，执行S102，获取目标元素在至少一个目标动画样式过程中的初始帧、至少一个中间关键帧以及结束帧，并放入对应每个目标动画样式的队列中并反转，得到每个目标动画样式的反显队列。

由于数据库中存储有很多动画样式，比如，对于按钮来说，可实现的动画有点击过程所实现的按下并回弹的动画样式，放大后又缩小的动画样式，高亮的动画样式等等，在此就不再详细赘述了。对于动画样式也可以通过用户自定义的方式实现，极大地确保了用户的使用需求。

对于每种动画样式，都对应有初始帧、至少一个中间关键帧以及结束帧。比如，对于按下并回弹的动画样式，初始帧为鼠标所对应的箭头落在按钮上的图像，其中一个中间关键帧为点击鼠标之后，该按钮被按下的图像，结束帧为鼠标回弹时所对应的按钮回弹的图像。当然，对于其他动画样式的初始帧、至少一个中间关键帧以及结束帧就不再详细赘述了。

其中，中间关键帧可以为一个也可以为多个，所有在动画样式展示过程中所出现的转折点都可以被当成中间关键帧。

在获取上述初始帧、至少一个中间关键帧以及结束帧之后，将初始帧、至少一个中间关键帧以及结束帧依次放入对应的目标动画样式的队列中，此时，由于初始帧在最下面，结束帧在最上面，若此时实现动画效果，则呈现倒序播放；因此，将初始帧、至少一个中间关键帧以及结束帧的队列进行反转，使得结束帧在最下面，初始帧在最上面，此时实现动画效果，则呈现正序播放，得到每个目标动画样式的反显队列。

接着，执行S103，基于每个目标动画样式的反显队列，生成初始帧、至少一个中间关键帧以及结束帧中任意相邻两者之间的过渡帧，并将过渡帧存入反显队列的相应位置，得到目标队列。

由于动画样式的实现需要连续帧图像，因此，在网页浏览器可以根据初始帧、至少一个中间关键帧以及结束帧生成在初始帧与中间关键帧，相邻的中间关键帧，以及中间关键帧与结束帧之间的过渡帧，这样，得到动画样式的实现过程的所有连续帧图像，形成目标队列，该目标队列中存储有动画样式的所有连续帧图像。

接下来，对该目标队列中的初始帧、至少一个中间关键帧、结束帧以及初始帧、至少一个中间关键帧、结束帧中任意相邻两者之间的过渡帧之间的时间间距进行调整，以控制至少一个目标动画样式的展现时间。

如图3所示，以目标队列中包括顺次的初始关键帧301、第一过渡帧302、第一中间关键帧303、第二中间关键帧304、第二过渡帧305、以及结束帧306为例，通过调整在初始关键帧301与第一过渡帧302之间的时间间距，第一过渡帧302与第一中间关键帧303之间的时间间距，第一中间关键帧303与第二中间关键帧304之间的时间间距，第二中间关键帧304与第二过渡帧305之间的时间间距以及第二过渡帧305与结束帧306，从而控制至少一个目标动画样式的展现时间，该时间间距通过时间轴307体现。

在确定每个目标动画样式之后，还包括：对至少一个目标动画样式的绑定点击事件。

其中，该点击事件包括：单击事件、双击事件、鼠标移入事件、鼠标移出事件以及无事件状态。其中，无事件状态具体是网页没有被任何点击事件触发时的状态。

通过对每个目标动画样式绑定点击事件，可以控制动画播放的时机。

最后，执行S104，基于该目标队列，生成目标元素的动画，该动画包括至少一个目标动画样式。

具体地，将每个目标动画样式所对应的目标队列按照预设顺序移至预设框内，生成目标元素的动画，该动画包括至少一个目标动画样式。

以按钮为例，为了实现按钮的动画，可以有两个目标动画样式，一个是点击按钮所呈现的按钮按下后回弹的样式，一个是箭头聚焦在按钮上按钮变大的样式，因此，生成目标元素的动画过程中，即是将箭头聚焦在按钮上按钮变大的目标动画样式拖入预设框内，将按钮按下后回弹的目标动画样式拖入预设框内，并将这两个目标动画样式按照所呈现的顺序进行排序，由此生成目标元素的动画。

对于制作一份网页课件或者PPT课件来说，不仅包括了按钮这一动画展示，还包括了其他文字元素的动画、音频元素的动画、视频元素的动画等等，在此就不再详细赘述了，以制作者在制作过程中的实现为准。进而提高了制作的效率。

实施例二

基于相同的发明构思，本发明实施例还提供了一种生成动画的装置，如图4所示，包括：

第一获取模块401，用于获取待生成动画的目标元素；

第二获取模块402，用于获取所述目标元素在至少一个目标动画样式过程中的初始帧、至少一个中间关键帧以及结束帧，并放入对应于每个目标动画样式的队列中并反转，得到每个目标动画样式的反显队列；

第一生成模块403，用于基于每个目标动画样式的反显队列，生成所述初始帧、至少一个中间关键帧以及结束帧中任意相邻两者之间的过渡帧，并将所述过渡帧存入所述反显队列的相应位置，得到目标队列；

第二生成模块404，用于基于所述目标队列，生成所述目标元素的动画，所述动画包括至少一个目标动画样式。

在一种可选的实施方式中，所述目标元素包括如下任意一种：

在一种可选的实施方式中，还包括：调整模块，用于：

对所述目标元素的颜色、位置以及尺寸进行调整。

在一种可选的实施方式中，还包括：控制模块，用于：

在基于每个目标动画样式的反显队列，生成所述初始帧、至少一个中间关键帧以及结束帧中任意相邻两者之间的过渡帧，并将所述过渡帧存入所述反显队列的相应位置，得到目标队列之后，对所述目标队列中的初始帧、至少一个中间关键帧、结束帧，以及初始帧、至少一个中间关键帧、结束帧中任意相邻两者之间的过渡帧之间的时间间距进行调整，以控制至少一个目标动画样式的展现时间。

在一种可选的实施方式中，还包括：绑定模块，用于：

对所述至少一个目标动画样式绑定点击事件。

在一种可选的实施方式中，所述点击事件包括如下内容：

在一种可选的实施方式中，所述第二生成模块404，用于：

实施例三

基于相同的发明构思，本发明实施例提供了一种计算机设备，如图5所示，包括存储器504、处理器502及存储在存储器504上并可在处理器502上运行的计算机程序，所述处理器502执行所述程序时实现上述生成动画的方法的步骤。

其中，在图5中，总线架构（用总线500来代表），总线500可以包括任意数量的互联的总线和桥，总线500将包括由处理器502代表的一个或多个处理器和存储器504代表的存储器的各种电路链接在一起。总线500还可以将诸如外围设备、稳压器和功率管理电路等之类的各种其他电路链接在一起，这些都是本领域所公知的，因此，本文不再对其进行进一步描述。总线接口506在总线500和接收器501和发送器503之间提供接口。接收器501和发送器503可以是同一个元件，即收发机，提供用于在传输介质上与各种其他装置通信的单元。处理器502负责管理总线500和通常的处理，而存储器504可以被用于存储处理器502在执行操作时所使用的数据。

实施例四

基于相同的发明构思，本发明实施例提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述生成动画的方法的步骤。

在此提供的算法和显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述，构造这类系统所要求的结构是显而易见的。此外，本发明也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。

在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。

类似地，应当理解，为了精简本公开并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如下面的权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本发明的单独实施例。

本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书（包括伴随的权利要求、摘要和附图）中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书（包括伴随的权利要求、摘要和附图）中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。

此外，本领域的技术人员能够理解，尽管在此的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如，在下面的权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。

本发明的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器（DSP）来实现根据本发明实施例的生成动画的装置、计算机设备中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序（例如，计算机程序和计算机程序产品）。这样的实现本发明的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。

应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。

Claims

1.一种生成动画的方法，其特征在于，包括：

获取待生成动画的目标元素；

2.如权利要求1所述的方法，其特征在于，所述目标元素包括如下任意一种：

3.如权利要求1所述的方法，其特征在于，所述获取待生成动画的目标元素之后，还包括：

对所述目标元素的颜色、位置以及尺寸进行调整。

4.如权利要求1所述的方法，其特征在于，在基于每个目标动画样式的反显队列，生成所述初始帧、至少一个中间关键帧以及结束帧中任意相邻两者之间的过渡帧，并将所述过渡帧存入所述反显队列的相应位置，得到目标队列之后，还包括：

5.如权利要求4所述的方法，其特征在于，在对所述目标队列中的初始帧、至少一个中间关键帧、结束帧，以及初始帧、至少一个中间关键帧、结束帧中任意相邻两者之间的过渡帧之间的时间间距进行调整，以控制至少一个目标动画样式的展现时间之后，还包括：

对所述至少一个目标动画样式绑定点击事件。

6.如权利要求5所述的方法，其特征在于，所述点击事件包括如下内容：

7.如权利要求1所述的方法，其特征在于，所述基于所述目标队列，生成所述目标元素的动画，所述动画包括至少一个目标动画样式，包括：

8.一种生成动画的装置，其特征在于，包括：

第一获取模块，用于获取待生成动画的目标元素；

9.一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如权利要求1~7中任一权利要求所述的方法步骤。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1~7中任一权利要求所述的方法步骤。