CN107895394A - 动画特效实现方法、装置、终端设备及存储介质 - Google Patents

Abstract

本发明公开了一种动画特效实现方法、装置、终端设备及存储介质。该动画特效实现方法包括：预先采用H5和CSS3创建至少一个动画特效模板，每一动画特效模板包括模板ID和程序代码，所述程序代码包括位图参数；在当前界面上配置至少一个特效区域，每一所述特效区域包括区域ID和区域参数；采用JS将所述模板ID和所述区域ID关联，并将所述区域ID对应的区域参数传递给所述模板ID对应的位图参数，以更新所述模板ID对应的程序代码；运行更新后的所述程序代码，在所述特效区域上显示与所述程序代码对应的动画特效。该动画特效实现方法基于H5和CSS3创建动画特效模板，根据需求调用动画特效模板，提高了开发效率，纯代码实现动画特效能够提高动画特效的响应速度。

Description

动画特效实现方法、装置、终端设备及存储介质

技术领域

本发明涉及特效处理领域，尤其涉及一种动画特效实现方法、装置、终端设备及存储介质。

背景技术

随着社会的不断发展，人们对界面显示的要求日益提高。由于动画富有美感并且具有直观性，使得动画在界面上的应用越来越广泛。当前界面上应用的动画大多需要依赖插件或者canvas技术实现。采用插件虽然能够实现制作精美动画的效果，但是插件的引入会导致响应速度过慢、动画效果会有卡顿感、占用主线程和动画效果单一等问题。而采用canvas制作动画特效时会存在占用主线程而导致响应速度慢的问题。

发明内容

本发明实施例提供一种动画特效实现方法、装置、终端设备及存储介质，以解决当前动画特效制作过程响应速度慢的问题。

第一方面，本发明实施例提供一种动画特效实现方法，包括：

预先采用H5和CSS3创建至少一个动画特效模板，每一所述动画特效模板包括模板ID和程序代码，所述程序代码包括位图参数；

在当前界面上配置至少一个特效区域，每一所述特效区域包括区域ID和区域参数；

采用JS将所述模板ID和所述区域ID关联，并将所述区域ID对应的区域参数传递给所述模板ID对应的位图参数，以更新所述模板ID对应的程序代码；

运行更新后的所述程序代码，在所述特效区域上展示与所述程序代码对应的动画特效。

第二方面，本发明实施例提供一种动画特效实现装置，包括：

动画特效模板创建模块，用于预先采用H5和CSS3创建至少一个动画特效模板，每一所述动画特效模板包括模板ID和程序代码，所述程序代码包括位图参数；

特效区域配置模块，用于在当前界面上配置至少一个特效区域，每一所述特效区域包括区域ID和区域参数；

程序代码参数传递模块，用于采用JS将所述模板ID和所述区域ID关联，并将所述区域ID对应的区域参数传递给所述模板ID对应的位图参数，以更新所述模板ID对应的程序代码；

动画特效展示模块，用于运行更新后的所述程序代码，在所述特效区域上展示与所述程序代码对应的动画特效。

第三方面，本发明实施例提供一种终端设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现所述动画特效实现方法的步骤。

第四方面，本发明实施例提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现所述动画特效实现方法的步骤。

本发明实施例提供的动画特效实现方法、装置、终端设备及存储介质中，基于H5和CSS3创建动画特效模板，使动画特效模板创建过程中不引入插件或者canvas技术，通过纯代码实现动画特效模板的创建，以加快动画特效的响应速度。给每一动画特效模设定唯一模板ID,并通过模板ID确定当前需要的动画特效模板，以实现动画特效模板的重复调用，以减少开发成本。在当前界面上配置特效区域，给每一特效区域设定唯一区域ID，通过区域ID确认动画特效要展示的特效区域。采用JS将模板ID和区域ID关联，并将区域ID对应的区域参数传递给模板ID对应的位图参数，以更新模板ID对应的程序代码，运行更新后的程序代码，在特效区域展示相对应的与更新后的程序代码相对应动画特效。该动画特效实现方法、装置、终端设备及存储介质，基于H5和CSS3可实现纯代码创建动画特效模板，后续采用JS实现参数传递，以获取并运行更新后的程序代码，从而在当前界面上展示动画特效，提高动画特效的响应速度。

附图说明

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

图1是本发明实施例1中提供的动画特效实现方法的一流程图。

图2是图1中步骤S40的一具体流程图。

图3是图1中步骤S40的一具体流程图。

图4是图1中步骤S40的一具体流程图。

图5是图1中介于步骤S30和步骤S40中间的一具体流程图。

图6是本发明实施例2中提供的动画特效实现装置的一原理框图。

图7是本发明实施例4中提供的终端设备的示意图。

具体实施方式

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

实施例1

图1示出本实施例中动画特效实现方法的流程图。该动画特效实现方法应用在终端设备上，用于实现对终端设备的网页进行动画特效制作或者对安装在终端设备上的APP进行动画特效制作，用于提高动画特效的响应速度。如图1所示，该动画特效实现方法包括如下步骤：

S10：预先采用H5和CSS3创建至少一个动画特效模板，每一动画特效模板包括模板ID和程序代码，程序代码包括位图参数。

其中，H5即HTML5的简称，是一种超文本标记语言，拥有包括语义特性、本地存储特性、设备兼容特性、连接特性、网页多媒体特性、三维、图形及特效特性和性能与集成特性等多重特性。H5中引入许多新元素和属性，赋予网页更好的意义和结构，提供前所未有的数据与应用接入的开放接口，使外部应用可以直接与浏览器内部的数据直接相连。

CSS3是CSS技术的升级版本，CSS(Cascading Style Sheets，即层叠样式表)，在页面制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果进行更加精确的控制。在CSS中，只要对相应的代码进行修改，就可以改变同一页面的相应部分，或者修改数量不同的页面的外观和/或格式。与CSS相比，CSS3不仅有利于开发与维护，而且能提高页面所在网站的性能，增加网站的可访问性和可用性，使网站能适配更多的设备，甚至还可以优化网站SEO，提高网站的搜索排名结果。

动画特效模板是指通过预先设置的代码程序实现动画特效的模板。与以往的html版本语言相比，H5提供的开放接口，使其在不牺牲性能和语义结构的前提下，可与CSS3进行结合。与CSS相比，CSS3中新增的box-shadow、animation等属性和@keyframes等规则使通过代码实现图标和动画效果制作成为可能，不再完全依赖图片或者flash实现页面图片展示和动画特效展示，在页面中加入图片或者gif格式的flash的方法会增加服务器对图片的请求进而降低动画响应速度。

H5与CSS3结合提供了更多的风格和更强的页面效果。基于H5和CSS3创建动画特效模板，对动画特效模板中需要使用到的图标，可以对H5标签的样式采用CSS3的box-shadow属性进行设置进而实现图标制作，box-shadow属性的本质就是复制，通过复制并调整其位置，便可实现图标；对动画特效模板，可以对H5标签的样式采用CSS3中的annimation属性进行设置并调用事先基于@keyframes规则定义的动画特效各阶段的状态，通过annimation属性使@keyframes规则定义的动画特效各阶段的状态动态的流畅展示，以实现动画特效。每一个动画特效模板内容包括模板ID和程序代码。模板ID是用于识别不同动画特效模板的标识，一个动画特效模板对应一唯一模板ID，以便于通过模板ID快速查找到对应的动画特效模板。程序代码包括用于实现动画特效的特效函数，每一特效函数对应配置有位图参数和动画特效参数。位图参数是指特效函数所要实现的区域的位置参数和大小参数，该位图参数为形式参数，可通过后续参数传递进行更新，以确定其所要在界面上显示的实际位置和实际大小。动画特效参数是用于控制特效函数中具体特效效果的参数，动画特效参数与所要实现的动画特效相关联。

S20：在当前界面上配置至少一个特效区域，每一特效区域包括区域ID和区域参数。

其中，特效区域是指当前界面是需要显示动画特效的区域。由于当前界面上可配置至少一个特效区域，为区分不同特效区域，需给每个特效区域配置一区域ID。区域ID是用于识别不同特效区域的标识，一个特效区域对应一唯一ID，以便于通过区域ID快速查找到对应的特效区域。区域参数是指任一特效区域的在当前界面的位置参数和大小参数，区域参数依据实际要展示动画特效的特效区域而定，以确定动画特效要展示的特效区域的位置和大小。如可在720px×1280px的当前界面中可配置大小参数为300px*400px的特效区域，可通过设置特效区域中一个端点或中心点的坐标来确定特效区域的位置，如将该特效区域的左上角一个端点的坐标作为其位置参数，从而在当前界面上界定出一特效区域。设该特效区域拥有一个唯一的区域ID为QY10，该特效区域在当前界面的位置坐标为(20,20)，则区域ID为QY10的特效区域的区域参数中位置参数为坐标(20,20)，大小参数为300px*400px。

S30：采用JS将模板ID和区域ID关联，并将区域ID对应的区域参数传递给模板ID对应的位图参数，以更新模板ID对应的程序代码。

其中，JS(即JavaScript)是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型；JS是广泛用于客户端的脚本语言，最早是在HTML(标准通用标记语言下的一个应用)网页上使用，用来给HTML网页增加动态功能，由于JS是一种基于对象的脚本语言，能运用已经创建的对象，通过对象方法的调用结合脚本的相互作用可以实现许多功能，因此采用JS可以有效创建动画特效。由于当前界面中任一特效区域的需要展示的动画特效可能相同也可能不相同，采用JS将区域ID和模板ID进行关联，以保证区域ID对应的特效区域中展示模板ID对应的动画特效模板的动画特效。在将模板ID和区域ID关联后，需要将区域ID对应的特效区域的区域参数传递给需要展示的模板ID对应的动画特效模板的位图参数中，以更新模板ID对应的程序代码，继而确保更新后的程序代码中的位图参数与区域ID对应的特效区域的区域参数保持一致。

如当前界面中区域ID为QY10的特效区域，该特效区域在当前界面中的位置参数坐标为(20,20)，大小参数为300px*400px；若需在该特效区域中展示旋转动画特效，而旋转动画特效模板的模板ID为MB110，则需要基于JS将区域ID为QY10的特效区域和模板ID为MB110的旋转动画特效模板关联，并将区域ID为QY10的特效区域中的区域参数传递给模板ID为MB110的旋转动画特效模板对应的位图参数中，以更新动画特效模板对应的位图参数，使旋转动画特效模板中的位图参数中的位置参数和大小参数与当前需要展示旋转动画特效的特效区域的区域参数中的位置参数和大小参数一致。

S40：运行更新后的程序代码，在特效区域上展示与程序代码对应的动画特效。

将当前界面中的特效区域的区域参数传递给相应的动画特效模板中的程序代码中，对程序代码中的位图参数进行更新后，得到更新后的程序代码，以使当前界面上的特效区域调用该更新后的程序代码，从而在特效区域上展示与更新后的程序代码对应的动画特效，以实现根据需求调用动画特效模板。可以理解地，用户可点击终端设备的当前界面上的特效区域以输入特效运行指令，以使终端设备获取特效运行指令，调用并运行更新后的程序代码，即可在特效区域上展示与程序代码对应的动画特效。

该动画特效实现方法采用H5和CSS3创建动画特效模板，动画特效模板创建过程中不引入插件或者canvas技术，通过纯代码实现动画特效模板的创建，以加快动画特效的响应速度。给每一动画特效模设定唯一模板ID,并通过模板ID确定当前需要的动画特效模板，以实现动画特效模板的重复调用，减少开发成本。在当前界面上配置特效区域，给每一特效区域设定唯一区域ID，通过区域ID确认动画特效要展示的特效区域。采用JS将模板ID和区域ID关联，并将区域ID对应的区域参数传递给模板ID对应的位图参数，以更新模板ID对应的程序代码，运行更新后的程序代码，在特效区域展示相对应的与更新后的程序代码相对应动画特效。

在一具体实施方式中，动画特效模板包括文字动画特效模板，其中，文字动画特效模板是指预先设置的代码程序实现文字动画特效的模板。该文字动画特效可以为全体文字一起显示的动画特效，其中全体文字一起显示的动画特效包括但不限于旋转插入式、飞来式和翻转式等显示方式。该文字动画特效还可以为文字逐字显示动画特效，如文字打印动画特效。

具体地，文字动画特效模板可以包括文字打印程序代码，该文字打印程序代码是预先设置在文字动画特效模板中的用于实现文字打印动画特效的程序代码。此时，步骤S40具体为：运行更新后的文字打印程序代码，在特效区域展示文字打印程序代码对应的文字打印动画特效，其中，文字打印特效中文字的显示速度可以根据需求进行调节。如图2所示，步骤S40具体包括如下步骤：

S411：运行更新后的文字打印程序代码，获取特效区域中的目标文字。

其中，目标文字是指在特效区域中需要显示文字打印动画特效的文字。可以理解地，将需要展示文字打印动画特效的特效区域的区域参数传递给文字打印程序代码的位图参数，以获取更新后的文字打印程序代码，运行该更新后的文字打印程序代码，即可获取需要显示进行文字打印动画特效的目标文字。如需在特效区域中显示的文字有“一一一一二二二二三三三三”，按照需求需要对其中的文字“二二二二”进行文字打印动画特效，则文字“二二二二”即为目标文字。

S412：对目标文字进行拆分并逐字存储在数组中，数组中每一文字对应一数组下标。

数组下标是指用于识别存储于数组中不同位置的元素的标识。可以理解地，存储于数组中的每一元素对应一唯一索引，该索引即为元素在数组中的数组下标。在获取到需要进行文字打印动画特效处理的目标文字后，用文字拆分方法把目标文字进行拆分并逐字存储在数组中，数组中每一文字对应一数组下标。

S413：基于JS启动定时器，将数组中每一数组下标对应的文字依据文字显示速度在特效区域上逐字显示，以在特效区域上展示文字打印动画特效。

其中，文字打印程序代码中的动画特效参数包括文字显示速度。文字显示速度可以用于控制数组中每个文字在特效区域上匀速逐字显示，也可以用于控制数组中每个文字依据不同的速度在特效区域上逐字显示。

具体地，对目标文字进行拆分并存储在数组中后，启动JS中的定时器，按照既定的时间间隔将数组中每一数组下标对应的元素进行提取并在特效区域逐字显示，即实现在特效区域上展示文字打印动画特效。该文字打印动画特效基于文字打印程序代码创建，当中的文字打印程序代码基于H5和CSS3纯代码实现，不依赖于插件或者canvas技术，可以避免以往文字打印动画特效实现中由于占用内存或者主线程而导致响应速度慢，继而导致文字动画特效出现重复打字、切换到下一页后没有文字打印效果或者重复打印上一页文字等问题，该基于H5和CSS3实现的文字打印程序代码可以提高文字打印动画特效的响应速度。

该动画特效实现方法中，运行更新后的文字打印程序代码，获取特效区域中的目标文字，能够确定需要展示文字打印动画特效的文字，对目标文字进行拆分并逐字存储在数组中，以使目标文字中每一个文字能以数组元素形式存储于数组中，并使每一文字由所在索引对应一唯一数组下标；在JS中启动定时器，将数组中每一数组下标对应的文字在特效区域逐字显示，能够基于JS中的定时器按既定的时间间隔将每一数组下标对应的文字进行提取并在特效区域逐字显示。由于文字打印程序代码是基于H5和CSS3纯代码实现，不依赖于插件或者canvas技术，可以避免占用内存或主线程而导致响应速度慢，从而提高文字打印动画特效的响应速度。

在一具体实施方式中，动画特效模板包括页面切换动画特效模板，其中页面切换动画特效模板是指预先设置的代码程序实现页面切换特效的模板。页面切换动画特效模板包括页面切换程序代码，该页面切换程序代码是预先设置在页面切换动画特效模板中的用于实现页面切换动画特效的程序代码。此时，步骤S40具体为：运行更新后的页面切换程序代码，在特效区域展示页面切换程序代码对应的页面切换动画特效。如图3所示，步骤S40具体包括如下步骤：

S421：运行更新后的页面切换程序代码，获取特效区域上显示的当前页面和待切换的目标页面。

其中，当前页面是指当前界面展示的页面。目标页面是指当前页面进行页面切换后在特效区域展示的页面。更新后的页面切换程序代码是指将需要展示页面切换动画特效的特效区域的区域参数传递给页面切换程序代码中的位图参数时，即可获取更新后的页面切换程序代码。步骤S421中运行更新后的页面切换程序代码，获取特效区域上显示的当前页面和带切换的目标页面，以保证当前页面和目标页面相对应。

S422：在特效区域中替换当前页面，并在特效区域中依据页面显示形式和页面显示速度显示目标页面，以在特效区域上展示页面切换动画特效。

其中，页面切换程序代码中的动画特效参数包括页面显示形式和页面显示速度。页面显示形式包括但不限于左右切换、上下切换、旋转飞入中的至少一种。页面显示速度包括但不限于匀速、先快后慢中的至少一种。

本实施例中，在获取到当前页面和目标页面后，在需要展示页面切换动画特效的特效区域中替换当前页面，并在该特效区域中依据页面显示形式和页面显示速度这些动画特效参数显示目标页面，以形成当前页面切换到目标页面的页面切换动画特效。该页面切换动画特效基于页面切换程序代码创建，当中的页面切换程序代码基于H5和CSS3纯代码实现，不依赖于插件或者canvas技术，可以避免页面切换动画特效实现过程中由于占用内存或者主线程而导致响应速度慢，继而导致页面切换过程卡顿的问题，该基于H5和CSS3实现的页面切换程序代码可以提高页面切换动画特效的响应速度。

该动画特效实现方法中，运行更新后的页面切换程序代码，获取特效区域上显示的当前页面和待切换的目标页面，以确定页面切换动画特效执行中的当前页面和待切换的目标页面；在特效区域中替换当前页面，并在特效区域中依据页面显示形式和页面显示速度显示目标页面，以实现当前页面和目标页面的切换动画效果。

在一具体实施方式中，动画特效模板包括图片动画特效模板，其中图片动画特效模板是指预先设置的代码程序实现图片动画特效的模板。图片动画特效模板包括图片动画程序代码，图片动画程序代码是预先设置在图片动画特效模板中的用于实现图片动画特效的程序代码。此时，步骤S40具体为：运行更新后的图片动画程序代码，便可在特效区域展示图片动画程序代码对应的图片动画特效。如图4所示，步骤S40具体包括如下步骤：

S431：运行更新后的图片动画程序代码，获取特效区域中显示的目标图片。

其中，目标图片是指需要加入图片动画特效的图片。将当前需要展示图片动画特效的特效区域的区域参数传递给图片动画特效模板的位图参数中，以实现对图片动画程序代码进行更新后，运行更新后的图片动画程序代码，在当前需要展示图片动画特效的特效区域中获取目标图片。如需要展示图片动画特效的特效区域中的图片有多张，按照需求对其中的排序为第二的图片加入图片动画特效，即可将该排序为第二的图片作为目标图片。

S432：依据图片动画程序代码中的动画特效参数，对目标图片进行特效处理，以在特效区域上展示图片动画特效。

由于图片动画程序代码中的动画特效参数与所要实现的图片动画特效相关联；因此，在获取到目标图片后，依据图片动画程序代码中的动画特效参数，对获取到的目标图片调用相应的图片动画特效模板，以在特效区域上展示图片动画特效。该图片动画特效基于图片动画程序代码创建，当中的图片动画程序代码基于H5和CSS3纯代码实现，不依赖于插件或者canvas技术，可以避免图片动画特效实现过程中由于占用内存或者主线程而导致响应速度慢，继而导致图片动画特效出现卡顿、展示不流畅的问题，该基于H5和CSS3实现的图片动画程序代码可以提高图片动画特效的响应速度。

对图片动画特效模板中的动画特效参数进行改变，实现的动画效果也随之变化。可以理解地，将旋转动画特效模板中的特效参数旋转方向进行更改，将初始向左的旋转方向更改为向右旋转，则相应的图片动画特效就由初始的向左旋转动画特效变为向右旋转动画特效。

其中，图片动画特效包括但不限于渐变特效、晃动特效、旋转特效、移动特效、滑动打开特效、脉冲特效、机械展开特效和来回旋转特效中的至少一种。每一图片动画特效对应至少一种动画特效参数。

渐变特效的动画特效参数包括但不限于渐变速度和渐变类型中的至少一种，当中的渐变类型具体包括但不限于模糊渐变和清晰渐变中的至少一种。晃动特效的动画特效参数包括但不限于晃动幅度和晃动频率中的至少一种。旋转特效的动画特效参数包括但不限于旋转方向和旋转频率中的至少一种。移动特效的动画特效参数包括但不限于移动方向和移动速度中的至少一种。滑动打开特效的动画特效参数包括但不限于滑动时间、滑动方向中的至少一种。脉冲特效的动画特效参数包括脉冲频率。机械展开特效的动画特效参数包括但不限于展开方向和展开速度中的至少一种。来回旋转特效的动画特效参数包括但不限于来回旋转频率和旋转角度中的至少一种。

如在获取了目标图片后，依据图片动画程序代码中的动画特效参数，对目标图片进行特效处理，以在特效区域中显示特定的图片动画特效。如需要对当前界面区域ID为QY10的特效区域中的图片加入旋转动画特效，设定旋转动画特效中的旋转方向和旋转频率后，运行预先已经进行位图参数更新后的旋转动画特效模板程序代码，即可在区域ID为QY10的特效区域的图片上显示旋转动画特效。

该动画特效实现方法中，运行更新后的图片动画程序代码，获取特效区域中显示的目标图片，以确定需要展示图片动画特效的目标图片；依据图片动画程序代码中的动画特效参数，对目标图片进行特效处理，根据动画特效参数更新图片动画特效模板中的初始特效参数，以在特效区域上展示与动画特效参数相对应的图片动画特效。

在一具体实施方式中，由于动画特效参数是用于控制特效函数中具体特效效果的参数，与所要实现的动画特效相关联。为了使调用的动画特效模板所形成的动画特效更符合用户的需求，可通过修改调整特效函数中的动画特效参数，以更新动画特效模板中的程序代码。如图5所示，该动画特效实现方法的步骤S30和步骤S40之间还包括如下步骤：

S51：获取用户输入的特效参数调整指令，特效参数调整指令包括目标模板ID和目标特效参数。

其中，特效参数调整指令是指用于对目标模板ID对应的动画特效模板中特效函数对应的动画特效参数进行修改和调整的指令。目标模板ID是指用于唯一指令需要修改和调整动画特效参数的动画特效参数的标识。目标特效参数是指所要修改和调整的动画特效参数的参数名称和对应的参数值。可以理解地，由于每一动画特效模板中的程序代码包括特效函数，每一特效函数包括用于控制特效效果的动画特效参数，目标特效参数是用于实现对动画特效参数进行修改的参数。

如区域ID为QY10，区域参数中的位置参数为坐标(20,20)，大小参数为300px*400px的特效区域，调用模板ID为MB110的旋转动画特效模板，用户可根据自己需求将旋转动画特效的旋转方向向左旋转变成向右旋转，则可使用户输入的特效参数调整指令包括目标模板ID为MB110和目标特效参数为向右旋转等信息。

S52：基于目标模板ID获取对应的动画特效模板的目标程序代码。

其中，目标程序代码是指与目标模板ID对应的动画特效模板的程序代码。在步骤S51中获得目标模板ID后，可根据该目标模板ID获取对应的动画特效模板，并将所获取的动画特效模板对应的程序代码作为目标程序代码。

S53：将目标特效参数传递给目标程序代码中的动画特效参数，以获取更新后的程序代码。

本实施例中，将步骤S51获得的目标特效参数传递给步骤S52获取的目标程序代码中的动画特效参数，以实现对动画特效参数的传递和更新，基于目标特效参数的更新获得更新后的程序代码。可以理解地，在获取更新后的程序代码时，可以执行步骤S40中的步骤，即运行更新后的程序代码，以在特效区域中显示与更新后的程序代码对应的动画特效，其具体步骤在步骤S40中有详细表述，为避免重复，在此不一一赘述。

该动画特效实现方法中，获取用户输入的特效参数调整指令，以确定特效指令中的目标模板ID和目标特效参数。基于目标模板ID获取对应的动画特效模板的目标程序代码，以获取用户特效参数调整指令对应的动画特效模板及其目标特效参数。将目标特效参数传递给目标程序代码中的动画特效参数，以获取更新后的程序代码，根据更新后的程序代码实现特效参数调整指令对应的图片动画特效。

本发明实施例提供的动画特效实现方法中，基于H5和CSS3创建动画特效模板，通过纯代码实现动画特效模板的创建，以加快动画特效的响应速度。给每一动画特效模设定唯一模板ID,并通过模板ID确定当前需要的动画特效模板，以实现动画特效模板的重复调用。在当前界面上配置特效区域，给每一特效区域设定唯一区域ID，通过区域ID确认动画特效要展示的特效区域。采用JS将模板ID和区域ID关联，并将区域ID对应的区域参数传递给模板ID对应的位图参数，以更新模板ID对应的程序代码，运行更新后的程序代码，在特效区域展示相对应的与更新后的程序代码相对应动画特效。该动画特效实现方法，基于H5和CSS3可实现纯代码创建动画特效模板，后续采用JS实现参数传递，以获取并运行更新后的程序代码，从而在当前界面上展示动画特效，提高了动画特效的响应速度。

应理解，上述实施例中各步骤的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本发明实施例的实施过程构成任何限定。

实施例2

图7示出与实施例1中动画特效实现方法一一对应的动画特效实现装置的原理框图。如图7所示，该动画特效实现装置包括动画特效模板创建模块10、特效区域配置模块20、程序代码参数传递模块30和动画特效展示模块40。其中，动画特效模板创建模块10、特效区域配置模块20、程序代码参数传递模块30和动画特效展示模块40的实现功能与实施例1中动画特效实现方法对应的步骤一一对应。

动画特效模板创建模块10，用于预先采用H5和CSS3创建至少一个动画特效模板，每一动画特效模板包括模板ID和程序代码，程序代码包括位图参数。

特效区域配置模块20，用于在当前界面上配置至少一个特效区域，每一特效区域包括区域ID和区域参数。

程序代码参数传递模块30，用于采用JS将模板ID和区域ID关联，并将区域ID对应的区域参数传递给模板ID对应的位图参数，以更新模板ID对应的程序代码。

动画特效展示模块40，用于运行更新后的程序代码，在特效区域上展示与程序代码对应的动画特效。

优选地，程序代码还包括动画特效参数。

该动画特效实现装置还包括更新程序代码获取模块50。其中，更新程序代码获取模块50包括参数调整指令获取单元51、目标程序代码获取单元52和更新程序代码获取单元53。

参数调整指令获取单元51，用于获取用户输入的特效参数调整指令，特效参数调整指令包括目标模板ID和目标特效参数。

目标程序代码获取单元52，用于基于目标模板ID获取对应的动画特效模板的目标程序代码。

更新程序代码获取单元53，用于将目标特效参数传递给目标程序代码中的动画特效参数，以获取更新后的程序代码。

优选地，动画特效模板包括文字动画特效模板，文字动画特效模板包括文字打印程序代码。

动画特效展示模块40包括目标文字获取子单元411、目标文字拆分存储子单元412和文字打印动画特效展示子单元413。

目标文字获取子单元411，用于运行更新后的文字打印程序代码，获取特效区域中的目标文字。

目标文字拆分存储子单元412，用于对目标文字进行拆分并逐字存储在数组中，数组中每一文字对应一数组下标。

文字打印动画特效展示子单元413，用于基于JS启动定时器，将数组中每一数组下标对应的文字在特效区域逐字显示，以展示文字打印动画特效。

其中，文字打印程序代码中的动画特效参数包括文字显示速度。

优选地，动画特效模板包括页面切换动画特效模板，页面切换动画特效模板包括页面切换程序代码。

动画特效展示模块40包括当前页面和目标页面获取子单元421和页面切换动画特效展示子单元422。

当前页面和目标页面获取子单元421，用于运行更新后的页面切换程序代码，获取特效区域上显示的当前页面和待切换的目标页面。

页面切换动画特效展示子单元422，用于在特效区域中替换当前页面，并在特效区域中依据页面显示形式和页面显示速度显示目标页面，以展示页面切换动画特效。

其中，页面切换程序代码中的动画特效参数包括页面显示形式和页面显示速度。

优选地，动画特特效模板包括图片动画特效模板，图片动画特效模板包括图片动画程序代码。

动画特效展示模块40包括目标图片获取子单元431和图片动画特效展示子单元432。

目标图片获取子单元431，用于运行更新后的图片动画程序代码，获取特效区域中显示的目标图片。

图片动画特效展示子单元432，用于依据图片动画程序代码中的动画特效参数，对目标图片进行特效处理，以展示图片动画特效。

优选地，图片动画特效模板包括渐变特效模板、晃动特效模板、旋转特效模板、移动特效模板、滑动打开特效模板、脉冲特效模板、机械展开特效模板和来回旋转特效模板中的至少一种。

渐变特效模板的的动画特效参数包括渐变速度和渐变类型，渐变类型包括模糊渐变和清晰渐变。

晃动特效模板的动画特效参数包括晃动幅度和晃动频率。

旋转特效模板的动画特效参数包括旋转方向和旋转频率。

移动特效模板的动画特效参数包括移动方向和移动速度。

滑动打开特效模板的动画特效参数包括滑动时间。

脉冲特效模板的动画特效参数包括脉冲频率。

机械展开特效模板的动画特效参数包括展开方向和展开速度。

来回旋转特效模板的动画特效参数包括来回旋转频率和旋转角度。

实施例3

本实施例提供一计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器执行时实现实施例1中动画特效实现方法，为避免重复，这里不再赘述。或者，该计算机程序被处理器执行时实现实施例2中动画特效实现装置中各模块/单元的功能，为避免重复，这里不再赘述。

实施例4

图7是本发明一实施例提供的终端设备的示意图。如图7所示，该实施例的终端设备70包括：处理器71、存储器72以及存储在存储器72中并可在处理器71上运行的计算机程序73。处理器71执行计算机程序73时实现实施例1中动画特效实现的步骤，例如图1所示的步骤S10、S20、S30和S40。或者，处理器71执行计算机程序73时实现实施例2中各模块/单元的功能，例如图6所示动画特效模板创建模块10、特效区域配置模块20、程序代码参数传递模块30和动画特效展示模块40的功能。

示例性的，计算机程序73可以被分割成一个或多个模块/单元，一个或者多个模块/单元被存储在存储器72中，并由处理器71执行，以完成本发明。一个或多个模块/单元可以是能够完成特定功能的一系列计算机程序指令段，该指令段用于描述计算机程序73在终端设备70中的执行过程。例如，计算机程序73可以被分割成图6所示的动画特效模板创建模块10、特效区域配置模块20、程序代码参数传递模块30和动画特效展示模块40。

终端设备70可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。终端设备可包括，但不仅限于，处理器71、存储器72。本领域技术人员可以理解，图7仅仅是终端设备70的示例，并不构成对终端设备70的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件，例如终端设备还可以包括输入输出设备、网络接入设备、总线等。

所称处理器71可以是中央处理单元(Central Processing Unit，CPU)，还可以是其他通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现成可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

存储器72可以是终端设备70的内部存储单元，例如终端设备70的硬盘或内存。存储器72也可以是终端设备70的外部存储设备，例如终端设备70上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)等。进一步地，存储器72还可以既包括终端设备70的内部存储单元也包括外部存储设备。存储器72用于存储计算机程序以及终端设备所需的其他程序和数据。存储器72还可以用于暂时地存储已经输出或者将要输出的数据。

所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将所述装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。

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

所述集成的模块/单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明实现上述实施例方法中的全部或部分流程，也可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一计算机可读存储介质中，该计算机程序在被处理器执行时，可实现上述各个方法实施例的步骤。其中，所述计算机程序包括计算机程序代码，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质可以包括：能够携带所述计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、电载波信号、电信信号以及软件分发介质等。需要说明的是，所述计算机可读介质包含的内容可以根据司法管辖区内立法和专利实践的要求进行适当的增减，例如在某些司法管辖区，根据立法和专利实践，计算机可读介质不包括是电载波信号和电信信号。

以上所述实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围，均应包含在本发明的保护范围之内。

Claims (10)

1.一种动画特效实现方法，其特征在于，包括：

预先采用H5和CSS3创建至少一个动画特效模板，每一所述动画特效模板包括模板ID和程序代码，所述程序代码包括位图参数；

在当前界面上配置至少一个特效区域，每一所述特效区域包括区域ID和区域参数；

采用JS将所述模板ID和所述区域ID关联，并将所述区域ID对应的区域参数传递给所述模板ID对应的位图参数，以更新所述模板ID对应的程序代码；

运行更新后的所述程序代码，在所述特效区域上展示与所述程序代码对应的动画特效。

2.如权利要求1所述的动画特效实现方法，其特征在于，所述程序代码还包括动画特效参数；

所述运行更新后的所述程序代码，之前还包括：

获取用户输入的特效参数调整指令，所述特效参数调整指令包括目标模板ID和目标特效参数；

基于所述目标模板ID获取对应的动画特效模板的目标程序代码；

将所述目标特效参数传递给所述目标程序代码中的动画特效参数，以获取更新后的所述程序代码。

3.如权利要求1所述的动画特效实现方法，其特征在于，所述动画特效模板包括文字动画特效模板，所述文字动画特效模板包括文字打印程序代码；

所述运行更新后的所述程序代码，在所述特效区域上展示与所述程序代码对应的动画特效，包括：

运行更新后的所述文字打印程序代码，获取所述特效区域中的目标文字；

对所述目标文字进行拆分并逐字存储在数组中，所述数组中每一文字对应一数组下标；

基于JS启动定时器，将所述数组中每一数组下标对应的文字依据文字显示速度在所述特效区域上逐字显示，以在所述特效区域上展示文字打印动画特效；

其中，所述文字打印程序代码中的动画特效参数包括文字显示速度。

4.如权利要求1所述的动画特效实现方法，其特征在于，所述动画特效模板包括页面切换动画特效模板，所述页面切换动画特效模板包括页面切换程序代码；

所述运行更新后的所述程序代码，在所述特效区域上展示与所述程序代码对应的动画特效，包括：

运行更新后的所述页面切换程序代码，获取所述特效区域上显示的当前页面和待切换的目标页面；

在所述特效区域中替换所述当前页面，并在所述特效区域中依据页面显示形式和页面显示速度显示所述目标页面，以在所述特效区域上展示页面切换动画特效；

其中，所述页面切换程序代码中的动画特效参数包括所述页面显示形式和所述页面显示速度。

5.如权利要求1所述的动画特效实现方法，其特征在于，所述动画特效模板包括图片动画特效模板，所述图片动画特效模板包括图片动画程序代码；

所述运行更新后的所述程序代码，在所述特效区域上展示与所述程序代码对应的动画特效，包括：

运行更新后的所述图片动画程序代码，获取所述特效区域中显示的目标图片；

依据所述图片动画程序代码中的动画特效参数，对所述目标图片进行特效处理，以在所述特效区域上展示图片动画特效。

6.如权利要求5所述的动画特效实现方法，其特征在于，所述图片动画特效模板包括渐变特效模板、晃动特效模板、旋转特效模板、移动特效模板、滑动打开特效模板、脉冲特效模板、机械展开特效模板和来回旋转特效模板中的至少一种；

所述渐变特效模板的的动画特效参数包括渐变速度和渐变类型，所述渐变类型包括模糊渐变和清晰渐变；

所述晃动特效模板的动画特效参数包括晃动幅度和晃动频率；

所述旋转特效模板的动画特效参数包括旋转方向和旋转频率；

所述移动特效模板的动画特效参数包括移动方向和移动速度；

所述滑动打开特效模板的动画特效参数包括滑动时间；

所述脉冲特效模板的动画特效参数包括脉冲频率；

所述机械展开特效模板的动画特效参数包括展开方向和展开速度；

所述来回旋转特效模板的动画特效参数包括来回旋转频率和旋转角度。

7.一种动画特效实现装置，其特征在于，包括：

动画特效模板创建模块，用于预先采用H5和CSS3创建至少一个动画特效模板，每一所述动画特效模板包括模板ID和程序代码，所述程序代码包括位图参数；

特效区域配置模块，用于在当前界面上配置至少一个特效区域，每一所述特效区域包括区域ID和区域参数；

程序代码参数传递模块，用于采用JS将所述模板ID和所述区域ID关联，并将所述区域ID对应的区域参数传递给所述模板ID对应的位图参数，以更新所述模板ID对应的程序代码；

动画特效展示模块，用于运行更新后的所述程序代码，在所述特效区域上展示与所述程序代码对应的动画特效。

8.如权利要求7所述的动画特效实现装置，其特征在于，所述程序代码还包括动画特效参数；

所述动画特效实现装置还包括更新程序代码获取模块，所述更新程序代码获取模块包括：

参数调整指令获取单元，用于获取用户输入的特效参数调整指令，所述特效参数调整指令包括目标模板ID和目标特效参数；

目标程序代码获取单元，用于基于所述目标模板ID获取对应的动画特效模板的目标程序代码；

更新程序代码获取单元，用于将所述目标特效参数传递给所述目标程序代码中的动画特效参数，以获取更新后的所述程序代码。

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

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