动画制作方法、装置、计算机设备及存储介质与流程

本发明涉及动画制作领域，尤其涉及一种动画制作的方法、装置、计算机设备及存储介质。

背景技术：

目前实现网页动画的途径主要有adobeflash和第三方插件，两者各有各的特点和不足之处。adobeflash是较为传统的技术，使用最为广泛，目前市面上超过75％的网页动画都是基于该技术进行制作完成的，但是adobeflash制作过程非常复杂，同时增加了开发成本。使用第三方插件运行的网页动画也占有着一定比例，插件扩展了浏览器的功能，但同时带来了插件安装的麻烦以及潜在的安全隐患。因此，有必要提供一种动画制作方法以解决上述问题。

技术实现要素：

本发明提供了一种动画制作方法、装置、计算机设备及存储介质，旨在提高动画制作效率以及降低制作成本。

本发明提供了一种动画制作方法，其包括：

显示动画制作数组，所述动画制作数组包括多个用于动画制作的实例对象；

获取用户对所述实例对象进行设置而生成的动画需求信息；

基于预设动画框架，根据所述动画制作数组和动画需求信息生成动画，所述预设动画框架为基于html5和javascript实现的动画引擎。

本发明提供了一种动画制作装置，其包括：

数组显示单元，用于显示动画制作数组，所述动画制作数组包括多个用于动画制作的实例对象；

信息获取单元，用于获取用户对所述实例对象进行设置而生成的动画需求信息；

动画生成单元，用于基于预设动画框架，根据所述动画制作数组和动画需求信息生成动画，所述预设动画框架为基于html5和javascript实现的动画引擎。

本发明还提供了一种计算机设备，其包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述程序时实现本发明提供的任意一项所述的动画制作方法的步骤。

本发明还提供了一种计算机存储介质，其中所述计算机存储介质存储有计算机程序，所述计算机程序被处理器执行时使所述处理器执行本发明提供的任意实施例所述的动画制作方法的步骤。

本发明的实施例提供了动画制作方法、装置、计算机设备及存储介质，通过显示动画制作数组；获取用户对所述动画制作数组中的实例对象进行设置而生成的动画需求信息；基于预设动画框架，根据所述动画制作数组和动画需求信息生成动画，所述预设动画框架为基于html5和javascript实现的动画引擎。该预设动画框架为轻量型的框架，动画制作简单快捷，同时还可降低动画制作成本。

附图说明

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

图1是本发明实施例提供的动画制作方法所适用的动画框架的示意图；

图2是本发明一实施例提供的生成动画制作数组的步骤流程示意图；

图3是本发明一实施例提供的一种动画制作方法的示意流程图；

图4是本发明实施例提供的滤镜效果示意图；

图5是本发明实施例提供的运动轨迹的效果示意图；

图6是本发明一实施例提供的一种动画制作装置的示意性框图；

图7是本发明一实施例提供的一种计算机设备的示意性框图。

具体实施方式

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

应当理解，当在本说明书和所附权利要求书中使用时，术语“包括”和“包含”指示所描述特征、整体、步骤、操作、元素和/或组件的存在，但并不排除一个或多个其它特征、整体、步骤、操作、元素、组件和/或其集合的存在或添加。

还应当理解，在此本发明说明书中所使用的术语仅仅是出于描述特定实施例的目的而并不意在限制本发明。如在本发明说明书和所附权利要求书中所使用的那样，除非上下文清楚地指明其它情况，否则单数形式的“一”、“一个”及“该”意在包括复数形式。

还应当进一步理解，在本发明说明书和所附权利要求书中使用的术语“和/或”是指相关联列出的项中的一个或多个的任何组合以及所有可能组合，并且包括这些组合。

本发明实施例提供了一种动画制作方法、装置、计算机设备和存储介质。

为了便于理解，先对本发明实施例的动画制作方法所适用的动画框架组成进行介绍。该动画框架为预设动画框架，是基于html5和javascript开发的轻量型动画框架。如图1所示，该动画框架包括三个部分，分别为舞台类(stage)、对象类(sprite)和工具类(boxblur)。为了方便控制和操作，将所有的动画实例(实例对象)放在一个舞台上，只需要像个导演一样总的调控、控制舞台即可，这个舞台即由舞台类实例化得到，这里舞台类仅包括一个类，它可以实现舞台初始化、绘制所有动画等功能。舞台类也是直接面向用户的接口层，用户只需要搞清楚这个类的基本用法就可以绘制最基本的动画。

对象类的实例就是舞台上的一个一个动画，所以对象类的功能就是创建动画。比如包含动画类、鱼实例类、太阳实例类三个类。同时可以实现图片分割、图片绘制、路径设置、添加滤镜、添加物理效果等基础功能。图片分割可以将一幅多帧图片分割为一帧一帧的图片,并将其存入数组，这个步骤一般在初始化时完成，所以绘制时无需再分割图片，可以大幅度提高动画绘制速度；路径设置即根据用户设置的参数：动画的初始位置以及速度，计算每帧图片显示的具体位置；滤镜函数可以为图片添加不同的滤镜效果以增加真实感；添加物理效果可以使动画角色表现出诸如自由落体运动、匀速直线运动、反弹之类的物理效果，使得动画真实感更强；利用绘制函数，将已经准备就绪的图片绘制在画布上。鱼实例类、太阳实例类两个类继承自动画类，只是重载了动画的路径设置功能，当然用户可根据自身需求，扩展其他的动画实例类。

工具类主要功能是为对象类提供具体的滤镜算法，滤镜算法比如高斯模糊、色彩变换、透明度设置等。

基于html5和javascript的动画框架可以完成以下工作:图形绘制、路径设置、滤镜效果和物理效果。

具体地，动态图形需要绘制在画布上，才能展现在观众和玩家面前；大部分动画不是固定在画布上某一个位置的不便，比如一条鱼，它往往会在大海中游来游去，不会静止在某一个固定的地方，所以设置移动方式(移动路径和移动速度)也是赋予动画灵魂的关键；有些时候，希望给动画添加一些效果以增加一些真实感，比如将鱼的透明度进行设置以模仿不同深度的鱼；或者为了提高真实感，希望动画中的角色遵循正确的物理原理，展现出和现实生活中一样的物理效果，所以物理效果的添加对于一个动画的真实感十分关键。

本发明提供的动画制作方法不同现有动画制作方式，主要体现在该动画框架上。基于该动画框架，利用html5和javascript的优势，可以快速完成动画的制作，同时又可以降低动画制作成本。

为了便于理解，在介绍动画制作方法之前，先介绍生成动画制作数组的步骤，如图2所示，该步骤具体包括以下内容：

s101、获取制作动画所需的图片，并将所述图片保存在数组中以生成图片数组。

具体地，用户在制作动画时，需要准备相应的图片，比如制作海洋的鱼游来游去的动画，则相应需要准备鱼和海洋相应的图片，并将该相应的图片打包为图片文件夹，利用javascript的函数将图片文件夹转换成数组图片的方式进行保存，由此生成图片数组。

s102、遍历所述图片数组，根据所述图片数组中图片的类型参数创建相应的实例对象。

具体地，利用初始化函数遍历整个图片数组，动画框架可以根据图片数组中每一个图片的类型参数自动创建每个图片对应的实例对象，该类型参数包括图片的大小、透明度和颜色等。

其中，每一个实例对象均包括一个实例名称，该实例名称可以使用图片的编号，也可以采用其他标识。

s103、确定舞台素材，根据所述舞台素材绘制动画舞台。

具体地，该舞台素材可以采用一种图片，比如海洋的图片作为背景，当然也可以根据相应html5中函数进行绘制以确定舞台素材。在确定好舞台素材后，则可根据所述舞台素材绘制动画舞台。

s104、遍历所述图片数组中的实例对象，并将所述实例对象绘制在动画舞台上以生成所述动画制作数组。

具体地，可以遍历所述图片数组中的实例对象并将所述实例对象绘制在动画舞台上以生成所述动画制作数组，同时在用户需要制作动画时，将该动画制作数组作为对外用户接口提供给用户，该对外用户接口是一个包含制作动画所需的所有动画信息构成的数组，用户只需要按照该数组中的实例对象的对象名称填写自己的需求即可，例如初始时间、结束时间、开始位置、结束位置、滤镜效果、物理效果、移动方式等，动画框架会自动生成相应的动画，即便是不熟悉javascript语言的用户也可以很方便的编程。由此提高了动画的制作效率。

其中，还可设置一函数，由用户在外部每隔一段时间调用一次，它会清除整个画布，然后遍历整个图片数组，将其中的每一个实例对象的合适帧绘制在动画舞台上。具体绘制第几帧，将由函数的入口参数决定，该函数的入口参数可以用户进行设置。由此，还可提高用户的体验度。

在一实施例中，为了进一步地提高动画制作效率，步骤s101具体包括：将所述图片分割成多帧图片，并调用滤镜函数对所述每帧图片设置滤镜效果；将设置了滤镜效果的多帧图片保存在数组中以生成图片数组。

具体地，在获取制作动画所需的图片之后，生成图片数组之前，还可调用滤镜函数，分割多帧图片，将每一帧存入数组中，方便接下来绘图使用。同时，如果该实例对象需要使用滤镜，这样图片数组中保存的图片就是切割好并且已经添加过滤镜的，由此绘图函数可以直接使用。由此提高了绘制的效率。

在另一实施例中，步骤s101具体包括：将所述图片切割成多帧图片，并生成canvas画布；将每帧图片粘贴在所述canvas画布上并保存在数组中以生成图片数组。

具体地，为了提高绘图速度，在获取制作动画所需的图片之后，生成图片数组之前，首先需要切割图片，即把整张多帧图片进行切割，然后调用canvas函数生成一幅幅canvas画布，按照每帧图片的尺寸，将它们剪下依次贴在该画布上，然后把画有单帧图片的画布们保存在数组中以生成图片数组。利用canvas画布不仅可以方便用户进行后续修改或添加新的内容，同时还提高可动画制作效率。

请参阅图3，图3是本发明一实施例提供的一种动画制作方法的示意流程图。如图3所示，该方法可以应用于终端中，具体地需要将上述的预设动画框架配置在终端，该动画制作方法包括步骤s201～s203。

s201、显示动画制作数组，所述动画制作数组包括多个用于动画制作的实例对象。

具体地，将该动画制作数组作为对外用户接口提供给用户，该对外用户接口是一个包含制作动画所需的所有动画信息构成的数组，用户只需要按照该数组中的实例对象的对象名称填写自己的需求即可。由此通过终端显示该显示动画制作数组，其中所述动画制作数组包括多个用于动画制作的实例对象。以便用户进行动画制作。

此外，还可以设置一个动画制作按钮，当用户点击该动画制作按钮时，生成相应的动画制作指令，根据该动画制作指令显示动画制作数组，由此提高了用户制作体验。

s202、获取用户对所述实例对象进行设置而生成的动画需求信息。

具体地，根据所述实例对象的对象名称设置相应的参数信息，并根据所述对象名称及对应的参数信息生成动画需求信息，所述参数信息包括初始时间、结束时间、开始位置、结束位置、滤镜效果、移动方式和物理效果。当然还可包括其他的参数等。

滤镜效果：很多时候，用户往往希望舞台上的动画各自呈现不同的滤镜效果，如图4所示，比如两条一样的鱼，希望小一点的那条鱼透明度高一点，而大一点的透明度低一点，这样看起来，那条小一点的就像是离得较远，大的那条离得近一样。所以相比简单地给整个画布添加某一个滤镜，该方法通过给实施对象添加滤镜，效果更好，制作方法更为简单快捷。

移动方式：即路径设置，为了使动画动起来，更有生气更形象，需要为它们设置路径。提供三种基本的移动方式，sprite类默认的运动方式是匀速直线运动。根据入口参数的初始位置和终止位置，除以动画存在的时间，计算出两个方向上的平均速度。匀速直线运动可以满足基本的汽车、人物等大多数动画要求。由于基于html5和javascript的动画框架，fish类重载了move函数，定义了另外一种路径设置方式。

具体地，如果鱼在大海中直线前进，真实感很弱，所以为了体现鱼沉浮的状态，这里将鱼的路径设置为一个弧度较小的弧线。以开始点和结束点间的距离作为圆弧半径，将开始点和结束点作为圆弧上两点绘制一个60度圆弧作为fish的轨迹。将60度圆弧除以对象存在时间平均分为若干份，对象每秒滑过其中一份，据此利用几何原理计算出fish的运动速度。sun类同样重载了move函数。这里move函数模拟太阳一天中东升西落，采用半圆路径。以开始点和结束点间的距离的一半作为圆弧半径,将开始点和结束点作为圆弧上两点，绘制一个180度圆弧—即半圆作为sun的轨迹。将180度除以对象存在时间平均分为若干份，对象每秒滑过其中一份，据此利用几何原理计算出sun的运动速度。如图5所示，图5为采用自定义的移动方式的效果图。此外，用户还可以自行扩展该框架，通过重载move函数，根据move函数自定义所述移动方式。由此提供动画真实感。

物理效果：现实生活中，物理效果无所不在，且十分复杂。但是现有动画中无法真实地展示物理效果。而本发明可以借助该动画框架应用相应的函数公式即可完成，比如自由落体公式，平抛公式等。

此外，还可以设置缓动、快进与关键帧。设置好上面所有参数之后，还可设置动画显示帧。很多时候，希望每一帧显示的时间不一样长，比如一个开灯的动画中，开灯只是一瞬间的事情，希望灯亮前的黑暗状态短一些和灯亮后的明亮状态长一些。这里利用关键帧来实现，将开灯动作的动画设置只显示一次或较少次数，将动作前和动作后的动画设置显示多次，即可模拟这个动画。

在比如，在一个汽车下坡的动画中，汽车在坡顶的速度应该较慢，而在坡底的时间则应该较快，这里可以按照牛顿第二定律，设置汽车在坡顶的动画循环多次，而在坡底的动画循环次数少一些，就可以真实呈现这一物理情景。

当然，还可以在制作动画过程中，利用动画框架的javascript函数修改动画的缓动或快进效果，通过将某一帧的显示次数减少来模拟快进，而将某一帧的显示次数增加来模拟缓动，因此十分方便快捷。

s203、基于预设动画框架，根据所述动画制作数组和动画需求信息生成动画，所述预设动画框架为基于html5和javascript实现的动画引擎。

具体地，利用预设动画框架根据所述动画制作数组和动画需求信息自动生成相应的动画，该方法是基于html5和javascript中的函数实现的，由此省去繁琐的操作步骤，同时还提高了动画制作效率，也相应地降低了动画制作的人工成本。

此外，对应于图片数组中的canvas画布，还可利用html5的canvas标签，canvas标签就像一个画册一样，包括多个canvas元素，每个canvas元素即是动画制作数组中的实例对象和其对应的动画需求信息，由此可以利用canvas标签生成动画。

此外，每一个canvas元素都有一个绘图，相当于这本画册中的一页，可以在canvas绘图上绘制任意图形，支持html5的canvas标签的浏览器提供不同的api即可实现提供绘制功能。

在本实施例中，通过显示动画制作数组；获取用户对所述动画制作数组中的实例对象进行设置而生成的动画需求信息；基于预设动画框架，根据所述动画制作数组和动画需求信息生成动画，所述预设动画框架为基于html5和javascript实现的动画引擎。该预设动画框架为轻量型的框架，动画制作简单快捷，同时还可降低动画制作成本。

图6是本发明一实施例提供的一种动画制作装置的示意性框图。如图6所示，对应于以上动画制作方法，本发明还提供一种动画制作装置。该动画制作装置包括用于执行上述动画制作方法的单元，该装置可以被配置于终端中。

如图6所示，该动画制作装置400包括：获取保存单元401、遍历创建单元402、确定绘制单元403、遍历绘制单元404、数组显示单元405、信息获取单元406和动画生成单元407。

获取保存单元401，用于获取制作动画所需的图片，并将所述图片保存在数组中以生成图片数组。

遍历创建单元402，用于遍历所述图片数组，根据所述图片数组中图片的类型参数创建相应的实例对象。

确定绘制单元403，用于确定舞台素材，根据所述舞台素材绘制动画舞台。

遍历绘制单元404，用于遍历所述图片数组中的实例对象，并将所述实例对象绘制在动画舞台上以生成所述动画制作数组。

数组显示单元405，用于显示动画制作数组，所述动画制作数组包括多个用于动画制作的实例对象。

信息获取单元406，用于获取用户对所述实例对象进行设置而生成的动画需求信息。

动画生成单元407，用于基于预设动画框架，根据所述动画制作数组和动画需求信息生成动画，所述预设动画框架为基于html5和javascript实现的动画引擎。

所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，上述描述的动画制作装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

请参阅图7，图7是本发明实施例提供的一种计算机设备的示意性框图。该计算机设备700可以是终端。其中，用户终端可以是智能手机、平板电脑、笔记本电脑、台式电脑、个人数字助理和穿戴式设备等电子设备。

参照图7，该计算机设备700包括通过系统总线710连接的处理器720、存储器和网络接口750，其中，存储器可以包括非易失性存储介质730和内存储器740。

该非易失性存储介质730可存储操作系统731和计算机程序732。该计算机程序732被执行时，可使得处理器720执行任意一种动画制作方法。

该处理器720用于提供计算和控制能力，支撑整个计算机设备700的运行。

该内存储器740为非易失性存储介质730中的计算机程序732的运行提供环境，该计算机程序732被处理器720执行时，可使得处理器720执行任意一种动画制作方法。

该网络接口750用于进行网络通信，如发送分配的任务等。本领域技术人员可以理解，图7中示出的结构，仅仅是与本发明方案相关的部分结构的框图，并不构成对本发明方案所应用于其上的计算机设备700的限定，具体的计算机设备700可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。其中，所述处理器720用于运行存储在存储器中的程序代码，以实现如下步骤：

显示动画制作数组，所述动画制作数组包括多个用于动画制作的实例对象；

获取用户对所述实例对象进行设置而生成的动画需求信息；

基于预设动画框架，根据所述动画制作数组和动画需求信息生成动画，所述预设动画框架为基于html5和javascript实现的动画引擎。

在一实施例中，所述处理器720用于运行存储在存储器中的程序代码实现所述显示动画制作数组之前，还实现如下步骤：

获取制作动画所需的图片，并将所述图片保存在数组中以生成图片数组；

遍历所述图片数组，根据所述图片数组中图片的类型参数创建相应的实例对象；

确定舞台素材，根据所述舞台素材绘制动画舞台；

遍历所述图片数组中的实例对象，并将所述实例对象绘制在动画舞台上以生成所述动画制作数组。

在一实施例中，所述处理器720用于运行存储在存储器中的程序代码实现所述获取制作动画所需的图片之后，还实现如下步骤：

将所述图片分割成多帧图片，并调用滤镜函数对所述每帧图片设置滤镜效果；将设置了滤镜效果的多帧图片保存在数组中以生成图片数组。

在一实施例中，所述处理器720用于运行存储在存储器中的程序代码实现所述获取制作动画所需的图片之后，还实现如下步骤：

将所述图片切割成多帧图片，并生成canvas画布；将每帧图片粘贴在所述canvas画布上并保存在数组中以生成图片数组。

在一实施例中，所述处理器720用于运行存储在存储器中的程序代码实现所述获取用户对所述实例对象进行设置而生成的动画需求信息时，具体实现如下步骤：

根据所述实例对象的对象名称设置相应的参数信息，并根据所述对象名称及对应的参数信息生成动画需求信息，所述参数信息包括初始时间、结束时间、开始位置、结束位置、滤镜效果、物理效果和移动方式。

在一实施例中，所述处理器720用于运行存储在存储器中的程序代码实现所述根据所述实例对象的对象名称设置相应的参数信息之前，还实现如下步骤：

根据move函数自定义所述移动方式。

应当理解，在本发明实施例中，处理器720可以是中央处理单元(centralprocessingunit，cpu)，该处理器720还可以是其他通用处理器、数字信号处理器(digitalsignalprocessor，dsp)、专用集成电路(applicationspecificintegratedcircuit，asic)、现成可编程门阵列(field-programmablegatearray，fpga)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。其中，通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

本领域技术人员可以理解，图7中示出的计算机设备700结构并不构成对计算机设备700的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

本领域普通技术人员可以理解的是实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，计算机程序可存储于一存储介质中，该存储介质为计算机可读存储介质。如本发明实施例中，该计算机程序可存储于计算机系统的存储介质中，并被该计算机系统中的至少一个处理器执行，以实现包括如上述各方法的实施例的流程步骤。

该计算机可读存储介质可以是磁碟、光盘、u盘、移动硬盘、只读存储器(rom，read-onlymemory)、磁碟或者光盘等各种可以存储程序代码的介质。

本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。

在本发明所提供的几个实施例中，应该理解到，所揭露的动画制作装置和方法，可以通过其它的方式实现。例如，以上所描述的动画制作装置实施例仅仅是示意性的。例如，各个单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式。例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。

本发明实施例方法中的步骤可以根据实际需要进行顺序调整、合并和删减。

本发明实施例装置中的单元可以根据实际需要进行合并、划分和删减。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以是两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

该集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分，或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，终端，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。

以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到各种等效的修改或替换，这些修改或替换都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以权利要求的保护范围为准。