CN104915977B - 本地应用程序的动画文件生成方法及装置 - Google Patents

Abstract

本发明公开了本地应用程序的动画文件生成方法，包括以下步骤：获取动画源文件；将所述动画源文件导出，获得场景描述脚本及动画元件；获取预先准备好的模板库，该模板库包括交互逻辑和配置文件模板；接收配置指令，并根据所述配置指令，对所述配置文件模板进行编辑，以使动画元件的运动过程与交互逻辑匹配；对编辑后的配置文件、场景描述脚本、动画元件以及交互逻辑打包生成动画文件。本发明还公开了本地应用程序的动画文件生成装置。本发明不但降低了动画文件的开发难度和成本，而且该生成的动画文件可以在本地应用程序中播放并不占用内存。

Description

本地应用程序的动画文件生成方法及装置

技术领域

本发明涉及计算机领域，尤其涉及一种本地应用程序的动画文件生成方法及装置。

背景技术

随着智能终端应用程序的迅速发展，人们对智能终端的需求也越来越大。例如，人们希望可以在应用程序中显示flash动画。而现有的智能终端在应用程序显示flash动画时，将占用非常大的内存，从而导致智能终端的其他程序无法正常运行。因此，亟需一种可以在智能终端流畅播放且不占用内存的动画文件。

发明内容

本发明实施例是提供一种本地应用程序的动画文件生成方法及装置，旨在降低了动画文件的开发难度和成本。

本发明实施例提供了一种本地应用程序的动画文件生成方法，包括以下步骤：

获取动画源文件；

将所述动画源文件导出，获得场景描述脚本及动画元件；

获取预先准备好的模板库，该模板库包括交互逻辑和配置文件模板；

接收配置指令，并根据所述配置指令，对所述配置文件模板进行编辑，以使动画元件的运动过程与交互逻辑匹配；

对编辑后的配置文件、场景描述脚本、动画元件以及交互逻辑打包生成动画文件。

本发明还提供了一种本地应用程序的动画文件生成装置，包括：

动画源文件获取模块，用于获取动画源文件；

文件导出模块，用于将所述动画源文件导出，获得场景描述脚本及动画元件；

模板库获取模块，用于获取预先准备好的模板库，该模板库包括交互逻辑和配置文件模板；

配置文件编辑模块，用于接收配置指令，并根据所述配置指令，对所述配置文件模板进行编辑，以使动画元件的运动过程与交互逻辑匹配；

文件打包模块，用于对编辑后的配置文件、场景描述脚本、动画元件以及交互逻辑打包生成动画文件。

本发明将动画源文件导出为包含场景描述脚本和动画元件的动画播放文件，同时还根据所述动画播放文件，编辑相应的配置文件，以使播放文件中动画元件的运动过程可以与交互逻辑匹配。因此，本发明不但降低了动画文件的开发难度和成本，而且该生成的动画文件可以在本地应用程序中播放并不占用内存。

附图说明

图1是本发明本地应用程序的动画文件生成方法第一实施例的流程示意图；

图2a是本发明制作的百叶窗场景中百叶窗处于关闭状态的示例图；

图2b是本发明制作的百叶窗场景中百叶窗处于打开状态的示例图；

图3是本发明本地应用程序中加载动画文件的界面一实施例的示例图；

图4是本发明本地应用程序的动画文件生成方法第二实施例的流程示意图；

图5是本发明本地应用程序中加载动画文件的界面另一实施例的示例图；

图6是本发明本地应用程序的动画文件生成方法第三实施例的流程示意图；

图7是本发明本地应用程序的动画文件生成方法第四实施例的流程示意图；

图8a是本发明本地应用程序在交互之前所加载的动画文件的界面示例图；

图8b是本发明本地应用程序发生手势下拉触发时所加载的动画文件的界面示例图；

图8c是本发明本地应用程序发生手势维持触发时所加载的动画文件的界面示例图；

图8d是本发明本地应用程序发生手势释放触发时所加载的动画文件的界面示例图；

图9是本发明本地应用程序的动画文件生成装置一实施例的功能模块示意图；

图10是本发明本地应用程序的动画文件生成装置另一实施例的功能模块示意图。

本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

以下结合说明书附图及具体实施例进一步说明本发明的技术方案。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

本发明通过html5技术与flash动画的结合，使得本地应用程序中可以加载html5文件来实现动画效果，解决了现有技术中播放flash文件时需要插件，而且占用内存大，甚至有些系统不支持flash播放的困扰。另外，本发明还添加相应的交互逻辑以及配置文件，实现了html5文件加载后的动画交互。

如图1所示，该本地应用程序的动画文件生成方法包括以下步骤：

步骤S101、获取动画源文件；

该动画源文件是指在动画制作时产生的源文件，例如“.fla”。通过修改该源文件，可以生成不同的动画效果。该动画源文件可以从动画制作软件中直接获得，例如flash制作工具。当然还可以通过从本地或网络中获取动画文件，然后通过反编译软件对动画文件编译获得动画源文件。

步骤S102、将所述动画源文件导出，获得场景描述脚本及动画元件；

本实施例主要利用CreateJS工具将动画源文件导出。CreateJS是一套可以构建丰富交互体验的html5项目的开源工具包，旨在降低html5项目的开发难度和成本，让开发者以熟悉的方式打造更具现代感的网络交互体验。利用CreateJS提供的工具将动画源文件导出，将获得场景描述脚本及动画元件。该场景描述脚本可以用于构造一场景，例如描述构成该场景中的各个对象的显示位置以及显示过程等等。动画元件则为动画播放时所需的图片及声音等资源文件。该图片可以包括静态图片，例如“.jpg”文件；也可以包括动态图片，例如“.gif”文件。该声音文件可以包括音频文件，也可以包括视频文件。

步骤S103、获取预先准备好的模板库，该模板库包括交互逻辑和配置文件模板；

该模板库为预先设置好的，其包括交互逻辑和配置文件模板，该交互逻辑用于描述本地应用程序与html5加载工具之间的通用交互逻辑，包括客户端的触发状态以及所述触发状态的判定条件。例如本地应用程序将监测用户的触发信号，并根据所述触发状态的判定条件判断所监测到的触发信号对应的触发状态。例如，本实施例中一种通用交互逻辑可包括：点击、下拉、保持、释放四种触发状态，对应该四种触发状态将设定相应的判定条件。

步骤S104、接收配置指令，并根据所述配置指令，对所述配置文件模板进行编辑，以使动画元件的运动过程与交互逻辑匹配；

接收配置指令，并根据所述配置指令，对预先准备好的配置文件模板进行编辑，将动画元件的运动过程根据交互逻辑进行对应。例如“点击”手势对应的动画元件的运动过程的设置，“释放”手势对应的动画元件的运动过程的设置等等。

步骤S105、对编辑后的配置文件、场景描述脚本文件、动画元件以及交互逻辑打包生成动画文件。

本发明实施例将动画源文件导出为包含场景描述脚本和动画元文件的动画播放文件，同时还根据所述动画播放文件，编辑相应的配置文件，以使播放文件中动画元件的运动过程可以与交互逻辑匹配。因此，本发明不但降低了动画文件的开发难度和成本，而且该生成的动画文件可以在本地应用程序中播放并不占用内存。

以下将以百叶窗的动画为例，对本发明本地应用程序的动画文件生成方法进行说明。

首先，在flash制作软件中，添加百叶窗的组成元素，例如窗户、叶片及拉绳等等，并制作该百叶窗从关闭到打开时的场景。如图2a所示，所显示的百叶窗为关闭的状态，如图2b所示，所显示的百叶窗为打开的状态。

然后，利用CreateJS工具将flash制作的动画源文件导出，获得相应的场景描述脚本以及播放该百叶窗运动过程所需的图片及声音等动画元件。

然后，对预先准备好的模板库中的配置文件模板进行编辑，以生成相应的配置文件。该配置文件用于描述动画元件进一步的运动过程，尤其是与交互逻辑匹配的运动过程。例如描述点击、下拉、保持、释放四种触发状态对应的运动过程。

最后，对动画元件、场景描述脚本、交互逻辑以及配置文件打包，生成动画文件数据包。

上述数据包生成后，将被发布到分发平台或者共享平台，供其他客户端进行下载。例如，很多本地应用程序的主界面中会预留一定区域用于显示背景。如图3所示，该本地应用程序的主界面中，S1区域用于显示本地应用程序的运行状态，S3区域用于显示正文内容，S4区域用于显示本地应用程序的功能设置区域。S2区域则用于显示背景，即从分发平台或者共享平台后下载相应的动画文件数据包后，则对该数据包进行加载并显示在S2区域中。

当不触发该背景时，该S2区域中显示的背景即为动态图片或静态图片，没有其他的动画效果。因此，为了提示用户对背景的动画效果的触发，本发明的动画文件中还将添加相应的标识。如图4所示，将在上述实施例的步骤S104之后还包括：

步骤S106、接收标识添加指令；

该标识添加指令用于在背景中添加相应的标识，该标识用于指示用户的触发动作。如图5所示，可以在背景中添加一个手势标识S5，提示用户可以对其进行操作，以获得相应的动画效果。首先用户将添加一个手势标识的动画元件，然后发起标识添加指令。

步骤S107、根据所述标识添加指令，对所述场景描述脚本和配置文件进行更新。

根据标识添加指令，将对应的标识添加至场景中的指定位置，然后再对场景描述脚本和配置文件进行更新，以描述该动画元件的运动过程。

进一步地，如图6所示，在上述步骤S104之后或步骤S107之后还包括：

步骤S108、接收预览指令；

当希望了解配置好的动画效果是否达到自己的预期时，将发出预览指令。当然也可以在动画文件发布到分发平台或者共享平台之前，自动产生预览指令，以对配置好的动画效果进行预览。

步骤S109、根据所述预览指令，加载所述场景描述脚本文件，同时根据配置文件及交互逻辑进行动画的播放。

根据所述预览指令，将加载场景描述脚本文件，同时预览者对显示屏幕进行触摸，以触发相应的动画播放。在预览过程中，开发者还可以根据预览结果，修改场景描述脚本文件及配置文件，以调整相应的动画效果。调整完成后，再将相应的场景描述文件、动画元件、交互逻辑及配置文件打包，生成可以发布的动画文件数据包。

在生成动画文件后，该动画文件将上传至服务器，以供用户下载，实现本地应用程序的动画播放。如图7所示，该本地应用程序的动画播放方法包括以下步骤：

步骤S201、在本地应用程序中加载预先生成的动画文件，该动画文件包括场景描述脚本、动画元件、预先设置的交互逻辑及与交互逻辑对应的配置文件；

该动画文件可以从本地导入，或者从网络中获取，即从分发平台或者共享平台下载获得。该动画文件为通过上述生成方法所生成的数据包。该动画文件包括：场景描述脚本、动画元件、预先设置的交互逻辑及与交互逻辑对应的配置文件。

将获取到的动画文件进行解压，获得配置文件、场景描述脚本文件、动画元件以及交互逻辑等解压数据。然后通过本地应用程序中嵌入的webview加载所述动画文件，如图3所示。

步骤S202、侦测客户端的触控请求；

步骤S203、对所述触控请求进行分析，获得该触控请求对应的交互逻辑；

该触控请求可包括单击、拖拽、释放。根据交互逻辑中触发状态的判定条件，判断该触控请求对应的触发状态，然后获得触发状态相应的交互逻辑。

步骤S204、根据所述交互逻辑，调用相应的配置文件及动画元件进行动画的播放。

以前面的百叶窗动画文件为例，对本地应用程序的动画播放方法进行具体的描述。如图8所示，图8a中，本地应用程序在加载百叶窗动画文件后将显示百叶窗正常状态下的关闭状态。图8b中，当侦测到有触摸信号，即下拉的触发状态时，则百叶窗的叶片将随着下拉的幅度而处于打开的状态。最后到下拉的幅度最大时，叶片也处于最大的打开幅度，如图8c所示。当侦测到手势放开，即释放的触发状态，则百叶窗的叶片向上运动，逐渐恢复到图8a所示的关闭状态。

对应上述动画文件生成方法的实施例，本发明还提出了一种本地应用程序的动画文件生成装置。如图9所示，该本地应用程序的动画文件生成装置包括：

动画源文件获取模块110，用于获取动画源文件；

文件导出模块120，用于将所述动画源文件导出，获得场景描述脚本及动画元件；

模板库获取模块130，用于获取预先准备好的模板库，该模板库包括交互逻辑和配置文件模板；

配置文件编辑模块140，用于接收配置指令，并根据所述配置指令，对所述配置文件模板进行编辑，以使动画元件的运动过程与交互逻辑匹配；

文件打包模块150，用于对编辑后的配置文件、场景描述脚本、动画元件以及交互逻辑打包生成动画文件。

该动画源文件是指在动画制作时产生的源文件，例如“.fla”。通过修改该源文件，可以生成不同的动画效果。该动画源文件可以从动画制作软件中直接获得，例如flash制作工具。当然还可以通过从本地或网络中获取动画文件，然后通过反编译软件对动画文件编译获得动画源文件。文件导出模块120利用CreateJS提供的工具将动画源文件导出，将获得场景描述脚本及动画元件。模板库获取模块130获取预先设置好的模板库，该模板库包括交互逻辑和配置文件模板，该交互逻辑用于描述本地应用程序与html5加载工具之间的通用交互逻辑，包括客户端的触发状态以及所述触发状态的判定条件。配置文件编辑模块140接收配置指令，并根据所述配置指令，对预先准备好的配置文件模板进行编辑，将动画元件的运动过程根据交互逻辑进行对应。例如“点击”手势对应的动画元件的运动过程的设置，“释放”手势对应的动画元件的运动过程的设置等等。文件打包模块150再对编辑后的配置文件、场景描述脚本、动画元件以及交互逻辑打包生成动画文件。

本发明实施例将动画源文件导出为包含场景描述脚本和动画元文件的动画播放文件，同时还根据所述动画播放文件，编辑相应的配置文件，以使播放文件中动画元件的运动过程可以与交互逻辑匹配。因此，本发明不但降低了动画文件的开发难度和成本，而且该生成的动画文件可以在本地应用程序中播放并不占用内存。

进一步地，上述本地应用程序的动画文件生成装置还包括：

标识添加模块160，用于接收标识添加指令；根据所述标识添加指令，对所述场景描述脚本文件及配置文件进行更新。

该标识添加指令用于在背景中添加相应的标识，该标识用于指示用户的触发动作。如图5所示，可以在背景中添加一个手势标识S5，提示用户可以对其进行操作，以获得相应的动画效果。首先用户将添加一个手势标识的动画元件，然后发起标识添加指令。然后标识添加模块156根据标识添加指令，将对应的标识添加至场景中的指定位置，然后再对配置文件进行更新，以描述该动画元件的运动过程。

进一步地，上述本地应用程序的动画文件生成装置还包括：

动画预览模块170，用于接收预览指令，根据所述预览指令，加载所述动画文件，同时根据配置文件及交互逻辑进行动画的播放。

当希望了解配置好的动画效果是否达到自己的预期时，将发出预览指令。当然也可以在动画文件发布到分发平台或者共享平台之前，自动产生预览指令，以对配置好的动画效果进行预览。动画预览模块170根据所述预览指令，将加载场景描述脚本文件，同时预览者对显示屏幕进行触摸，以触发相应的动画播放。在预览过程中，开发者还可以根据预览结果，修改场景描述脚本文件及配置文件，以调整相应的动画效果。调整完成后，再将相应的场景描述文件、动画元件、交互逻辑及配置文件打包，生成可以发布的动画文件数据包。

如图10，提出本发明本地应用程序的动画文件生成装置另一实施例。该实施例的本地应用程序的动画文件生成装置还包括：

动画加载模块180，用于在本地应用程序中加载预先生成的动画文件，该动画文件包括场景描述脚本、动画元件、预先设置的交互逻辑及与交互逻辑对应的配置文件；

侦测模块190，用于侦测客户端的触控请求；

交互判断模块200，用于对所述触控请求进行分析，获得该触控请求对应的交互逻辑；

动画播放模块210，用于根据所述交互逻辑，调用相应的配置文件及动画元件进行动画的播放。

该动画文件可以从本地导入，或者从网络中获取，即从分发平台或者共享平台下载获得。该动画文件为通过上述生成方法所生成的数据包。该动画文件包括：场景描述脚本、动画元件、预先设置的交互逻辑及与交互逻辑对应的配置文件。动画加载模块180将获取到的动画文件进行解压，获得配置文件、场景描述脚本文件、动画元件以及交互逻辑等解压数据。然后通过本地应用程序中嵌入的webview加载所述场景描述脚本。侦测模块190侦测到客户端的触控请求后，交互判断模块200根据交互逻辑中触发状态的判定条件，判断该触控请求对应的触发状态，然后获得触发状态相应的交互逻辑。最后再通过动画播放模块210根据所述交互逻辑，调用相应的配置文件及动画元件进行动画的播放。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质（如ROM/RAM、磁碟、光盘）中，包括若干指令用以使得一台终端设备（可以是手机，计算机，服务器，或者网络设备等）执行本发明各个实施例所述的方法。

以上所述仅为本发明的优选实施例，并非因此限制其专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (10)

1.一种本地应用程序的动画文件生成方法，其特征在于，包括以下步骤：

获取动画源文件；

将所述动画源文件导出，获得场景描述脚本及动画元件；

获取预先准备好的模板库，该模板库包括交互逻辑和配置文件模板，所述交互逻辑用于描述所述本地应用程序与html5加载工具之间的通用逻辑；

接收配置指令，并根据所述配置指令，对所述配置文件模板进行编辑，以使动画元件的运动过程与交互逻辑匹配；

对编辑后的配置文件、场景描述脚本、动画元件以及交互逻辑打包生成动画文件，其中，所述动画文件为flash动画文件。

2.如权利要求1所述的本地应用程序的动画文件生成方法，其特征在于，所述动画源文件从本地获取，或者利用反编译工具从网络获取的动画文件编译获得；或者从动画制作工具中导出。

3.如权利要求1所述的本地应用程序的动画文件生成方法，其特征在于，所述接收配置指令，并根据所述配置指令，对所述配置文件模板进行编辑，以使动画元件的运动过程与交互逻辑匹配之后还包括：

接收标识添加指令；

根据所述标识添加指令，对所述场景描述脚本文件及配置文件进行更新。

4.如权利要求1-3任一项所述的本地应用程序的动画文件生成方法，其特征在于，所述对编辑后的配置文件、场景描述脚本、动画元件以及交互逻辑打包生成动画文件之前还包括：

接收预览指令；

根据所述预览指令，加载所述场景描述脚本，同时根据配置文件及交互逻辑进行动画的播放。

5.如权利要求1所述的本地应用程序的动画文件生成方法，其特征在于，所述对编辑后的配置文件、场景描述脚本、动画元件以及交互逻辑打包生成动画文件之后还包括以下步骤：

在本地应用程序中加载预先生成的动画文件，该动画文件包括场景描述脚本、动画元件、预先设置的交互逻辑及与交互逻辑对应的配置文件；

侦测客户端的触控请求；

对所述触控请求进行分析，获得该触控请求对应的交互逻辑；

根据所述交互逻辑，调用相应的配置文件及动画元件进行动画的播放。

6.如权利要求5所述的本地应用程序的动画文件生成方法，其特征在于，所述触控请求包括单击、拖拽、释放。

7.一种本地应用程序的动画文件生成装置，其特征在于，包括：

动画源文件获取模块，用于获取动画源文件；

文件导出模块，用于将所述动画源文件导出，获得场景描述脚本及动画元件；

模板库获取模块，用于获取预先准备好的模板库，该模板库包括交互逻辑和配置文件模板，所述交互逻辑用于描述本地应用程序与html5加载工具之间的通用逻辑；

配置文件编辑模块，用于接收配置指令，并根据所述配置指令，对所述配置文件模板进行编辑，以使动画元件的运动过程与交互逻辑匹配；

文件打包模块，用于对编辑后的配置文件、场景描述脚本、动画元件以及交互逻辑打包生成动画文件，其中，所述动画文件为flash动画文件。

8.如权利要求7所述的本地应用程序的动画文件生成装置，其特征在于，还包括：

动画预览模块，用于接收预览指令，根据所述预览指令，加载所述动画文件，同时根据配置文件及交互逻辑进行动画的播放。

9.如权利要求7所述的本地应用程序的动画文件生成装置，其特征在于，还包括：

标识添加模块，用于接收标识添加指令；根据所述标识添加指令，对所述场景描述脚本文件及配置文件进行更新。

10.如权利要求7-9任一项所述的本地应用程序的动画文件生成装置，其特征在于，还包括：

动画加载模块，用于在本地应用程序中加载预先生成的动画文件，该动画文件包括场景描述脚本、动画元件、预先设置的交互逻辑及与交互逻辑对应的配置文件；

侦测模块，用于侦测客户端的触控请求；

交互判断模块，用于对所述触控请求进行分析，获得该触控请求对应的交互逻辑；

动画播放模块，用于根据所述交互逻辑，调用相应的配置文件及动画元件进行动画的播放。

Images