CN116883549A - 一种动画效果的生成方法和装置 - Google Patents

Abstract

本发明公开了一种动画效果的生成方法和装置，涉及前端技术领域。该方法的一具体实施方式包括：响应于动画效果的生成请求，获取目标对象的起始位置和终止位置；按照预设的动画类型，根据起始位置和终止位置，计算动画参数；根据起始位置和动画参数，基于浏览器的内置动画技术执行对目标对象的动画处理，以生成目标对象的动画效果。该实施方式能够按照不同的动画类型，基于浏览器的内置动画技术执行对对象的动画处理，降低对硬件的性能要求，使得动画效果更加连贯，并且可以实现不同角度和不同动画类型的动画效果，提高流畅性和灵活性。

Description

一种动画效果的生成方法和装置

技术领域

本发明涉及前端技术领域，尤其涉及一种动画效果的生成方法和装置。

背景技术

在浏览器页面中，经常需要显示抛物线等类型的动画效果，例如在电商平台中购物时，将商品加入购物车时可以呈现抛物线的动画效果，以提升加入购物车的真实感。目前在浏览器页面中生成抛物线等类型的动画效果的方法为，设置网页元素的dom(文档对象模型)对象，基于JavaScript(一种轻量级编程语言)脚本高频计算并修改dom对象的位置，进而形成dom对象的动画效果。

在实现本发明过程中，发明人发现现有技术中至少存在如下问题：

基于JavaScript脚本的高频计算对硬件的性能要求较高，动画效果不连贯，流畅性差，并且无法实现不同角度和不同动画类型的动画效果，灵活性差。

发明内容

有鉴于此，本发明实施例提供一种动画效果的生成方法和装置，能够按照不同的动画类型，基于浏览器的内置动画技术执行对对象的动画处理，降低对硬件的性能要求，使得动画效果更加连贯，并且可以实现不同角度和不同动画类型的动画效果，提高流畅性和灵活性。

为实现上述目的，根据本发明实施例的一个方面，提供了一种动画效果的生成方法。

一种动画效果的生成方法，包括：响应于动画效果的生成请求，获取目标对象的起始位置和终止位置；按照预设的动画类型，根据所述起始位置和所述终止位置，计算动画参数；根据所述起始位置和所述动画参数，基于浏览器的内置动画技术执行对所述目标对象的动画处理，以生成所述目标对象的动画效果。

可选地，所述按照预设的动画类型，根据所述起始位置和所述终止位置，计算动画参数，包括：根据所述起始位置和所述终止位置，计算第一方向位移和第二方向位移；按照预设的动画类型和动画效果时间，根据第一方向位移和第二方向位移，确定第一方向动画参数和第二方向动画参数，以生成动画参数。

可选地，所述按照预设的动画类型和动画效果时间，根据第一方向位移和第二方向位移，确定第一方向动画参数和第二方向动画参数，以生成动画参数，包括：根据预设的动画类型，确定第一方向的运动模式和第二方向的运动模式；根据所述动画效果时间、所述第一方向的运动模式和所述第一方向位移，计算第一方向运动参数，并通过所述第一方向的运动模式和所述第一方向运动参数生成第一方向动画参数；根据所述动画效果时间、所述第二方向的运动模式和所述第二方向位移，计算第二方向运动参数，并通过所述第二方向的运动模式和所述第二方向运动参数生成第二方向动画参数。

可选地，所述目标对象包括外层对象和内层对象，所述根据所述起始位置和所述动画参数，基于浏览器的内置动画技术执行对所述目标对象的动画处理，包括：将所述起始位置作为所述目标对象的动画起始位置；根据所述第一方向动画参数，基于浏览器的内置动画技术执行对所述外层对象的动画处理；根据所述第二方向运动参数，基于浏览器的内置动画技术执行对所述内层对象的动画处理。

可选地，所述第一方向为水平方向，所述第二方向为竖直方向；所述第一方向的运动模式为匀速模式，所述第二方向的运动模式为加速模式；所述基于浏览器的内置动画技术执行对所述外层对象的动画处理，包括：基于浏览器的内置动画技术执行对所述外层对象的水平匀速线性动画处理；所述基于浏览器的内置动画技术执行对所述内层对象的动画处理，包括：基于浏览器的内置动画技术执行对所述内层对象的加速自由落体动画处理。

可选地，所述响应于动画效果的生成请求之前，还包括：设置用于指示所述起始位置的起始对象，以及用于指示所述终止位置的终止对象；对所述起始对象设置动画触发事件，在用户对所述起始对象进行所述动画触发事件的情况下，生成动画效果的生成请求。

可选地，所述基于浏览器的内置动画技术执行对所述目标对象的动画处理，以生成所述目标对象的动画效果，包括：利用层叠样式表，基于浏览器的内置动画技术执行对所述目标对象的动画处理，以生成所述目标对象的动画效果。

可选地，所述基于浏览器的内置动画技术执行对所述目标对象的动画处理之后，还包括：在动画处理执行完成之后，隐藏所述目标对象。

根据本发明实施例的另一方面，提供了一种动画效果的生成装置。

一种动画效果的生成装置，包括：位置获取模块，用于响应于动画效果的生成请求，获取目标对象的起始位置和终止位置；动画参数计算模块，用于按照预设的动画类型，根据所述起始位置和所述终止位置，计算动画参数；动画效果生成模块，用于根据所述起始位置和所述动画参数，基于浏览器的内置动画技术执行对所述目标对象的动画处理，以生成所述目标对象的动画效果。

可选地，所述动画参数计算模块还用于：根据所述起始位置和所述终止位置，计算第一方向位移和第二方向位移；按照预设的动画类型和动画效果时间，根据第一方向位移和第二方向位移，确定第一方向动画参数和第二方向动画参数，以生成动画参数。

可选地，所述动画参数计算模块还用于：根据预设的动画类型，确定第一方向的运动模式和第二方向的运动模式；根据所述动画效果时间、所述第一方向的运动模式和所述第一方向位移，计算第一方向运动参数，并通过所述第一方向的运动模式和所述第一方向运动参数生成第一方向动画参数；根据所述动画效果时间、所述第二方向的运动模式和所述第二方向位移，计算第二方向运动参数，并通过所述第二方向的运动模式和所述第二方向运动参数生成第二方向动画参数。

可选地，所述目标对象包括外层对象和内层对象，所述动画效果生成模块还用于：将所述起始位置作为所述目标对象的动画起始位置；根据所述第一方向动画参数，基于浏览器的内置动画技术执行对所述外层对象的动画处理；根据所述第二方向运动参数，基于浏览器的内置动画技术执行对所述内层对象的动画处理。

可选地，所述第一方向为水平方向，所述第二方向为竖直方向；所述第一方向的运动模式为匀速模式，所述第二方向的运动模式为加速模式；所述动画效果生成模块还用于：基于浏览器的内置动画技术执行对所述外层对象的水平匀速线性动画处理；基于浏览器的内置动画技术执行对所述内层对象的加速自由落体动画处理。

可选地，所述还包括位置对象设置模块，用于：设置用于指示所述起始位置的起始对象，以及用于指示所述终止位置的终止对象；对所述起始对象设置动画触发事件，在用户对所述起始对象进行所述动画触发事件的情况下，生成动画效果的生成请求。

可选地，所述动画效果生成模块还用于：利用层叠样式表，基于浏览器的内置动画技术执行对所述目标对象的动画处理，以生成所述目标对象的动画效果。

可选地，所述动画效果生成模块还用于：在动画处理执行完成之后，隐藏所述目标对象。

根据本发明实施例的又一方面，提供了一种电子设备。

一种电子设备，包括：一个或多个处理器；存储器，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现本发明实施例所提供的动画效果的生成方法。

根据本发明实施例的又一方面，提供了一种计算机可读介质。

一种计算机可读介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现本发明实施例所提供的动画效果的生成方法。

上述发明中的一个实施例具有如下优点或有益效果：通过响应于动画效果的生成请求，获取目标对象的起始位置和终止位置；按照预设的动画类型，根据起始位置和终止位置，计算动画参数；根据起始位置和动画参数，基于浏览器的内置动画技术执行对目标对象的动画处理，以生成目标对象的动画效果的技术方案，能够按照不同的动画类型，基于浏览器的内置动画技术执行对对象的动画处理，降低对硬件的性能要求，使得动画效果更加连贯，并且可以实现不同角度和不同动画类型的动画效果，提高流畅性和灵活性。

上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。

附图说明

附图用于更好地理解本发明，不构成对本发明的不当限定。其中：

图1是根据本发明一个实施例的动画效果的生成方法的主要步骤示意图；

图2是根据本发明一个实施例的抛物线类型的动画效果示例的示意图；

图3是根据本发明一个实施例的动画效果的生成方法的流程示意图；

图4是根据本发明一个实施例的动画效果的生成装置的主要模块示意图；

图5是本发明实施例可以应用于其中的示例性系统架构图；

图6是适于用来实现本发明实施例的终端设备或服务器的计算机系统的结构示意图。

具体实施方式

以下结合附图对本发明的示范性实施例做出说明，其中包括本发明实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本发明的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

需要说明的是，本发明的技术方案中，所涉及的用户个人信息的采集、收集、更新、分析、处理、使用、传输、存储等方面，均符合相关法律法规的规定，被用于合法的用途，且不违背公序良俗。对用户个人信息采取必要措施，防止对用户个人信息数据的非法访问，维护用户个人信息安全、网络安全和国家安全。

现有技术中，在浏览器页面中将物品加入购物车的动画效果是一种常见的动画效果了，用户在页面右侧位置点击加号和减号，然后会产生一个小球，页面上会出现一个小球的抛物线动画，即小球从用户手点击的位置开始抛出，并到左下角的购物车结束，显示给用户比较直观的加车购买体验效果。目前在浏览器页面中生成抛物线动画效果的方法为，设置网页元素的dom(文档对象模型)小球，基于JavaScript(一种轻量级编程语言)脚本高频计算并修改dom小球的位置，这样用户看到的是连续变化位置的小球，最终形成抛物线动画效果。通过JavaScript脚本的高频计算实现的动画，对硬件的性能消耗较大，并且抛物线动画效果存在卡顿、掉帧的问题，动画效果不流畅，用户的使用体验差。

图1是根据本发明一个实施例的动画效果的生成方法的主要步骤示意图。

如图1所示，本发明一个实施例的动画效果的生成方法主要包括如下的步骤S101至步骤S103。

步骤S101：响应于动画效果的生成请求，获取目标对象的起始位置和终止位置。

在一个实施例中，响应于动画效果的生成请求之前，还可以包括：设置用于指示起始位置的起始对象，以及用于指示终止位置的终止对象；对起始对象设置动画触发事件，在用户对起始对象进行动画触发事件的情况下，生成动画效果的生成请求。

具体地，以加入购物车的动画效果为例，对页面中所有加入购物车的图标设置起始对象，并对起始对象设置动画触发事件(如点击事件)，在用户对起始对象进行动画触发事件的情况下，生成动画效果的生成请求。对目标购物车的图标设置终止对象，终止对象可以设置在目标购物车的图标的左上角、右上角、内部中心等位置，并将终止对象的属性设置为隐藏。本发明实施例能够实现了全屏幕页面任意终止位置和360度触发目标对象的抛物线动画效果，具有广泛的适用场景。

步骤S102：按照预设的动画类型，根据起始位置和终止位置，计算动画参数。

其中，动画类型可以包括抛物线类型、匀速移动类型、三次函数类型等。根据不同的动画类型，目标对象可以设置为一层或多层结构的对象，例如，在动画类型为抛物线类型的情况下，目标对象可以包括外层对象和内层对象。

在一个实施例中，按照预设的动画类型，根据起始位置和终止位置，计算动画参数，可以包括：根据起始位置和终止位置，计算第一方向位移和第二方向位移；按照预设的动画类型和动画效果时间，根据第一方向位移和第二方向位移，确定第一方向动画参数和第二方向动画参数，以生成动画参数。本发明一个实施例的抛物线类型的动画效果示例如图2所示，起始对象A的位置为起始位置，目标购物车B为终止对象，目标购物车的位置为终止位置，第一方向可以为水平方向，第二方向可以为竖直方向，则第一方向位移可以为在水平方向上从起始对象A到目标购物车B的位移，第二方向位移可以为在竖直方向上从起始对象A到目标购物车B的位移。

在一个实施例中，按照预设的动画类型和动画效果时间，根据第一方向位移和第二方向位移，确定第一方向动画参数和第二方向动画参数，以生成动画参数，可以包括：根据预设的动画类型，确定第一方向的运动模式和第二方向的运动模式；根据动画效果时间、第一方向的运动模式和第一方向位移，计算第一方向运动参数，并通过第一方向的运动模式和第一方向运动参数生成第一方向动画参数；根据动画效果时间、第二方向的运动模式和第二方向位移，计算第二方向运动参数，并通过第二方向的运动模式和第二方向运动参数生成第二方向动画参数。

继续参见图2，动画类型可以设置为抛物线类型，第一方向的运动模式可以为匀速模式，第二方向的运动模式可以为加速模式。第一方向运动参数可以通过第一方向位移和动画效果时间计算得到，第二方向运动参数可以通过重力加速度、第二方向位移和动画效果时间计算得到。

步骤S103：根据起始位置和动画参数，基于浏览器的内置动画技术执行对目标对象的动画处理，以生成目标对象的动画效果。

在一个实施例中，根据起始位置和动画参数，基于浏览器的内置动画技术执行对目标对象的动画处理，可以包括：将起始位置作为目标对象的动画起始位置；根据第一方向动画参数，基于浏览器的内置动画技术执行对外层对象的动画处理；根据第二方向运动参数，基于浏览器的内置动画技术执行对内层对象的动画处理。

继续参见图2，动画类型可以为抛物线类型，目标对象C的起始位置为起始对象A的位置，终止位置为目标购物车B的位置，目标对象可以包括外层对象C1和内层对象C2，在动画处理中，可以基于浏览器的内置动画技术执行对外层对象C1的水平匀速线性动画处理，以及基于浏览器的内置动画技术执行对内层对象C2的加速自由落体动画处理。

在一个实施例中，基于浏览器的内置动画技术执行对目标对象的动画处理，以生成目标对象的动画效果，可以包括：利用层叠样式表，基于浏览器的内置动画技术执行对目标对象的动画处理，以生成目标对象的动画效果。其中，层叠样式表(CSS技术)可以用来控制网页中网页元素的样式风格，层叠样式表可以采用CSS3技术(CSS技术的升级版本)，从而降低生成动画效果对硬件性能的消耗。

在一个实施例中，基于浏览器的内置动画技术执行对目标对象的动画处理之后，还可以包括：在动画处理执行完成之后，隐藏目标对象。

具体地，在没有触发动画效果的生成请求时，将目标对象的属性设置为隐藏，在触发动画效果的生成请求时，将目标对象的属性设置为显示，在动画处理执行完成之后，可以立刻将目标对象的属性设置为隐藏，也可以使目标对象在终止位置停留预设时间段之后，将目标对象的属性设置为隐藏。例如，动画效果时间是400毫秒，可以设置在触发动画效果的生成请求开始的600毫秒内，显示目标对象，从而形成目标对象最终停留在终止位置上的效果，提高用户的使用体验。

图2是根据本发明一个实施例的动画效果的生成方法的流程示意图。

如图2所示，在一个实施例中，根据动画效果的需求，设置动画类型和动画时间，在页面中根据起始图标和终止图标分别设置起始对象和终止对象。在用户对起始对象进行动画触发事件的情况下，获取起始位置和终止位置，根据动画类型和动画时间计算动画参数，并利用层叠样式表对目标对象的动画处理，生成目标对象的动画效果。

图4是根据本发明一个实施例的动画效果的生成装置的主要模块示意图。

如图4所示，本发明一个实施例的动画效果的生成装置400主要包括：位置获取模块401、动画参数计算模块402、动画效果生成模块403。

位置获取模块401，用于响应于动画效果的生成请求，获取目标对象的起始位置和终止位置。

动画参数计算模块402，用于按照预设的动画类型，根据起始位置和终止位置，计算动画参数。

动画效果生成模块403，用于根据起始位置和动画参数，基于浏览器的内置动画技术执行对目标对象的动画处理，以生成目标对象的动画效果。

在一个实施例中，动画参数计算模块402具体用于：根据起始位置和终止位置，计算第一方向位移和第二方向位移；按照预设的动画类型和动画效果时间，根据第一方向位移和第二方向位移，确定第一方向动画参数和第二方向动画参数，以生成动画参数。

在一个实施例中，动画参数计算模块402具体用于：根据预设的动画类型，确定第一方向的运动模式和第二方向的运动模式；根据动画效果时间、第一方向的运动模式和第一方向位移，计算第一方向运动参数，并通过第一方向的运动模式和第一方向运动参数生成第一方向动画参数；根据动画效果时间、第二方向的运动模式和第二方向位移，计算第二方向运动参数，并通过第二方向的运动模式和第二方向运动参数生成第二方向动画参数。

在一个实施例中，目标对象可以包括外层对象和内层对象，动画效果生成模块403具体用于：将起始位置作为目标对象的动画起始位置；根据第一方向动画参数，基于浏览器的内置动画技术执行对外层对象的动画处理；根据第二方向运动参数，基于浏览器的内置动画技术执行对内层对象的动画处理。

在一个实施例中，第一方向可以为水平方向，第二方向可以为竖直方向；第一方向的运动模式可以为匀速模式，第二方向的运动模式可以为加速模式；动画效果生成模块403具体用于：基于浏览器的内置动画技术执行对外层对象的水平匀速线性动画处理；基于浏览器的内置动画技术执行对内层对象的加速自由落体动画处理。

在一个实施例中，还包括位置对象设置模块(图中未示出)，用于：设置用于指示起始位置的起始对象，以及用于指示终止位置的终止对象；对起始对象设置动画触发事件，在用户对起始对象进行动画触发事件的情况下，生成动画效果的生成请求。

在一个实施例中，动画效果生成模块403具体用于：利用层叠样式表，基于浏览器的内置动画技术执行对目标对象的动画处理，以生成目标对象的动画效果。

在一个实施例中，动画效果生成模块403具体用于：在动画处理执行完成之后，隐藏目标对象。

另外，在本发明实施例中动画效果的生成装置的具体实施内容，在上面动画效果的生成方法中已经详细说明了，故在此重复内容不再说明。

图5示出了可以应用本发明实施例的动画效果的生成方法或动画效果的生成装置的示例性系统架构500。

如图5所示，系统架构500可以包括终端设备501、502、503，网络504和服务器505。网络504用以在终端设备501、502、503和服务器505之间提供通信链路的介质。网络504可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

用户可以使用终端设备501、502、503通过网络504与服务器505交互，以接收或发送消息等。终端设备501、502、503上可以安装有各种通讯客户端应用，例如动画类应用、网页浏览器应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等(仅为示例)。

终端设备501、502、503可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。

服务器505可以是提供各种服务的服务器，例如对用户利用终端设备501、502、503所浏览的网页浏览器类网站提供支持的后台管理服务器(仅为示例)。后台管理服务器可以对接收到的动画效果的生成请求等数据进行响应于动画效果的生成请求，获取目标对象的起始位置和终止位置；按照预设的动画类型，根据起始位置和终止位置，计算动画参数；根据起始位置和动画参数，基于浏览器的内置动画技术执行对目标对象的动画处理，以生成目标对象的动画效果等处理，并将处理结果(例如动画效果的生成结果--仅为示例)反馈给终端设备。

需要说明的是，本发明实施例所提供的动画效果的生成方法一般由服务器505执行，相应地，动画效果的生成装置一般设置于服务器505中。

应该理解，图5中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

下面参考图6，其示出了适于用来实现本发明实施例的终端设备或服务器的计算机系统600的结构示意图。图6示出的终端设备或服务器仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图6所示，计算机系统600包括中央处理单元(CPU)601，其可以根据存储在只读存储器(ROM)602中的程序或者从存储部分608加载到随机访问存储器(RAM)603中的程序而执行各种适当的动作和处理。在RAM 603中，还存储有系统600操作所需的各种程序和数据。CPU 601、ROM 602以及RAM 603通过总线604彼此相连。输入/输出(I/O)接口605也连接至总线604。

以下部件连接至I/O接口605：包括键盘、鼠标等的输入部分606；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分607；包括硬盘等的存储部分608；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分609。通信部分609经由诸如因特网的网络执行通信处理。驱动器610也根据需要连接至I/O接口605。可拆卸介质611，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器610上，以便于从其上读出的计算机程序根据需要被安装入存储部分608。

特别地，根据本发明公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本发明公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分609从网络上被下载和安装，和/或从可拆卸介质611被安装。在该计算机程序被中央处理单元(CPU)601执行时，执行本发明的系统中限定的上述功能。

需要说明的是，本发明所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本发明中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本发明中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。

附图中的流程图和框图，图示了按照本发明各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本发明实施例中所涉及到的模块可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的模块也可以设置在处理器中，例如，可以描述为：一种处理器包括位置获取模块、动画参数计算模块、动画效果生成模块。其中，这些模块的名称在某种情况下并不构成对该模块本身的限定，例如，位置获取模块还可以被描述为“用于响应于动画效果的生成请求，获取目标对象的起始位置和终止位置的模块”。

作为另一方面，本发明还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的设备中所包含的；也可以是单独存在，而未装配入该设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该设备执行时，使得该设备包括：响应于动画效果的生成请求，获取目标对象的起始位置和终止位置；按照预设的动画类型，根据起始位置和终止位置，计算动画参数；根据起始位置和动画参数，基于浏览器的内置动画技术执行对目标对象的动画处理，以生成目标对象的动画效果。

根据本发明实施例的技术方案，响应于动画效果的生成请求，获取目标对象的起始位置和终止位置；按照预设的动画类型，根据起始位置和终止位置，计算动画参数；根据起始位置和动画参数，基于浏览器的内置动画技术执行对目标对象的动画处理，以生成目标对象的动画效果。能够按照不同的动画类型，基于浏览器的内置动画技术执行对对象的动画处理，降低对硬件的性能要求，使得动画效果更加连贯，并且可以实现不同角度和不同动画类型的动画效果，提高流畅性和灵活性。

上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，取决于设计要求和其他因素，可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。

Claims (11)

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

响应于动画效果的生成请求，获取目标对象的起始位置和终止位置；

按照预设的动画类型，根据所述起始位置和所述终止位置，计算动画参数；

根据所述起始位置和所述动画参数，基于浏览器的内置动画技术执行对所述目标对象的动画处理，以生成所述目标对象的动画效果。

2.根据权利要求1所述的方法，其特征在于，所述按照预设的动画类型，根据所述起始位置和所述终止位置，计算动画参数，包括：

根据所述起始位置和所述终止位置，计算第一方向位移和第二方向位移；

按照预设的动画类型和动画效果时间，根据第一方向位移和第二方向位移，确定第一方向动画参数和第二方向动画参数，以生成动画参数。

3.根据权利要求2所述的方法，其特征在于，所述按照预设的动画类型和动画效果时间，根据第一方向位移和第二方向位移，确定第一方向动画参数和第二方向动画参数，以生成动画参数，包括：

根据预设的动画类型，确定第一方向的运动模式和第二方向的运动模式；

根据所述动画效果时间、所述第一方向的运动模式和所述第一方向位移，计算第一方向运动参数，并通过所述第一方向的运动模式和所述第一方向运动参数生成第一方向动画参数；

根据所述动画效果时间、所述第二方向的运动模式和所述第二方向位移，计算第二方向运动参数，并通过所述第二方向的运动模式和所述第二方向运动参数生成第二方向动画参数。

4.根据权利要求2所述的方法，其特征在于，所述目标对象包括外层对象和内层对象，所述根据所述起始位置和所述动画参数，基于浏览器的内置动画技术执行对所述目标对象的动画处理，包括：

将所述起始位置作为所述目标对象的动画起始位置；

根据所述第一方向动画参数，基于浏览器的内置动画技术执行对所述外层对象的动画处理；

根据所述第二方向运动参数，基于浏览器的内置动画技术执行对所述内层对象的动画处理。

5.根据权利要求4所述的方法，其特征在于，所述第一方向为水平方向，所述第二方向为竖直方向；

所述第一方向的运动模式为匀速模式，所述第二方向的运动模式为加速模式；

所述基于浏览器的内置动画技术执行对所述外层对象的动画处理，包括：基于浏览器的内置动画技术执行对所述外层对象的水平匀速线性动画处理；

所述基于浏览器的内置动画技术执行对所述内层对象的动画处理，包括：基于浏览器的内置动画技术执行对所述内层对象的加速自由落体动画处理。

6.根据权利要求1所述的方法，其特征在于，所述响应于动画效果的生成请求之前，还包括：

设置用于指示所述起始位置的起始对象，以及用于指示所述终止位置的终止对象；

对所述起始对象设置动画触发事件，在用户对所述起始对象进行所述动画触发事件的情况下，生成动画效果的生成请求。

7.根据权利要求1所述的方法，其特征在于，所述基于浏览器的内置动画技术执行对所述目标对象的动画处理，以生成所述目标对象的动画效果，包括：

利用层叠样式表，基于浏览器的内置动画技术执行对所述目标对象的动画处理，以生成所述目标对象的动画效果。

8.根据权利要求1所述的方法，其特征在于，所述基于浏览器的内置动画技术执行对所述目标对象的动画处理之后，还包括：

在动画处理执行完成之后，隐藏所述目标对象。

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

位置获取模块，用于响应于动画效果的生成请求，获取目标对象的起始位置和终止位置；

动画参数计算模块，用于按照预设的动画类型，根据所述起始位置和所述终止位置，计算动画参数；

动画效果生成模块，用于根据所述起始位置和所述动画参数，基于浏览器的内置动画技术执行对所述目标对象的动画处理，以生成所述目标对象的动画效果。

10.一种电子设备，其特征在于，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-8中任一所述的方法。

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