CN114911406B - 一种动效生成方法、装置、介质及设备 - Google Patents

Abstract

本说明书实施例提供一种动效生成方法、装置介质及设置，该方法包括：响应于确定目标元素在二维触摸移动的结束事件后的惯性移动涉及显示界面的第一弹性边界之外的区域，根据第一弹性边界、结束事件发生时目标元素的运动状态以及假定终点位置，确定发生碰撞回弹的碰撞信息，其中假定终点位置是基于运动状态仅进行惯性移动的停止位置；根据预设的目标缓动函数以及碰撞信息，生成从运动状态到发生碰撞回弹的第一动画，以及从发生碰撞回弹到目标元素的第一边界与第一弹性边界对齐的第二动画。

Description

一种动效生成方法、装置、介质及设备

技术领域

本说明书涉及动效生成技术领域，尤其涉及一种动效生成方法、装置、介质及设备。

背景技术

目前很多移动终端页面中，例如网站页面，用户与页面之间的交互都是通过手势进行。为了向用户提供较好的视觉效果，在交互过程中，页面中交互的目标元素能够跟指运动，并在手指离开页面后，根据手指离开页面上一时间窗口的运动速度计算后效，后效包括例如碰撞、惯性，阻尼等动画效果。

目前后效一般都是在一维方向上的动画效果，例如水平轴(或竖直轴)方向上的碰撞、惯性，阻尼等动画效果。在一些需要二维方向上的动效画面的场景中，目前不能很好的满足。

发明内容

本说明书一个或多个实施例提供了一种动效生成方法、装置、介质及设备，以实现提供一种二维方向上的动画生成方式。

根据第一方面，提供一种动效生成方法，所述方法包括：

响应于确定目标元素在二维触摸移动的结束事件后的惯性移动涉及显示界面的第一弹性边界之外的区域，根据所述第一弹性边界、所述结束事件发生时所述目标元素的运动状态以及假定终点位置，确定发生碰撞回弹的碰撞信息，其中所述假定终点位置是基于所述运动状态仅进行惯性移动的停止位置；

根据预设的目标缓动函数以及所述碰撞信息，生成从所述运动状态到发生碰撞回弹的第一动画，以及从发生碰撞回弹到所述目标元素的第一边界与所述第一弹性边界对齐的第二动画。

根据第二方面，提供一种动效生成装置，所述装置包括：

第一确定模块，配置为响应于确定目标元素在二维触摸移动的结束事件后的惯性移动涉及显示界面的第一弹性边界之外的区域，根据所述第一弹性边界、所述结束事件发生时所述目标元素的运动状态以及假定终点位置，确定发生碰撞回弹的碰撞信息，其中所述假定终点位置是基于所述运动状态仅进行惯性移动的停止位置；

第一生成模块，配置为根据预设的目标缓动函数以及所述碰撞信息，生成从所述运动状态到发生碰撞回弹的第一动画，以及从发生碰撞回弹到所述目标元素的第一边界与所述第一弹性边界对齐的第二动画。

根据第三方面，提供一种计算机可读存储介质，其上存储有计算机程序，当所述计算机程序在计算机中执行时，令计算机执行第一方面所述的方法。

根据第四方面，提供一种电子设备，包括存储器和处理器，其中，所述存储器中存储有可执行代码，所述处理器执行所述可执行代码时，实现第一方面所述的方法。

根据本说明书实施例提供的方法及装置，可以在确定目标元素在二维触摸移动的结束事件后的惯性移动涉及显示界面的第一弹性边界之外的区域，即确定需要针对目标元素生成其在第一轴上进行惯性移动和碰撞回弹的动效，且在第二轴上至少进行惯性移动的动效，这时，可以根据第一弹性边界、结束事件发生时目标元素的运动状态及假定终点位置，确定发生碰撞回弹的碰撞信息，进而基于预设的目标缓动函数以及碰撞信息，生成从前述的运动状态到发生碰撞回弹的第一动画，以及从发生碰撞回弹到目标元素的第一边界与第一弹性边界对齐的第二动画。这样，利用同一套目标缓动函数和碰撞信息将一段需要在二维方向上展示不同类型动效的动画划分为两段不同阶段动画进行动效展示，实现一种二维方向上的动画生成方式。

附图说明

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

图1为实施例提供的动效生成方法的一种流程示意图；

图2为实施例提供的视窗边界、弹性边界以及元素初始边界之间的位置关系的一种示意图；

图3为实施例提供的确定目标元素的运动状态的一种流程示意图；

图4实施例提供的目标元素在碰撞回弹前后速度方向变化情况的一种示意图；

图5A和图5B分别为实施例提供的当前位置、第一弹性边界、碰撞位置以及假定终点位置之间的位置关系示意图；

图6为实施例提供的贝塞尔曲线的一种示意图；

图7为基于缓动函数确定贝塞尔曲线的一种场景示意图；

图8为实施例提供的生成第一动画和第二动画的流程示意图；

图9为实施例提供的动效生成装置的一种示意性框图；

图10为实施例提供的电子设备的一种示意性框图。

具体实施方式

下面将结合附图，详细描述本说明书实施例的技术方案。

本说明书实施例披露一种动效生成方法、装置、介质及设备，下面首先对动效生成方法的应用场景和技术构思进行介绍，具体如下：

如前所述，在一些需要二维方向上的动效画面的场景中，目前不能很好的满足动效需求。例如，在web(网页)端中，由于web端在动效场景中所存在的底层API(ApplicationProgramming Interface，应用程序接口)设计的缺陷，即同一个添加动画处理(即添加动效)的元素(也可以称为对象等)，无法在水平轴和竖直轴添加不同的动画关键帧和缓动函数。也就是说，在web端，如果对一个元素在不同轴方向上添加不同类型的动画(例如在同一段时间内，水平轴进行碰撞回弹，竖直轴进行惯性滚动)时，需要对该元素进行逐帧的状态运算，进而基于各帧的状态，对该元素添加上述动画。

然而，逐帧的状态运算计算量相对较大，计算开销大，对设备的性能要求较高。

鉴于此，发明人提出一种动效生成方法，以实现一种二维方向上的动画生成方式，克服web端前述的底层API设计的缺陷，能够利用缓动函数和关键帧的方式，实现在web端生成二维方向上的动画，降低动画(动效)生成过程中的计算量，并且降低对设备的性能要求，实现低端机上也能流畅的展示动画。

下面结合具体实施例，对本说明书提供的动效生成方法、装置、介质及设备进行详细阐述。

图1示出了本说明书一个实施例中的动效生成方法的流程图。该方法可以通过SDK(Software Development Kit，软件开发工具包)执行，即该方法可以封装成SDK工具包，该SDK工具包可以部署于电子设备，该电子设备可以是任何具有计算、处理能力的设备。如图1所示，所述方法包括如下步骤S110-S120：

在步骤S110，响应于确定目标元素在二维触摸移动的结束事件后的惯性移动涉及显示界面的第一弹性边界之外的区域，根据第一弹性边界、结束事件发生时目标元素的运动状态以及假定终点位置，确定发生碰撞回弹的碰撞信息。其中假定终点位置是基于运动状态仅进行惯性移动的停止位置。

一种实现中，该电子设备可以设置有触摸显示屏，该触摸显示屏可以展示有显示界面，该显示界面中可以展示有元素，可以通过手势交互方式，控制该元素(即目标元素)进行移动、缩放、旋转等。可以理解的是，为了保证用户体验效果，在手势交互事件触发时，可以首先根据显示界面的预设的视窗边界(即视窗的边界)以及元素初始边界(即手势交互事件触发之前元素的边界)，确定出各个方位的弹性边界，如图2所示，将预设的视窗边界和元素初始边界的交集边界确定为弹性边界，其中，目标元素的上、左和右边界位于视窗内，下元素边界位于视窗外，因此目标元素上、左、右边界和视窗的下边界构成了弹性边界。用户对元素进行拖拽(移动)或缩放后，元素回到静止状态时，其边界不得越过弹性边界。

在一种实现中，该目标元素是web页面中的可交互元素，显示界面是web页面，相应的，该SDK工具包可以嵌入该web页面所属的web端中，以为该web端提供本说明书所提供的动效生成功能。在另一种实现中，该目标元素是指定应用的应用界面。

在一种情况中，在图片预览、漫画阅读等需要通过手势与页面进行交互(即手势交互)的场景中，通过手势交互方式控制目标元素(例如图片、漫画中的插图或插页)移动(即通过手势交互方式拖拽目标元素)。其中，在手指离开显示界面前的预设时长内，手指可以控制目标元素进行二维触摸移动。若SDK工具包检测到手指离开显示界面，并且确定目标元素在手指离开显示界面前的预设时长内跟随手指进行二维触摸移动，则可以确定触发了二维触摸移动的结束事件。在一些情况下，在用户脱手即手指离开显示界面时，目标元素可能会存在一个初速度。此时，SDK工具包可以确定该结束事件触发时该目标元素的速度，进而基于该速度确定是否对目标元素添加惯性移动动画。具体的，在一个实施例中，SDK工具包响应于检测到结束事件，确定目标元素的当前位置和当前速度作为当前的运动状态。

其中，二维触摸移动可以指在显示界面的两个轴(水平轴和竖直轴)方向上均有速度分量的触摸移动。

一种情况中，可以基于结束事件发生时所记录的触点(控制目标元素的触点)的位置，确定目标元素在结束事件发生时的位置即当前位置。将结束事件发生(即手指离开触摸屏)的上一时间窗口的运动速度作为当前速度。其中，触点的位置可以包括相对于显示界面所在坐标系的位置和相对于目标元素所在坐标系的位置。

在另一种情况中，本说明书实施例为了降低手势互动过程以及动效生成过程中数据(事件参数)的传输频率，并且降低手势互动过程以及动效生成过程中的计算开销，在手势交互过程中按预定时间间隔记录若干触摸事件的事件参数，其中，事件参数包括：触摸事件对应的发生时刻和触点的位置。在此基础上，为了保证所确定的目标元素的当前速度的准确性，在一种实现中，如图3所示，前述的确定目标元素的当前位置和当前速度作为其运动状态，可以包括如下步骤S11-S13：

在步骤S11，获取结束事件对应的结束时刻以及该时刻下目标元素的当前位置。

在步骤S12，获取在二维触摸移动期间按预定时间间隔记录的若干触摸事件中最后一个触摸事件对应的第一时刻和第一位置。

在步骤S13，若第一时刻与结束时刻之间的第一时间差不小于预设时间差，则基于结束时刻、当前位置、第一时刻和第一位置，确定目标元素的当前速度。

本实现方式中，SDK工具包响应于检测到结束事件，获取结束事件对应的结束时刻以及该时刻下目标元素的当前位置，其中，该当前位置可以是基于控制目标元素移动的触点在结束时刻的位置确定的。进一步的，获取在二维触摸移动期间按预定时间间隔记录的若干触摸事件中最后一个触摸事件对应的第一时刻和第一位置。计算第一时刻与结束时刻之间的时间差，作为第一时间差，判断该第一时间差是否小于预设时间差，若第一时间差不小于预设时间差，则可以认为所获取的结束时刻下目标元素的当前位置较准确，此时，可以基于结束时刻、当前位置、第一时刻和第一位置，确定目标元素的当前速度。

其中，可以理解的，触摸事件对应的位置一般指控制目标元素的手指在显示界面的位置(即触点的位置)，而触点的位置与目标元素的位置之间存在映射关系。相应的，确定目标元素的当前速度时，可以是先基于第一位置以及该映射关系，确定出目标元素在该第一时刻下的位置，进而，基于结束时刻、当前位置、第一时刻和目标元素在该第一时刻下的位置，确定目标元素的当前速度，具体可以表示为：V＝(dragEnd-dragStart)/(t0-t1)，其中，dragEnd表示当前位置，dragStart表示目标元素在该第一时刻下的位置，t0表示结束时刻，t1表示第一时刻。

或者，也可以是获取结束事件对应的结束时刻和该结束时刻下触点的位置，进而直接基于结束时刻、该结束时刻下触点的位置、第一时刻和第一位置确定目标元素的当前速度。

前述记录一系列触摸事件的预定时间间隔可以根据实际需求进行设置，该预设时间差基于该预定时间间隔确定，例如预设时间差不小于预定时间间隔的n％。例如可以设置预定时间间隔为100ms(毫秒)，该预设时间差可以设置为50ms。

在又一种实现中，如图3所示，前述的确定目标元素的当前位置和当前速度作为其运动状态，还可以包括如下步骤S14-S15：

在步骤S14，若第一时间差小于预设时间差，从若干触摸事件中获取最后一个触摸事件的前一触摸事件对应的第二时刻和第二位置。

在步骤S15，基于结束时刻、当前位置、第二时刻和第二位置，确定当前速度。

本实现方式中，若确定第一时间差小于预设时间差，则认为结束事件和最后一个触摸事件之间的时间间隔过短，基于该结束时刻以及该时刻下目标元素的当前位置计算目标元素的速度会产生较大的误差，则为了保证所确定的目标元素的当前速度的准确性，从若干触摸事件中获取最后一个触摸事件的前一触摸事件对应的第二时刻和第二位置，并基于结束时刻、当前位置、第二时刻和第二位置，确定当前速度。

其中，确定当前速度的过程，可以是先基于第二位置以及前述的映射关系，确定出目标元素在该第二时刻下的位置，进而，基于结束时刻、当前位置、第二时刻和目标元素在该第二时刻下的位置，确定目标元素的当前速度，具体可以表示为：V＝(dragEnd-lastDragStart)/(t0-t2)，其中，dragEnd表示当前位置，dragStart表示目标元素在该第二时刻下的位置，t0表示结束时刻，t2表示第二时刻。

或者，也可以是获取结束事件对应的结束时刻和该结束时刻下触点的位置，进而直接基于结束时刻、该结束时刻下触点的位置、第二时刻和第二位置确定当前速度。

在一种实现中，若未获取到所记录的最后一个触摸事件的前一触摸事件对应的第二时刻和第二位置，则可以认为触摸事件过短，不对目标元素进行惯性移动处理，即确定不对目标元素添加惯性移动动画。

在确定出目标元素在结束事件发生时、即在结束时刻下的当前位置和当前速度(即目标元素的运动状态)之后，可以基于当前速度确定目标元素是否需要进行惯性移动，即是否对目标元素添加惯性移动动画。其中，若当前速度超过预设速度阈值，确定目标元素需要进行惯性移动，若当前速度未超过预设速度阈值，确定目标元素不需要进行惯性移动。

在确定目标元素需要进行惯性移动的情况下，可以继续确定目标元素在二维触摸移动的结束事件后的惯性移动，是否会涉及显示界面的第一弹性边界之外的区域。该第一弹性边界为任意的第一轴对应的在目标元素移动方向上的弹性边界。该第一轴可以是水平轴也可以是竖直轴，其中，当前第一轴为水平轴时，第二轴为竖直轴；当前第一轴为竖直轴，第二轴为水平轴。

其中，若确定目标元素在二维触摸移动的结束事件后的惯性移动涉及第一弹性边界之外的区域，则需要为目标元素添加在第一弹性边界对应的第一轴方向上的先惯性移动后碰撞回弹的动画，又需要为目标元素添加在第二轴方向上的惯性移动动画，即需要对目标元素添加二维碰撞回弹动画。

若确定目标元素在二维触摸移动的结束事件后的惯性移动不会越过任意轴对应的弹性边界，则可以直接为目标元素添加惯性移动动画。

在一个实施例中，运动状态包括当前位置和当前速度；该确定目标元素在二维触摸移动的结束事件后的惯性移动涉及第一弹性边界之外的区域，可以包括如下两种情况：

第一种情况，若当前位置位于第一弹性边界之外，则目标元素基于惯性移动继续沿着其当前速度方向(即其运动方向)移动，移动位置也会在第一弹性边界之外，相应的，若当前位置位于第一弹性边界之外，确定惯性移动涉及第一弹性边界之外的区域。

第二种情况，若当前位置位于第一弹性边界之内，且根据当前速度确定需要进行惯性移动，则确定假定终点位置，并在假定终点位置位于第一弹性边界之外的情况下，即确定目标元素在进行惯性移动过程中越过第一弹性边界，则确定惯性移动涉及第一弹性边界之外的区域。

可以理解的，该假定终点位置为，目标元素基于其运动状态(当前位置和当前速度)仅进行惯性移动的停止位置，即为在假设没有碰撞回弹的影响下，目标元素基于其运动状态(当前位置和当前速度)仅进行惯性移动的停止位置。同时，目标元素基于其运动状态(当前位置和当前速度)仅进行惯性移动的过程，还可以确定出该过程中相应的运动总时间。该运动总时间即为后续提到的二维碰撞回弹动效的运动总时间。

可以理解的是，若目标元素在第一弹性边界之内，目标元素进行惯性移动，可以是基于当前位置和当前速度，按预设的减加速度进行减速运动。若目标元素在第一弹性边界之外，目标元素进行惯性移动，可以是基于当前位置和当前速度，按预设的减加速度以及预设的越界阻尼系数进行减速运动。若目标元素进行惯性移动，从第一弹性边界之内，移动到第一弹性边界之外，则目标元素在第一弹性边界之内时，基于当前位置和当前速度，按预设的减加速度进行匀减速运动，越过第一弹性边界后，基于越过第一弹性边界时的位置和速度，按预设的减加速度以及预设的越界阻尼系数进行减速运动。

相应的，在一种实现方式中，假定终点位置基于第一弹性边界、运动状态(当前位置和当前速度)、预设的减加速度以及预设的越界阻尼系数而确定。

接着，SDK工具包在确定目标元素在二维触摸移动的结束事件后的惯性移动涉及第一弹性边界之外的区域之后，执行前述的步骤S110。

在一个实施例中，在步骤S110，可以包括如下步骤：在步骤21，根据第一弹性边界、运动状态中的当前位置以及假定终点位置，确定发生碰撞回弹的碰撞位置。

在步骤22，基于碰撞位置，确定碰撞时间和碰撞关键帧，以确定碰撞信息。

本实现方式中，SDK工具包首先根据第一弹性边界、运动状态中的当前位置P0以及假定终点位置P2，确定发生碰撞回弹的碰撞位置P1，该碰撞位置P1应使得，目标元素从P0惯性运动到该位置发生弹性碰撞从而改变方向后，向第一弹性边界继续惯性移动，并最终“吸附”在第一弹性边界上。也就是，目标元素的外边界与第一弹性边界对齐。

在动效生成过程中，为了降低生成过程中的计算量，并且降低对设备的性能要求，可以通过利用缓动函数和关键帧来生成动效，然而，考虑到web端前述的底层API设计的缺陷，同一个添加动画处理(生成动效)的元素，无法在水平轴和垂直轴上添加不同的动画关键帧和缓动函数。鉴于此，本说明书实施例，则需要考虑如何利用同一套缓动函数和动画关键帧，实现二维碰撞回弹动画的生成，以能够利用缓动函数和关键帧，实现在web端生成二维方向上的动画。

可以理解的，该碰撞位置为动画状态转变的位置，即目标元素移动至碰撞位置之前即发生碰撞回弹之前，目标元素的速度在二维方向上(第一轴和第二轴方向)均有分量，且按照其当前速度所在方向进行惯性移动(减速运动)。在目标元素移动至碰撞位置即发生碰撞回弹之后，目标元素在第一轴方向上碰撞回弹，即按照碰撞前速度在第一轴上速度分量的反方向进行运动(也为减速运动)，在第二轴方向上扔按照其碰撞前速度在第二轴上速度分量继续进行惯性移动(也为减速运动)，在到达碰撞位置前后目标元素的速度方向发生变化，相应的目标元素的动画状态发生转变。其中，目标元素在碰撞位置前后的移动示意图，如图4所示。在图4的示例中，目标元素当前速度所在方向为指向图中的左上方方向，在目标元素移动至碰撞位置之前即发生碰撞回弹之前，目标元素向左上方移动，如图4中箭头1所示，在元素移动至碰撞位置即发生碰撞回弹之后，目标元素向右上方移动，如图4中箭头2所示。

鉴于此，可以以碰撞位置为二维碰撞回弹动画的分割位置，可以将动画分割为两个做减速运动的动画，如图4所示，达到碰撞位置沿左上方的方向做减速运动，离开碰撞位置之后，沿右上方的方向做减速运动，而两个做减速运动的动画，理论上可以使用同一个缓动函数来控制。

相应的，在确定该碰撞位置之后，可以进而基于碰撞位置确定碰撞关键帧，该碰撞关键帧即为目标元素碰撞回弹前动画和碰撞回弹后动画的状态转变帧。并可以基于该碰撞位置确定碰撞时间，以确定出碰撞信息。可以理解的，缓动函数为描述一段动画状态随时间变化的函数，碰撞位置为动画状态转变的位置，基于碰撞位置，确定出碰撞时间，既确定出将缓动函数分割成碰撞回弹前动画对应的缓动函数(即用于控制碰撞回弹前目标元素移动状态的缓动函数)，以及碰撞回弹后动画对应的缓动函数(即用于控制碰撞回弹后目标元素移动状态的缓动函数)的分割位置。

在一种实现中，用户在与目标元素进行手势交互过程中，通过手指拖拽目标元素进行移动之后脱手，此时目标元素可能存在一个初速度，即当前速度。当前速度可以在一定程度上影响目标元素进行惯性移动以及进行回弹碰撞的效果。在当前速度适中且当前位置适中(例如相应的满足对应的预设条件)的情况下，目标元素进行碰撞回弹后可以有合适的速度回弹至(即被吸附至)第一弹性边界，这样的动画其呈现效果则会给用户带来比较友好的视觉效果。在另一种情况下，当前速度可能不利于良好的动画效果展现。例如当前速度过大(超过一定速度阈值)，可能出现目标元素进行惯性移动的位移过长(超过一定位移阈值)，相应的，在二维碰撞弹回动画中，在碰撞回弹前，目标元素会先进行一段较长位移的惯性移动，在碰撞回弹后，再进行一段较长位移移动至第一弹性边界(即碰撞位置与第一弹性边界之间的在第一轴方向上的距离较远)，动画效果拖沓，这样会给用户带来不够友好的视觉效果。又例如，当前速度过小，而当前位置在第一弹性边界之外，这种情况下，目标元素可能出现没有足够的速度碰撞回弹至第一弹性边界，也会影响动画效果。

考虑以上各种情况，可以通过碰撞位置的确定，调整动画效果。相应的，在一个实施例中，在步骤21，可以包括如下步骤211-214：

在步骤211，确定初始碰撞位置，以使得在第一轴方向上，第一弹性边界到初始碰撞位置的第一距离，等于初始碰撞位置与假定终点位置的第二距离。

在步骤212，若第二距离位于第一距离阈值和第二距离阈值之间，则将初始碰撞位置作为碰撞位置。其中，第一距离阈值小于第二距离阈值。

在步骤213，若第二距离大于第二距离阈值，基于第二距离阈值、运动状态，确定碰撞位置。

在步骤214，若第二距离小于第一距离阈值，基于当前位置和假定终点位置，确定碰撞位置。

清晰起见，首先描述理想情况下碰撞位置的确定。图5A和图5B分别示出在脱手位置(当前位置)位于第一弹性边界之内和之外的情况下，碰撞位置与其他位置之间的关系。

具体的，如图5A所示，当前位置(脱手位置)位于第一弹性边界之内，若其仅进行惯性运动，则会到达假定终点位置P2。为了确保碰撞回弹之后，目标元素最终吸附到第一弹性边界，则在第一轴方向上，碰撞位置应位于假定终点位置和吸附位置的中心。

若将第一轴方向上，第一弹性边界到碰撞位置的距离记为第一距离(对应于图5A的距离b)，将碰撞位置与假定终点位置之间的距离记为第二距离(对应于图5A的距离a)，碰撞位置应使得，第一距离和第二距离相等，b＝a。

越界前位移表示目标元素从当前位置P0移动到第一弹性边界在第一轴方向上的位移，越界后位移表示目标元素从第一弹性边界运动到假定终点位置P2在第一轴方向上的位移。L表示目标元素碰撞回弹前在第一轴方向上的位移(即第一位移在第一轴方向上的分量)，P表示目标元素碰撞回弹前在第二轴上的位移(即第一位移在第二轴方向上的分量)，L’表示目标元素碰撞回弹后在第一轴方向上的位移(第二位移在第一轴方向上的分量)，P’表示目标元素碰撞回弹后在第二轴上的位移(第二位移在第二轴方向上的分量)。

如图5B所示，当前位置(脱手位置)位于第一弹性边界之外，若其仅进行惯性运动，则会到达假定终点位置P2。为了确保碰撞回弹之后，目标元素最终吸附到第一弹性边界，则在第一轴方向上，碰撞位置也应位于假定终点位置和吸附位置的中心。

若将第一轴方向上，第一弹性边界到碰撞位置的距离记为第一距离(对应于图5B的距离b)，将碰撞位置与假定终点位置之间的距离记为第二距离(对应于图5B的距离a)，碰撞位置应使得，第一距离和第二距离相等，b＝a。

其中，图5B中所示的越界位置为目标元素越过第一弹性边界的位置，脱手后位移表示目标元素从当前位置P0到假定终点位置P2在第一轴方向上的位移。

图5A和图5B分别示出在脱手位置(当前位置)位于第一弹性边界之内和之外的情况下，理想情况下碰撞位置的确定，然而碰撞位置的确定在一定程度上受到脱手时目标元素的当前速度，在目标元素的当前速度过大时，会使得当前位置与假定终点位置之间的距离较大，在目标元素的当前速度过小时，会使得当前位置与假定终点位置之间的距离较小，也就是说，当前速度的大小影响当前位置与假定终点位置之间的距离的大小。

又考虑到碰撞位置位于当前位置与假定终点位置之间，而第二距离(碰撞位置与假定终点位置之间的距离)的大小，等于当前位置与假定终点位置之间的距离的一部分，相应的，在目标元素的当前速度过大时，当前位置与假定终点位置之间的距离较大，相应的第二距离(如图5A和图5B所示的距离a)也会较大；在目标元素的当前速度过小时，当前位置与假定终点位置之间的距离较小，相应的第二距离(如图5A和图5B所示的距离a)也会较小。

鉴于上述情况，本实现方式中，通过第二距离，确定碰撞位置的确定方式。若第二距离位于第一距离阈值和第二距离阈值之间，则认为当前速度适中，可以保证目标元素碰撞回弹之后，被吸附至第一弹性边界，相应的，将初始碰撞位置作为碰撞位置。

若第二距离(初始碰撞位置P1与假定终点位置P2之间的距离)大于第二距离阈值，即认为碰撞回弹后移动位移(即初始碰撞位置与第一弹性边界之间的距离)也会过大，此时可以认为当前速度过大，为了保证动画效果，基于第二距离阈值以及目标元素的运动状态，确定碰撞位置。具体的，可以是将第二距离阈值作为碰撞位置与第一弹性边界之间的在第一轴方向上的位移(或者称为距离)，在目标元素从当前位置沿当前速度移动的方向上，确定出与第一弹性边界之间的在第一轴方向上的位移为第一距离阈值的位置，将该位置确定为碰撞位置。以在一定程度上可以得到对于用户而言视觉效果较好的二维碰撞回弹动画。

其中，该第二距离阈值可以是基于显示界面的尺寸设置的，举例而言，该第二距离阈值可以等于，显示界面的宽/显示界面的高的三分一。

又一种情况，若第二距离(初始碰撞位置P1与假定终点位置P2之间的距离)小于第一距离阈值，相应的，认为当前位置P0与假定终点位置P2之间的距离较小，相应的，可以认为当前速度(结束事件发生时目标元素的速度)较低，这可能会导致目标元素进行碰撞回弹后，没有足够的速度回弹至第一弹性边界。对于该类情况，可以基于当前位置和假定终点位置，确定碰撞位置。其中，可以是，在当前位置处于第一弹性边界之外的情况下，将当前位置和假定终点位置的中点位置作为碰撞位置。

通过上述方式确定碰撞位置，相当于为目标元素在发生碰撞回弹时添加一个较大的初速度，使得目标元素可以移动至第一弹性边界，保证动画展示效果。

如图5A所示，a和b均等于当前位置和假定终点位置在第一轴方向上的距离，与当前位置到第一弹性边界的距离的差值的一半。L等于越界前位移(当前位置到第一弹性边界的距离)与越界后位移的一半(b)的和值，L’等于越界后位移的一半(b)。相应的，P等于目标元素越界前在第二轴方向上的位移与越界后在第二轴方向上的位移的一半的和值(可以通过L和L’，基于三角形相似定理确定)，P’等于目标元素越界后在第二轴方向上的位移的一半(可以通过L和L’，基于三角形相似定理确定)。

如图5B所示，a和b均等于当前位置与假定终点位置在第一轴方向上的距离与当前位置与第一弹性边界的距离的和值的一半(为了描述方便)。L等于目标元素从当前位置到碰撞位置在第一轴方向上的距离(b与当前位置到第一弹性边界的距离的差值)，L’等于b。P和P’可以通过L和L’，基于三角形相似定理确定。

在确定出碰撞位置之后，在一个实施例中，在步骤22，可以包括如下步骤221-222：

在步骤221，基于碰撞位置，确定碰撞关键帧。本步骤中确定出碰撞位置之后，即可以得到目标元素处于该碰撞位置的状态，即可以确定出碰撞关键帧。

在步骤222，基于第一位移和目标缓动函数对应的缓动函数方程，确定碰撞时间；其中，第一位移是从当前位置到碰撞位置的位移。

可以理解的，缓动函数为描述一段动画状态随时间进行变化的函数，该目标缓动函数为预先设置的，用于描述二维碰撞回弹动画的动画状态随时间进行变化的函数，目标元素从当前位置移动到碰撞位置为目标元素在碰撞回弹前的一个动画阶段，即目标元素移动第一位移，可达到碰撞位置，相应的，可以将第一位移在第一轴方向上的分量代入目标缓动函数对应的缓动函数方程，可以确定出目标元素移动第一位移达到碰撞位置时所需的时间，即碰撞时间即目标元素在碰撞回弹前移动的时间。

基于该碰撞时间以及前述的计算所得的二维碰撞回弹动效的运动总时间，可确定出目标元素从碰撞位置到回弹至第一弹性边界的时间，也即目标元素在碰撞回弹后移动的时间，具体为运动总时间与碰撞时间的差值时间。

在一种实现中，该目标缓动函数为贝塞尔缓动函数Cubic-Bezier＝(x1,y1,x2,y2)，即基于贝塞尔曲线定义的，其中，(x1，y1)和(x2，y2)分别是该贝塞尔缓动函数的两个控制点，如图6所示，为贝塞尔曲线的一种示意图。在web端用于定义缓动函数的贝塞尔曲线均为三次贝塞尔曲线，具体的三次贝塞尔曲线的曲线方程即缓动函数方程可以通过如下公式(1)和(2)表示：

y＝3t(1-t)^2y_1+3t^2(1-t)^y_2+t^3； (1)

x＝3t(1-t)^2x_1+3t^2(1-t)^x_2+t^3； (2)

其中，(x，y)表示缓动函数方程自变量和因变量，即三次贝塞尔曲线上的点，(x_1，y_1)以及(x_2，y_2)表示缓动函数的两个控制点，t表示分位点，用于基于缓动函数方程，确定两点之间的三次贝塞尔曲线。在web端，三次贝塞尔曲线的定义域和值域均为[0,1]，即目标缓动函数经过[0，0]和[1,1]。

如图7所示，为在分位点t＝0.5(中间点)的前提下，确定基于确定的起点A和终点D，以及两个控制点B和C，确定其对应的三次贝塞尔曲线过程的示意图。具体的，计算起点A、控制点B、控制点C以及终点D两两之间的t分位点E、F和G，并连接这些分位点，构成新的线段，进一步计算新的线段的分位点H，J，如此迭代最终确定到三次贝塞尔曲线上一点K，K随t变化运动轨迹，即对应起点A与终点D之间由控制点B和C所控制的三次贝塞尔曲线。

假设目标元素在水平轴(第一轴)方向上向右移动距离L(即第一位移在第一轴方向上的分量)，即发生碰撞回弹，之后碰撞回弹的移动距离假设为L’(即第二位移在在第一轴方向上的分量)，则目标元素在碰撞回弹前后在水平轴方向上的移动总距离为L+L’，如图4所示。为了能够使用同一套缓动函数和关键帧，实现二维碰撞回弹动画，可以将二维碰撞回弹动画分割成两段子动画(分割成两段在不同轴方向上均做减速运动的画面)，分别是0％至L/(L+L')(碰撞回弹前动画)，以及L/(L+L')至100％(碰撞回弹后动画)。之后，计算碰撞时间T，这样就可以实现在两段子动画的切换位置处***两段子动画公用的碰撞关键帧(动画状态发生变化的位置)。该碰撞时间T用于将二维碰撞回弹动画对应的缓动函数(即目标缓动函数)拆分成两段子动画分别对应的缓动函数。

具体的，考虑到缓动函数的值域和定义域的取值范围均为[0,1]，那么，可以首先将第一位移在第一轴方向上的分量L归一化到[0,1]，得到归一化后的值，为(L/(L+L'))，将y＝L/(L+L'(即归一化后的第一位移在第一轴方向上的分量)代入上述公式(1)中，计算出t，进而将计算所得的t带入代入上述公式(2)中，以确定出对应的x值，之后，利用该x值以及运动总时间(目标元素基于该运动状态惯性移动到假定终点位置的时间)，确定碰撞时间T。具体的，碰撞时间T等于该x值与运动总时间的乘积。

其中将归一化后的L作为y值代入上述公式(1)中，可以采用一元三次方程的通解公式，计算出t。

确定出碰撞信息之后，在步骤S220，根据预设的目标缓动函数以及碰撞信息，生成从运动状态到发生碰撞回弹的第一动画，以及从发生碰撞回弹到目标元素的第一边界与第一弹性边界对齐的第二动画。

本步骤中，碰撞信息包括目标元素碰撞回弹时的相关信息，可以包括碰撞位置、碰撞时间和与碰撞位置对应的碰撞关键帧。在确定出碰撞信息之后，可以基于碰撞信息将二维碰撞回弹动画划分为两段子动画，即从运动状态到发生碰撞回弹(碰撞回弹前)的第一动画(例如前述的0％至L/(L+L')动画)，以及从发生碰撞回弹到目标元素的第一边界与第一弹性边界对齐(即前述的目标元素从发生碰撞回弹到回弹至第一弹性边界，即碰撞回弹后)的第二动画(例如前述的L/(L+L')至100％动画)。

需要理解的是，如图7所示，点A～K区间也可视为一条三次贝塞尔曲线，其控制点为E和H；点K～D区间也可视为一条三次贝塞尔曲线，其控制点为J和G。基于此，可以认为求解三次贝塞尔曲线一点的坐标，和基于该点将三次贝塞尔曲线拆分为两段贝塞尔曲线是等价的。基于三次贝塞尔曲线一点的坐标拆分该三次贝塞尔曲线(初始的三次贝塞尔曲线)，拆分所得的贝塞尔曲线等价于该初始的三次贝塞尔曲线，其中，仅是拆分所得的贝塞尔曲线与该初始的三次贝塞尔曲线的值域和定义域存在不同。

本步骤中，确定出碰撞信息之后，在将二维碰撞回弹动画划分为两段子动画，即第一动画和第二动画之后，将该二维碰撞回弹动画的缓动函数即目标缓动函数，以碰撞信息中的碰撞时间T为断点，拆分成两段子动画分别对应的缓动函数，并确保这两段子动画的缓动函数能够被贝塞尔曲线描述，通过图7所示，可以确定以碰撞时间T为断点，拆分成两段子动画分别对应的缓动函数，该两段子动画分别对应的缓动函数能够被贝塞尔曲线描述。

具体的，在一个实施例中，前述的碰撞信息可以包括碰撞位置、碰撞时间以及该碰撞位置对应的碰撞关键帧；如图8所示，在步骤S220，可以包括如下步骤S31-S34：

在步骤S31，基于碰撞时间及目标缓动函数，确定碰撞回弹发生前的第一缓动函数，以及碰撞回弹发生后的第二缓动函数。本步骤中，基于碰撞时间对目标缓动函数进行划分，得到划分所得两个子缓动函数，可以理解的，目标缓动函数的两个控制点已经确定，可以基于目标缓动函数的两个控制点，该碰撞时间以及前述的将第一位移代入公式(1)所确定出t值，按照图7所示的方法，可以确定出两个子缓动函数各自对应的两个控制点，之后，通过线性变换，将两个子缓动函数的值域和定义域均缩放至[0,1]，得到碰撞回弹发生前的第一缓动函数，以及碰撞回弹发生后的第二缓动函数。

在步骤S32，基于第一缓动函数、碰撞时间、碰撞关键帧、从当前位置到碰撞位置的第一位移，生成第一动画。本步骤中，从当前位置到碰撞位置的第一位移可以限定在第一动画从开始到结束(即到碰撞关键帧)目标元素分别在第一轴方向和第二轴方向所移动的距离，碰撞时间可以限定第一动画从开始到结束的具体时间，第一缓动函数可以控制第一动画从开始到结束的目标元素的移动趋势，即基于第一缓动函数、碰撞时间、碰撞关键帧和第一位移，可以生成第一动画。

在步骤S33，基于第二缓动函数、碰撞时间、碰撞关键帧、从碰撞位置到目标位置的第二位移，生成第二动画。其中目标位置是目标元素的第一边界与第一弹性边界对齐的位置。该第一边界为越过第一弹性边界的边界，在一种情况中，前述的当前位置可以指第一边界的位置，相应的碰撞位置、假定终点位置可以为针对第一边界所确定的。另一种情况，前述的当前位置也可以值目标元素的重心的位置，目标元素确定，其重心的位置与第一边界的位置之间的相对位置关系确定，可以基于该相对位置关系以及重心的位置确定第一边界的位置，并确定出目标位置。

本步骤中，从碰撞位置到目标位置之间的第二位移可以限定在第二动画从开始(即碰撞关键帧)到结束，目标元素分别在第一轴方向和第二轴方向所移动的距离，基于碰撞时间可以确定出限定第二动画从开始到结束的具体时间，第二缓动函数可以控制第二动画从开始到结束的目标元素的移动趋势，即基于第二缓动函数、碰撞时间、碰撞关键帧和第二位移，可以生成第二动画。

在一个实施例中，可以理解的，在利用缓动函数以及关键帧生成二维碰撞回弹动效的过程，还需要利用到二维碰撞回弹动效的开始关键帧以及结束关键帧，以进行动画差值，相应的，所述碰撞信息还可以包括该结束事件发生时的开始关键帧(即二维碰撞回弹动效的开始关键帧)以及达到目标位置时的结束关键帧(二维碰撞回弹动效的结束关键帧)；

在步骤S32，具体包括基于第一缓动函数、碰撞时间、开始关键帧、碰撞关键帧、第一位移在第一轴方向和第二轴方向各自的分量，生成第一动画，第一轴方向和第二轴方向互相垂直。本步骤中，以开始关键帧为首帧，以碰撞关键帧为结束帧，基于第一缓动函数、碰撞时间、第一位移在第一轴方向和第二轴方向各自的分量，生成第一动画。

在步骤S33，具体包括根据运动总时间和碰撞时间，确定反弹时间，其中运动总时间是目标元素基于运动状态惯性移动到假定终点位置的时间；基于第二缓动函数、反弹时间、碰撞关键帧、结束关键帧、第二位移在第一轴方向和第二轴方向各自的分量，生成第二动画。

本步骤，将目标元素基于运动状态惯性移动到假定终点位置的时间，即运动总时间作为目标元素的二维碰撞回弹动画的展示时间，基于运动总时间和碰撞时间可以确定出反弹时间，即目标元素碰撞回弹后被吸附至第一弹性边界的时间长度，用于限定第二动画从开始到结束的具体时间。以碰撞关键帧为首帧，以结束关键帧为结束帧，基于第二缓动函数、反弹时间、第二位移在第一轴方向和第二轴方向各自的分量，生成第二动画。

本实施例，可以响应于确定目标元素在二维触摸移动的结束事件后的惯性移动会越过显示界面的第一轴对应的第一弹性边界，根据第一弹性边界、结束事件发生时目标元素的运动状态以及假定终点位置，确定发生碰撞回弹的碰撞信息，该碰撞信息至少包括分割目标函数函数的分割信息，也包括进行动画状态转变时的关键帧(即碰撞关键帧)，进而可以实现利用碰撞信息对目标缓动函数的分割，进而，利用目标缓动函数的分割实现对动画的分段，进而可以实现通过同一套缓动函数以及关键帧来处理运动(动画)差值，仅通过调整关键帧状态的方式，来修正整个动画过程的表现，实现对二维方向上的碰撞回弹的动画生成。

并且，本实施例中，利用缓动函数和关键帧的方式生成动画，计算开销少，且对设备的性能要求不高，并且具有更高的动画渲染流畅度。

在一个实施例中，在生成第一动画和第二动画之后，所述方法还可以包括：在web页面上依次展示第一动画和第二动画。即基于预先确定的展示顺序依次展示第一动画和第二动画，以为用户提供舒适的视觉效果。

在另一个实施例中，所述方法还可以包括：在web页面上依次展示第一动画和第二动画的过程中，若检测到新的触摸事件生成，中断动画，并在中断动画的下一帧，显示第二动画的最后一帧。即本实现方式中，在web页面上展示第一动画和第二动画的过程，即展示二维碰撞回弹的动效过程中，若检测到新的触摸事件生成，则生成点停事件，中断动画，即web页面的暂停展示后续动画，将画面展示于新的触摸事件生成时web页面上所展示的一帧，并且为了让目标元素移动到目标位置，在中断动画的下一帧，显示第二动画的最后一帧，即前述的结束关键帧，以使得目标元素移动到目标位置。

在一种实现方式中，在响应于确定目标元素在二维触摸移动的结束事件后的惯性移动会越过第一弹性边界，并且之后还会越过显示界面的第二轴对应的第二弹性边界，此时，可以首先针对越过第一弹性边界而出现的第一轴方向上的碰撞回弹，基于本说明书实施例提供的上述动效生成过程，确定其碰撞信息，之后，基于碰撞信息和目标缓动函数，确定出从运动状态到在第一轴方向上发生碰撞回弹的第一动画，和从在第一轴方向上发生碰撞回弹到目标位置的第二动画。之后，再针对越过第二弹性边界而出现的第二轴方向上的碰撞回弹，基于本说明书实施例提供的上述动效生成过程，确定第二轴方向上的碰撞信息，之后，基于第二轴方向上的碰撞信息和第二缓动函数，确定出第二动画从在第一轴方向上发生碰撞回弹到在第二轴方向上发送碰撞回弹前的第三动画，和从在第二轴方向上发送碰撞回弹到目标位置的第四动画。

也就是说，生成二维碰撞回弹动画所需的关键帧从前述的三帧(开始关键帧，碰撞关键帧，结束关键帧)，变为(开始关键帧，第一次碰撞关键帧，第二次碰撞关键帧，结束关键帧)，第一次碰撞关键帧即碰撞关键帧，第二次碰撞关键帧为目标元素在第二轴方向上进行碰撞回弹的碰撞位置的关键帧。

上述内容对本说明书的特定实施例进行了描述，其他实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行，并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要按照示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的，或者可能是有利的。

相应于上述方法实施例，本说明书实施例，提供了一种动效生成装置900，其示意性框图如图9所示，包括：

第一确定模块910，配置为响应于确定目标元素在二维触摸移动涉及显示界面的第一弹性边界之外的区域，根据所述第一弹性边界、所述结束事件发生时所述目标元素的运动状态以及假定终点位置，确定发生碰撞回弹的碰撞信息，其中所述假定终点位置是基于所述运动状态仅进行惯性移动的停止位置；

第一生成模块910，配置为根据预设的目标缓动函数以及所述碰撞信息，生成从所述运动状态到发生碰撞回弹的第一动画，以及从发生碰撞回弹到所述目标元素的第一边界与所述第一弹性边界对齐的第二动画。

在一种可实施方式中，还包括：

第二确定模块(图中未示出)，配置为响应于检测到所述结束事件，确定所述目标元素的当前位置和当前速度作为当前的运动状态。

在一种可实施方式中，所述第二确定模块，具体配置为

获取所述结束事件对应的结束时刻以及该时刻下目标元素的当前位置；

获取在所述二维触摸移动期间按预定时间间隔记录的若干触摸事件中最后一个触摸事件对应的第一时刻和第一位置；

若所述第一时刻与所述结束时刻之间的第一时间差不小于预设时间差，则基于所述结束时刻、当前位置、第一时刻和第一位置，确定所述目标元素的当前速度。

在一种可实施方式中，所述第二确定模块，还配置为

若所述第一时间差小于所述预设时间差，从所述若干触摸事件中获取所述最后一个触摸事件的前一触摸事件对应的第二时刻和第二位置；

基于所述结束时刻、当前位置、第二时刻和第二位置，确定所述当前速度。

在一种可实施方式中，所述运动状态包括当前位置和当前速度；确定目标元素在二维触摸移动的结束事件后的惯性移动会越过显示界面的第一轴对应的第一弹性边界，包括：

若所述当前位置位于所述第一弹性边界之外，确定所述惯性移动涉及所述第一弹性边界之外的区域；或者，

若所述当前位置位于所述第一弹性边界之内，且根据所述当前速度确定需要进行所述惯性移动，则确定所述假定终点位置，并在所述假定终点位置位于所述第一弹性边界之外的情况下，确定所述惯性移动涉及所述第一弹性边界之外的区域。

在一种可实施方式中，根据所述当前速度确定需要进行所述惯性移动，包括：若所述当前速度超过预设速度阈值，确定需要进行惯性移动。

在一种可实施方式中，所述假定终点位置基于所述第一弹性边界、所述运动状态、预设的减加速度以及预设的越界阻尼系数而确定。

在一种可实施方式中，所述第一确定模块910，包括：

第一确定单元(图中未示出)，配置为根据所述第一弹性边界、所述运动状态中的当前位置以及所述假定终点位置，确定发生碰撞回弹的碰撞位置；

第二确定单元(图中未示出)，配置为基于所述碰撞位置，确定碰撞时间和碰撞关键帧，以确定所述碰撞信息。

在一种可实施方式中，所述第一确定单元，具体配置为确定初始碰撞位置，以使得在所述第一弹性边界对应的第一轴方向上，所述第一弹性边界到所述初始碰撞位置的第一距离，等于所述初始碰撞位置与所述假定终点位置的第二距离；

若所述第二距离位于第一距离阈值和第二距离阈值之间，则将所述初始碰撞位置作为所述碰撞位置；

若所述第二距离大于所述第二距离阈值，基于所述第二距离阈值、所述运动状态，确定所述碰撞位置；

若所述第二距离小于所述第一距离阈值，基于所述当前位置和所述假定终点位置，确定所述碰撞位置。

在一种可实施方式中，所述第二确定单元，具体配置为基于所述碰撞位置，确定所述碰撞关键帧；

基于第一位移和所述目标缓动函数对应的缓动函数方程，确定所述碰撞时间；其中，所述第一位移是从所述当前位置到所述碰撞位置在所述第一轴方向上的位移。

在一种可实施方式中，所述碰撞信息包括碰撞位置、碰撞时间以及所述碰撞位置对应的碰撞关键帧；所述第一生成模块920，包括：

第三确定单元(图中未示出)，配置为基于所述碰撞时间及所述目标缓动函数，确定碰撞回弹发生前的第一缓动函数，以及碰撞回弹发生后的第二缓动函数；

第一生成单元(图中未示出)，配置为基于所述第一缓动函数、所述碰撞时间、所述碰撞关键帧、从所述当前位置到所述碰撞位置的第一位移，生成所述第一动画；

第二生成单元(图中未示出)，配置为基于所述第二缓动函数、所述碰撞时间、所述碰撞关键帧、从所述碰撞位置到目标位置的第二位移，生成所述第二动画，其中所述目标位置是所述目标元素的第一边界与所述第一弹性边界对齐的位置。

在一种可实施方式中，所述碰撞信息还包括所述结束事件发生时的开始关键帧以及达到所述目标位置时的结束关键帧；

所述第一生成单元，具体配置为基于所述第一缓动函数、所述碰撞时间、所述开始关键帧、所述碰撞关键帧、所述第一位移在第一轴方向和第二轴方向各自的分量，生成所述第一动画，所述第一轴方向和第二轴方向互相垂直；

所述第二生成单元，具体配置为根据运动总时间和所述碰撞时间，确定反弹时间，其中运动总时间是目标元素基于所述运动状态惯性移动到所述假定终点位置的时间；基于所述第二缓动函数、所述反弹时间、所述碰撞关键帧、所述结束关键帧、所述第二位移在第一轴方向和第二轴方向各自的分量，生成所述第二动画。

在一种可实施方式中，所述目标元素是web页面中的可交互元素，所述显示界面是web页面。

在一种可实施方式中，还包括：

展示模块(图中未示出)，配置为在web页面上依次展示所述第一动画和所述第二动画。

在一种可实施方式中，还包括：

中断显示模块(图中未示出)，配置为在所述web页面上依次展示所述第一动画和所述第二动画的过程中，若检测到新的触摸事件生成，中断动画，并在中断动画的下一帧，显示所述第二动画的最后一帧。

上述装置实施例与方法实施例相对应，具体说明可以参见方法实施例部分的描述，此处不再赘述。装置实施例是基于对应的方法实施例得到，与对应的方法实施例具有同样的技术效果，具体说明可参见对应的方法实施例。

下面参考图10，其示出了适于用来实现本申请实施例的电子设备100的结构示意图。图10示出的服务器仅仅是一个示例，不应对本申请实施例的功能和使用范围带来任何限制。

如图10所示，电子设备100可以包括处理装置(例如中央处理器、图形处理器等)101，其可以根据存储在只读存储器(ROM)102中的程序或者从存储装置108加载到随机访问存储器(RAM)103中的程序而执行各种适当的动作和处理。在RAM103中，还存储有电子设备100操作所需的各种程序和数据。处理装置101、ROM 102以及RAM103通过总线104彼此相连。输入/输出(I/O)接口105也连接至总线104。

通常，以下装置可以连接至I/O接口105：包括例如触摸屏、触摸板、键盘、鼠标等的输入装置106；包括例如液晶显示器(LCD，Liquid Crystal Display)、扬声器、振动器等的输出装置107；包括例如磁带、硬盘等的存储装置108；以及通信装置109。通信装置109可以允许电子设备100与其他设备进行无线或有线通信以交换数据。虽然图10示出了具有各种装置的电子设备100，但是应理解的是，并不要求实施或具备所有示出的装置。可以替代地实施或具备更多或更少的装置。图10中示出的每个方框可以代表一个装置，也可以根据需要代表多个装置。

特别地，根据本申请的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本申请的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信装置109从网络上被下载和安装，或者从存储装置108被安装，或者从ROM 102被安装。在该计算机程序被处理装置101执行时，执行本申请的实施例的方法中限定的上述功能。

本说明书实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，当所述计算机程序在计算机中执行时，令计算机执行本说明书所提供的所述动效生成方法。

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

上述计算机可读介质可以是上述电子设备中所包含的；也可以是单独存在，而未装配入该电子设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被该服务器执行时，使得该电子设备：响应于确定目标元素在二维触摸移动的结束事件后的惯性移动涉及显示界面的第一弹性边界之外的区域，根据所述第一弹性边界、所述结束事件发生时所述目标元素的运动状态以及假定终点位置，确定发生碰撞回弹的碰撞信息，其中所述假定终点位置是基于所述运动状态仅进行惯性移动的停止位置；根据预设的目标缓动函数以及所述碰撞信息，生成从所述运动状态到发生碰撞回弹的第一动画，以及从发生碰撞回弹到所述目标元素的第一边界与所述第一弹性边界对齐的第二动画。

可以以一种或多种程序设计语言或其组合来编写用于执行本说明书实施例的操作的计算机程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于存储介质和电子设备实施例而言，由于其基本相似于方法实施例，所以描述得比较简单，相关之处参见方法实施例的部分说明即可。

本领域技术人员应该可以意识到，在上述一个或多个示例中，本发明实施例所描述的功能可以用硬件、软件、固件或它们的任意组合来实现。当使用软件实现时，可以将这些功能存储在计算机可读介质中或者作为计算机可读介质上的一个或多个指令或代码进行传输。

以上所述的具体实施方式，对本发明实施例的目的、技术方案和有益效果进行了进一步的详细说明。所应理解的是，以上所述仅为本发明实施例的具体实施方式而已，并不用于限定本发明的保护范围，凡在本发明的技术方案的基础之上所做的任何修改、等同替换、改进等，均应包括在本发明的保护范围之内。

Claims (17)

1.一种动效生成方法，所述方法包括：

响应于确定目标元素在二维触摸移动的结束事件后的惯性移动涉及显示界面的第一弹性边界之外的区域，根据所述第一弹性边界、所述结束事件发生时所述目标元素的运动状态以及假定终点位置，确定发生碰撞回弹的碰撞信息，其中所述假定终点位置是基于所述运动状态仅进行惯性移动的停止位置；所述碰撞信息包括碰撞位置、碰撞时间和与碰撞位置对应的碰撞关键帧；

根据预设的目标缓动函数以及所述碰撞信息，生成从所述运动状态到发生碰撞回弹的第一动画，以及从发生碰撞回弹到所述目标元素的第一边界与所述第一弹性边界对齐的第二动画，其中，所述生成从所述运动状态到发生碰撞回弹的第一动画，以及从发生碰撞回弹到所述目标元素的第一边界与所述第一弹性边界对齐的第二动画，包括：

基于所述碰撞时间及所述目标缓动函数，确定碰撞回弹发生前的第一缓动函数，以及碰撞回弹发生后的第二缓动函数；

基于所述第一缓动函数、所述碰撞时间、所述碰撞关键帧、从当前位置到所述碰撞位置的第一位移，生成所述第一动画，其中，所述第一位移用于限定在所述第一动画从开始到结束，所述目标元素分别在第一轴方向和第二轴方向所移动的距离；

基于所述第二缓动函数、所述碰撞时间、所述碰撞关键帧、从所述碰撞位置到目标位置的第二位移，生成所述第二动画，其中所述目标位置是所述目标元素的第一边界与所述第一弹性边界对齐的位置，所述第二位移用于限定在所述第二动画从开始到结束，所述目标元素分别在第一轴方向和第二轴方向所移动的距离。

2.如权利要求1所述的方法，还包括：

响应于检测到所述结束事件，确定所述目标元素的当前位置和当前速度作为当前的运动状态。

3.如权利要求2所述的方法，其中，确定所述目标元素的当前位置和当前速度作为其运动状态，包括：

获取所述结束事件对应的结束时刻以及该时刻下目标元素的当前位置；

获取在所述二维触摸移动期间按预定时间间隔记录的若干触摸事件中最后一个触摸事件对应的第一时刻和第一位置；

若所述第一时刻与所述结束时刻之间的第一时间差不小于预设时间差，则基于所述结束时刻、当前位置、第一时刻和第一位置，确定所述目标元素的当前速度。

4.如权利要求3所述的方法，其中，确定所述目标元素的当前位置和当前速度作为其运动状态，还包括：

若所述第一时间差小于所述预设时间差，从所述若干触摸事件中获取所述最后一个触摸事件的前一触摸事件对应的第二时刻和第二位置；

基于所述结束时刻、当前位置、第二时刻和第二位置，确定所述当前速度。

5.如权利要求1所述的方法，其中，所述运动状态包括当前位置和当前速度；确定目标元素在二维触摸移动的结束事件后的惯性移动涉及显示界面的第一弹性边界之外的区域，包括：

若所述当前位置位于所述第一弹性边界之外，确定所述惯性移动涉及所述第一弹性边界之外的区域；或者，

若所述当前位置位于所述第一弹性边界之内，且根据所述当前速度确定需要进行所述惯性移动，则确定所述假定终点位置，并在所述假定终点位置位于所述第一弹性边界之外的情况下，确定所述惯性移动涉及所述第一弹性边界之外的区域。

6.如权利要求5所述的方法，其中，根据所述当前速度确定需要进行所述惯性移动，包括：若所述当前速度超过预设速度阈值，确定需要进行惯性移动。

7.如权利要求1或5所述的方法，其中，所述假定终点位置基于所述第一弹性边界、所述运动状态、预设的减加速度以及预设的越界阻尼系数而确定。

8.如权利要求1所述的方法，其中，确定发生碰撞回弹的碰撞信息，包括：

根据所述第一弹性边界、所述运动状态中的当前位置以及所述假定终点位置，确定发生碰撞回弹的碰撞位置；

基于所述碰撞位置，确定碰撞时间和碰撞关键帧，以确定所述碰撞信息。

9.如权利要求8所述的方法，其中，根据所述第一弹性边界、所述运动状态以及所述假定终点位置，确定发生碰撞回弹的碰撞位置，包括：

确定初始碰撞位置，以使得在所述第一弹性边界对应的第一轴方向上，所述第一弹性边界到所述初始碰撞位置的第一距离，等于所述初始碰撞位置与所述假定终点位置的第二距离；

若所述第二距离位于第一距离阈值和第二距离阈值之间，则将所述初始碰撞位置作为所述碰撞位置；

若所述第二距离大于所述第二距离阈值，基于所述第二距离阈值、所述运动状态，确定所述碰撞位置；

若所述第二距离小于所述第一距离阈值，基于所述当前位置和所述假定终点位置，确定所述碰撞位置。

10.如权利要求8所述的方法，其中，基于所述碰撞位置确定碰撞时间和碰撞关键帧，以确定所述碰撞信息，包括：

基于所述碰撞位置，确定所述碰撞关键帧；

基于第一位移和所述目标缓动函数对应的缓动函数方程，确定所述碰撞时间；其中，所述第一位移是从所述当前位置到所述碰撞位置的位移。

11.如权利要求1所述的方法，其中，所述碰撞信息还包括所述结束事件发生时的开始关键帧以及达到所述目标位置时的结束关键帧；

生成所述第一动画，包括：基于所述第一缓动函数、所述碰撞时间、所述开始关键帧、所述碰撞关键帧、所述第一位移在第一轴方向和第二轴方向各自的分量，生成所述第一动画，所述第一轴方向和第二轴方向互相垂直；

生成所述第二动画，包括：根据运动总时间和所述碰撞时间，确定反弹时间，其中运动总时间是目标元素基于所述运动状态惯性移动到所述假定终点位置的时间；基于所述第二缓动函数、所述反弹时间、所述碰撞关键帧、所述结束关键帧、所述第二位移在第一轴方向和第二轴方向各自的分量，生成所述第二动画。

12.如权利要求1所述的方法，其中，所述目标元素是web页面中的可交互元素，所述显示界面是web页面。

13.如权利要求12所述的方法，还包括：

在web页面上依次展示所述第一动画和所述第二动画。

14.如权利要求13所述的方法，还包括：

在所述web页面上依次展示所述第一动画和所述第二动画的过程中，若检测到新的触摸事件生成，中断动画，并在中断动画的下一帧，显示所述第二动画的最后一帧。

15.一种动效生成装置，所述装置包括：

第一确定模块，配置为响应于确定目标元素在二维触摸移动的结束事件后的惯性移动会越过显示界面的第一轴对应的第一弹性边界，根据所述第一弹性边界、所述结束事件发生时所述目标元素的运动状态以及假定终点位置，确定发生碰撞回弹的碰撞信息，其中所述假定终点位置是基于所述运动状态仅进行惯性移动的停止位置；所述碰撞信息包括碰撞位置、碰撞时间和与碰撞位置对应的碰撞关键帧；

第一生成模块，配置为根据预设的目标缓动函数以及所述碰撞信息，生成从所述运动状态到发生碰撞回弹的第一动画，以及从发生碰撞回弹到所述目标元素的第一边界与所述第一弹性边界对齐的第二动画，其中，所述第一生成模块，包括：

第三确定单元，配置为基于所述碰撞时间及所述目标缓动函数，确定碰撞回弹发生前的第一缓动函数，以及碰撞回弹发生后的第二缓动函数；

第一生成单元，配置为基于所述第一缓动函数、所述碰撞时间、所述碰撞关键帧、从当前位置到所述碰撞位置的第一位移，生成所述第一动画，其中，所述第一位移用于限定在所述第一动画从开始到结束，所述目标元素分别在第一轴方向和第二轴方向所移动的距离；

第二生成单元，配置为基于所述第二缓动函数、所述碰撞时间、所述碰撞关键帧、从所述碰撞位置到目标位置的第二位移，生成所述第二动画，其中所述目标位置是所述目标元素的第一边界与所述第一弹性边界对齐的位置，所述第二位移用于限定在所述第二动画从开始到结束，所述目标元素分别在第一轴方向和第二轴方向所移动的距离。

16.一种计算机可读存储介质，其上存储有计算机程序，当所述计算机程序在计算机中执行时，令计算机执行权利要求1-14中任一项所述的方法。

17.一种计算设备，包括存储器和处理器，其中，所述存储器中存储有可执行代码，所述处理器执行所述可执行代码时，实现权利要求1-14中任一项所述的方法。