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

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

Animation effect implementation method, device, terminal equipment and storage medium

The invention discloses a method, a device, a terminal device and a storage medium for the realization of an animation special effect. The animation realization method comprises the following steps: pre using H5 and CSS3 to create at least one animation templates, each template includes animation template ID and program code, the code includes the bitmap in the current interface configuration parameters; at least one specific area, each of the specific areas including regional ID and regional parameters; the JS will be the template ID and the ID regional association, and transfer the regional parameters of the regional ID corresponding to the parameters corresponding to the ID bitmap template, the template ID to update the corresponding code; the code running an updated display, corresponding with the animation code in the area of special effects. The realization method of the animation effect is based on H5 and CSS3, creating the template of animation effect, calling the animation special effect template according to the requirements, improving the development efficiency, implementing the animation effect with pure code, improving the response speed of the animation effect.

【技术实现步骤摘要】
动画特效实现方法、装置、终端设备及存储介质
本专利技术涉及特效处理领域，尤其涉及一种动画特效实现方法、装置、终端设备及存储介质。
技术介绍
随着社会的不断发展，人们对界面显示的要求日益提高。由于动画富有美感并且具有直观性，使得动画在界面上的应用越来越广泛。当前界面上应用的动画大多需要依赖插件或者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(CascadingStyleSheets，即层叠样式表)，在页面制作时采用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快速查找到对应的本文档来自技高网...

【技术保护点】
一种动画特效实现方法，其特征在于，包括：预先采用H5和CSS3创建至少一个动画特效模板，每一所述动画特效模板包括模板ID和程序代码，所述程序代码包括位图参数；在当前界面上配置至少一个特效区域，每一所述特效区域包括区域ID和区域参数；采用JS将所述模板ID和所述区域ID关联，并将所述区域ID对应的区域参数传递给所述模板ID对应的位图参数，以更新所述模板ID对应的程序代码；运行更新后的所述程序代码，在所述特效区域上展示与所述程序代码对应的动画特效。

【技术特征摘要】
1.一种动画特效实现方法，其特征在于，包括：预先采用H5和CSS3创建至少一个动画特效模板，每一所述动画特效模板包括模板ID和程序代码，所述程序代码包括位图参数；在当前界面上配置至少一个特效区域，每一所述特效区域包括区域ID和区域参数；采用JS将所述模板ID和所述区域ID关联，并将所述区域ID对应的区域参数传递给所述模板ID对应的位图参数，以更新所述模板ID对应的程序代码；运行更新后的所述程序代码，在所述特效区域上展示与所述程序代码对应的动画特效。2.如权利要求1所述的动画特效实现方法，其特征在于，所述程序代码还包括动画特效参数；所述运行更新后的所述程序代码，之前还包括：获取用户输入的特效参数调整指令，所述特效参数调整指令包括目标模板ID和目标特效参数；基于所述目标模板ID获取对应的动画特效模板的目标程序代码；将所述目标特效参数传递给所述目标程序代码中的动画特效参数，以获取更新后的所述程序代码。3.如权利要求1所述的动画特效实现方法，其特征在于，所述动画特效模板包括文字动画特效模板，所述文字动画特效模板包括文字打印程序代码；所述运行更新后的所述程序代码，在所述特效区域上展示与所述程序代码对应的动画特效，包括：运行更新后的所述文字打印程序代码，获取所述特效区域中的目标文字；对所述目标文字进行拆分并逐字存储在数组中，所述数组中每一文字对应一数组下标；基于JS启动定时器，将所述数组中每一数组下标对应的文字依据文字显示速度在所述特效区域上逐字显示，以在所述特效区域上展示文字打印动画特效；其中，所述文字打印程序代码中的动画特效参数包括文字显示速度。4.如权利要求1所述的动画特效实现方法，其特征在于，所述动画特效模板包括页面切换动画特效模板，所述页面切换动画特效模板包括页面切换程序代码；所述运行更新后的所述程序代码，在所述特效区域上展示与所述程序代码对应的动画特效，包括：运行更新后的所述页面切换程序代码，获取所述特效区域上显示的当前页面和待切换的目标页面；在所述特效区域中替换所述当前页面，并在所述特效区域中依据页面显示形式和页面显示速度显示所述目标页面，以在所述特效区域上展示页面切换动画特效；其中，所述页面切换程序代码中的动画特效参数包括所述页面显示形式和所述页面显示速度。5.如权利要求1所述的动画特效实现方法，其特征在于，所述动画特效模板包括图片动画特效模板，所述图片动画特效模板包括图片动画程序代码；所述运行更新后的所述程序代码，在所述特效区域上展示与所述程序代码对应的动画特效，包括：运行更新后的所述图片动画程序代码，获取所述特效区域中显...

【专利技术属性】
技术研发人员：刘中意，林杰，
申请(专利权)人：中国平安财产保险股份有限公司，
类型：发明
国别省市：广东,44