CN114428923A - 弹窗效果的呈现方法、装置、电子设备及存储介质 - Google Patents

Abstract

本申请提供一种弹窗效果的呈现方法、装置、电子设备及存储介质，对于待显示弹窗的每个关键帧，根据欠阻尼振动系统模型，确定关键帧在目标页面中的显示位置，根据显示位置逐帧显示关键帧，使得每个关键帧按照欠阻尼振动规律呈现于网页的不同位置，最终将待显示弹窗呈现为欠阻尼振动效果，且效果流畅，不会出现卡顿问题。

Description

弹窗效果的呈现方法、装置、电子设备及存储介质

技术领域

本申请涉及页面处理技术领域，尤其涉及一种弹窗效果的呈现方法、装置、电子设备及存储介质。

背景技术

随着网络技术的发展，网页已成为人们获取信息的重要途经。网页不仅可以呈现文字、图片等静态内容，还可以呈现弹窗、动画等动态内容，各类内容的呈现效果能够给用户带来不同的体验。一般呈现的弹窗为静态效果，利用一些编程工具实现弹窗的动画效果，可能出现卡顿问题。

发明内容

有鉴于此，本申请的目的在于提出一种弹窗效果的呈现方法、装置、电子设备及存储介质。

基于上述目的，本申请提供了一种弹窗效果的呈现方法，包括：

确定目标页面中待显示弹窗的每个关键帧；

对于每一所述关键帧，根据预定的欠阻尼振动系统模型，确定该关键帧在所述目标页面中的显示位置；

根据所述显示位置逐帧显示所述关键帧，以使所述待显示弹窗显示欠阻尼振动效果。

可选的，所述欠阻尼振动系统模型包括振动时刻与振动幅度的函数关系；

所述根据预定的欠阻尼振动系统模型，确定该关键帧在所述目标页面中的显示位置，包括：

确定该关键帧在全部所述关键帧中的时序位置；

根据所述时序位置，确定该关键帧的振动时刻；

根据所述振动时刻，通过所述函数关系，确定该关键帧对应的振动幅度；

根据所述对应的振动幅度，确定该关键帧的显示位置。

可选的，根据所述时序位置，确定该关键帧的振动时刻，包括：

根据所述时序位置和预设的振动总时间，确定该关键帧的振动时刻。

可选的，确定该关键帧在全部所述关键帧中的时序位置，包括：

确定该关键帧在全部所述关键帧中的序号；其中，全部所述关键帧按序排列，每个所述关键帧分配相应的序号；

计算所述该关键帧的序号与最后一个关键帧的序号的比值，将所述比值作为所述时序位置。

可选的，根据所述对应的振动幅度，确定该关键帧的显示位置，包括：

根据所述振动幅度和预设的最大振幅，确定振幅占比；

根据所述振幅占比和该关键帧在所述目标页面内所占的区域，确定所述显示位置。

可选的，所述确定目标页面中待显示弹窗的每个关键帧之前，还包括：

获取振动参数；其中，所述振动参数包括振动总时间、最大振幅、阻尼比和固有频率中的一种或几种；

根据所述振动参数，确定所述函数关系。

可选的，所述获取振动参数，包括：

根据所述目标页面的页面参数，确定所述振动参数。

可选的，所述获取振动参数，包括：

根据所述待显示弹窗的展示内容，确定所述振动参数。

基于同一构思，本申请还提供一种弹窗效果的呈现装置，包括：

帧确定模块，用于确定目标页面中待显示弹窗的每个关键帧；

位置确定模块，用于对于每一所述关键帧，根据预定的欠阻尼振动系统模型，确定该关键帧在所述目标页面中的显示位置；

显示模块，用于根据所述显示位置逐帧显示所述关键帧，以使所述待显示弹窗显示欠阻尼振动效果。

基于同一构思，本申请还提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现如上所述任意一项所述的方法。

基于同一构思，本申请还提供一种非暂态计算机可读存储介质，所述非暂态计算机可读存储介质存储计算机指令，所述计算机指令用于使计算机执行如上所述任意一项所述的方法。

从上面所述可以看出，本申请提供的弹窗效果的呈现方法、装置、电子设备及存储介质，对于待显示弹窗的每个关键帧，根据欠阻尼振动系统模型，确定关键帧在目标页面中的显示位置，根据显示位置逐帧显示关键帧，使得每个关键帧按照欠阻尼振动规律呈现于网页的不同位置，最终将待显示弹窗呈现为欠阻尼振动效果，且效果流畅，不会出现卡顿问题。

附图说明

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

图1为本申请实施例的应用场景示意图；

图2为本申请实施例的方法流程示意图；

图3为本申请实施例的确定显示位置的方法流程示意图；

图4为本申请实施例的显示效果示意图；

图5为本申请实施例的装置结构示意图；

图6为本申请实施例的电子设备结构示意图。

具体实施方式

下面将参考若干示例性实施方式来描述本申请的原理和精神。应当理解，给出这些实施方式仅仅是为了使本领域技术人员能够更好地理解进而实现本申请，而并非以任何方式限制本申请的范围。相反，提供这些实施方式是为了使本申请更加透彻和完整，并且能够将本申请的范围完整地传达给本领域的技术人员。

根据本申请的实施方式，提出了一种弹窗效果的呈现方法、装置、电子设备及存储介质。

在本文中，需要理解的是，附图中的任何元素数量均用于示例而非限制，以及任何命名都仅用于区分，而不具有任何限制含义。

下面参考本申请的若干代表性实施方式，详细阐释本申请的原理和精神。

相关技术中，弹窗可以是打开网页、软件、应用程序等时自动弹出的窗口，窗口的形状、展示内容，以及窗口的形式、功能等可以根据所使用的场景和需求进行配置，具体形式不做限定。一般所呈现的弹窗为位置不变的静态效果，例如，当进入某个网页时，于网页右下角弹出一个具有广告内容的弹窗；当点击进入某个店铺页面时，从店铺页面下方弹窗一个具有商品内容的弹窗；当点击提交订单进入订单页面时，从订单页面下方弹窗一个具有订单政策的弹窗等等。静态效果的弹窗弹出时稍显突兀，一般仅在弹窗的形状上进行设计以显不同。利用一些编程工具能够实现弹窗的动画效果，例如，利用JavaScript能够实现动画效果，然而，由于JavaScript支持单线程，且无法根据使用机型进行适配，导致在一些低端机型上容易出现动画卡顿，影响展示效果。

为解决上述问题，本申请提供一种弹窗效果的呈现方法，依据欠阻尼振动系统模型，确定弹窗的每个关键帧的显示位置，使得弹窗能够呈现出欠阻尼振动效果，提升用户体验；且，动画效果利用层叠样式表(Cascading Style Sheets，CSS)的合成器线程实现，不会出现卡顿问题。

参考图1，其为本申请实施例提供的弹窗效果的呈现方法的应用场景示意图。该应用场景中，用户可在终端101上进行相关操作，例如，网页浏览、信息查询、人机交互等等。当用户从网页102上点击某个店铺进入店铺页面时，会有该店铺的弹窗103弹出，该弹窗103的展示内容例如是店铺推出的新品、分发的优惠券、最近进行的优惠活动、店铺公告等等。弹窗103一经弹出位置不会发生变化，直至用户点击了关闭将弹窗103关闭。一些用户已经习惯了此类弹窗的表现形式，往往对弹窗的展示内容不再敏感。将弹窗设计成位置可变的动画效果，能够给用户带来新颖的体验。

下面结合图1的应用场景，来描述根据本申请示例性实施方式的弹窗效果的呈现方法。需要注意的是，上述应用场景仅是为了便于理解本申请的精神和原理而示出，本申请的实施方式在此方面不受任何限制。相反，本申请的实施方式可以应用于适用的任何场景。

首先，如图2所示，本申请实施例提供了一种弹窗效果的呈现方法，包括：

S201：确定目标页面中待显示弹窗的每个关键帧；

本实施例中，首先确定待显示弹窗的多个关键帧，利用每个关键帧展示待显示弹窗所处的显示位置，由所有关键帧的显示位置呈现具有动画效果的弹窗。

S202：对于每一关键帧，根据预定的欠阻尼振动系统模型，确定该关键帧在目标页面中的显示位置；

S203：根据显示位置逐帧显示关键帧，以使待显示弹窗显示欠阻尼振动效果。

本实施例中，在确定待显示弹窗的多个关键帧之后，进一步确定每个关键帧在目标页面中的显示位置。为使待显示弹窗呈现欠阻尼振动的动画效果，每个关键帧的显示位置依据欠阻尼振动系统模型中振子位置随时间变化而变化的规律而确定。在确定了待显示弹窗的每个关键帧的显示位置之后，按照每个关键帧的显示位置，逐帧显示出呈现欠阻尼振动效果的弹窗。

一些实施方式中，利用CSS实现本实施例提供的弹窗效果的呈现方法，CSS包括主线程和合成器线程，利用主线程实现输入、操作以及画面排版等处理，利用合成器线程实现画面加载、显示至屏幕等处理，从而实现弹窗的欠阻尼振动效果。相较于单线程的处理方式，CSS实现的动画效果更为流畅，不会出现卡顿；而且，对于性能不高的低端机型或者帧速不高的低版本浏览器，CSS可以通过自然降级保持良好的动画效果。这样，利用CSS实现弹窗效果的呈现方法，能够呈现动画效果的弹窗，且不会出现卡顿，提升用户体验。

对于欠阻尼振动系统模型，根据弹簧振子在欠阻尼情况下的受力分析，结合牛顿第二定律，可以得到有关时间和振子位置的微分方程为：

其中，x为振子位置，t为时间，k是弹性系数，m是物体质量，c是阻尼系数。

解算微分方程(1)，得到：

其中，ζ为阻尼比，0<ζ<1；ω_n为共振系统的固有频率；A为最大振幅；

为偏移角度。

上式中，考虑到应用场景为实现弹窗的欠阻尼振动效果，而非实际物体的振动分析，可将物体质量m取值为1。

在一种实施方式中，设偏移角度

弹性系数k＝1，得到欠阻尼振动系统模型的振动时刻与振动幅度的函数关系为：

如图3所示，基于公式(6)所示欠阻尼振动系统模型，确定关键帧在目标页面中的显示位置，包括：

S301：确定该关键帧在全部关键帧中的时序位置；

S302：根据时序位置，确定该关键帧的振动时刻；

S303：根据该振动时刻，通过函数关系，确定该关键帧对应的振动幅度；

S304：根据对应的振动幅度，确定该关键帧的显示位置。

本实施例中，在确定了弹窗的关键帧和实现弹窗动画效果的欠阻尼振动系统模型之后，基于该模型确定弹窗的每个关键帧的显示位置。所利用的基本原理是，弹窗的每一关键帧具有播放的时序位置和显示位置的属性，模型表示为振子的振动时刻和振动幅度的关系；因而，可将关键帧的时序位置映射为模型中的振动时刻，以此确定模型中对应的振动幅度，再将模型中的振动幅度映射为关键帧的显示位置，从而将动画效果呈现为物理模型的运动规律。

具体的，对于每个关键帧，先确定该关键帧在弹窗的全部关键帧中的时序位置，然后根据时序位置，确定其对应在模型中的振动时刻，将确定的振动时刻作为已知数，代入模型的函数关系中，得到对应于该振动时刻的振动幅度，再根据该振动幅度确定出关键帧的显示位置，从而完成关键帧的时序位置到模型的振动时刻、依据模型的振动时刻确定对应的振动幅度、模型的振动幅度到关键帧的显示位置的对应转换过程，使得一个关键帧的显示位置对应于模型中振子的特定振动位置，全部关键帧的显示位置按照模型中振子的振动规律进行变化。

一些实施例中，根据时序位置，确定该关键帧的振动时刻，包括：

根据时序位置和预设的振动总时间，确定该关键帧的振动时刻。

本实施例中，可以配置欠阻尼振动系统模型的振动总时间，模型在振动总时间内按照欠阻尼振动规律振动。在确定关键帧的振动时刻时，根据该关键帧在全部关键帧中的时序位置和振动总时间，确定该关键帧对应于模型中的振动时刻。

一些实施例中，确定该关键帧在全部关键帧中的时序位置，包括：

确定该关键帧在全部关键帧中的序号；其中，全部关键帧按序排列，每个关键帧分配相应的序号；

计算该关键帧的序号与最后一个关键帧的序号的比值，将该比值作为时序位置。

本实施例中，具有动画效果的弹窗具有按时间和显示顺序排列的多个关键帧，全部关键帧按照时间和显示顺序排列，且每个关键帧按顺序编号，每个关键帧分配对应的序号，关键帧的序号能够体现其播放时序，在确定关键帧的时序位置，计算该关键帧的序号与最后一个关键帧的序号的比值，将该比值作为该关键帧的时序位置。

一些实施例中，根据对应的振动幅度，确定该关键帧的显示位置，包括：

根据振动幅度和预设的最大振幅，确定振幅占比；

根据振幅占比和该关键帧在目标页面内所占的区域，确定显示位置。

本实施例中，可以配置欠阻尼振动系统模型的最大振幅。根据函数关系确定了关键帧在模型中对应的振动幅度后，根据该振动幅度，确定该关键帧的显示位置。具体的，根据振动幅度和配置的最大振幅，确定振幅占比，再根据弹窗在目标页面中的区域和该振幅占比，确定弹窗的显示位置。

一些方式中，弹窗在目标页面中的区域为弹窗在页面中的显示区域，且该显示区域具有一定的宽度范围和高度范围。例如，弹窗的显示区域在页面的右下方；或者，弹窗由下方向上方滑出，并显示于页面下方一定区域；或者，弹窗的显示区域在页面中心等，弹窗的显示区域不做具体限定。可选的，显示区域的宽度范围和高度范围均可通过像素范围确定。

一些实施例中，确定目标页面中待显示弹窗的每个关键帧之前，还包括：

获取振动参数；其中，振动参数包括振动总时间、最大振幅、阻尼比和固有频率中的一种或几种；

根据振动参数，确定函数关系。

本实施例中，可通过配置不同的振动参数达到不同的振动效果。根据上述欠阻尼振动系统模型的相关说明，模型的函数关系包括最大振幅A、阻尼比ζ、固有频率ω_n等，其中，最大振幅为欠阻尼振动所能达到的最大幅度；阻尼比用以衡量阻碍振动的阻尼力的大小，不同的阻尼比，振动速度不同；固有频率与物体质量、弹性系数有关，不同的固有频率，振动频率不同。通过配置一种或几种振动参数，可以使得模型达到不同的振动规律，相适应的，弹窗呈现不同的欠阻尼振动效果。

一些实施例中，获取振动参数，包括：根据目标页面的页面参数，确定振动参数。本示例中，振动参数可以根据弹窗所展示的目标页面进行自适应调整。例如，根据目标页面的大小、页面元素的布局等，对振动参数进行调整，使得展示的振动效果与目标页面相协调。

另一些实施例中，获取振动参数，包括：根据待显示弹窗的展示内容，确定振动参数。本示例中，考虑到弹窗可以应用于不同的场景，不同场景下的展示内容不同，可以根据弹窗的展示内容，调整振动参数。例如，展示新品的弹窗、展示店铺活动的弹窗、展示订单政策的弹窗、展示用户须知的弹窗等等可分别设置不同的振动参数，用户可通过弹窗的振动效果初步判断弹窗的展示内容的重要程度，进一步对弹窗进行相关操作。

一些方式中，对于振动参数的获取方式，可以是用户在页面中对于不同应用场景下的弹窗进行参数设置，也可以是预先设置不同弹窗的参数，还可以是从服务器获取弹窗及其参数等，振动参数的获取方式不做具体限定。另外，弹窗进行欠阻尼振动的时间和弹窗的展示时间等均可根据动画效果进行设置，具体的时间设定不做限定。

在一种具体的实施方式中，于弹窗处理主函数中，设置关键帧的总数，对于每个关键帧，调用关键帧处理函数进行处理，确定当前处理的关键帧的显示位置，弹窗处理主函数调用显示函数于该显示位置显示当前处理的关键帧。在关键帧处理函数中，设置振动总时间，计算当前处理的关键帧的序号与最后一个关键帧的序号的比值；计算该比值与振动总时间的乘积，该乘积为当前处理的关键帧的振动时刻；将该振动时刻作为已知数，输入欠阻尼振动模型的函数关系中，得到对应于该振动时刻的振动幅度；计算设置的最大振幅减去该振动幅度，将二者的差值除以最大振幅，得到振幅占比；根据振幅占比和该关键帧在目标页面内所占的区域，利用插值函数确定当前处理的关键帧的显示位置。

结合图4所示，在该实施方式中，实现了一种在移动终端401上，由下方向上方弹出的弹窗402的欠阻尼振动效果。作为示例性的，阻尼比设置为0.2，最大振幅设置为1，弹性系数设置为1，物体质量设置为1，模型的振动总时间设置为25秒，弹窗的高度范围为0-100的像素范围。弹窗的关键帧共有100帧，100个关键帧按序分配序号1-100。对于第i个关键帧，首先计算其在100个关键帧中的时序位置，然后根据时序位置和振动总时间，计算振动时刻，将振动时刻代入模型的函数关系中，计算该振动时刻对应的振动幅度，根据振动幅度和最大振幅计算振幅占比，然后根据振幅占比和弹窗在页面的显示区域，确定出第i个关键帧在页面上的显示位置。例如，计算出的振幅占比为0.9，利用插值函数interpolation计算出的显示位置为高度为90的像素位置。这样，100个关键帧按照欠阻尼振动系统模型在不同的显示位置403、404显示，呈现欠阻尼振动效果，最后，将弹窗停留在第100个关键帧的显示位置。

本实施例提供的弹窗效果的呈现方法，能够展示具有欠阻尼振动效果的弹窗，实现弹窗的动画效果，提升用户体验；基于CSS实现弹窗的动画效果，能够保证动画效果流畅，并适配不同的机型和浏览器；提供灵活的参数配置功能，能够实现不同的振动效果，丰富展示效果，提高用户体验。

需要说明的是，本申请实施例的方法可以由单个设备执行，例如一台计算机或服务器等。本实施例的方法也可以应用于分布式场景下，由多台设备相互配合来完成。在这种分布式场景的情况下，这多台设备中的一台设备可以只执行本申请实施例的方法中的某一个或多个步骤，这多台设备相互之间会进行交互以完成所述的方法。

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

基于同一发明构思，与上述任意实施例方法相对应的，本申请还提供了一种弹窗效果的呈现装置。

参考图5，所述弹窗效果的呈现装置，包括：

帧确定模块501，用于确定目标页面中待显示弹窗的每个关键帧；

位置确定模块502，用于对于每一所述关键帧，根据预定的欠阻尼振动系统模型，确定该关键帧在目标页面中的显示位置；

显示模块503，用于根据所述显示位置逐帧显示所述关键帧，以使待显示弹窗显示欠阻尼振动效果。

为了描述的方便，描述以上装置时以功能分为各种模块分别描述。当然，在实施本申请时可以把各模块的功能在同一个或多个软件和/或硬件中实现。

上述实施例的装置用于实现前述任一实施例中相应的弹窗效果的呈现方法，并且具有相应的方法实施例的有益效果，在此不再赘述。

基于同一发明构思，与上述任意实施例方法相对应的，本申请还提供了一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上任意一实施例所述的弹窗效果的呈现方法。

图6示出了本实施例所提供的一种更为具体的电子设备硬件结构示意图，该设备可以包括：处理器1010、存储器1020、输入/输出接口1030、通信接口1040和总线1050。其中处理器1010、存储器1020、输入/输出接口1030和通信接口1040通过总线1050实现彼此之间在设备内部的通信连接。

处理器1010可以采用通用的CPU(Central Processing Unit，中央处理器)、微处理器、应用专用集成电路(Application Specific Integrated Circuit，ASIC)、或者一个或多个集成电路等方式实现，用于执行相关程序，以实现本说明书实施例所提供的技术方案。

存储器1020可以采用ROM(Read Only Memory，只读存储器)、RAM(Random AccessMemory，随机存取存储器)、静态存储设备，动态存储设备等形式实现。存储器1020可以存储操作系统和其他应用程序，在通过软件或者固件来实现本说明书实施例所提供的技术方案时，相关的程序代码保存在存储器1020中，并由处理器1010来调用执行。

输入/输出接口1030用于连接输入/输出模块，以实现信息输入及输出。输入输出/模块可以作为组件配置在设备中(图中未示出)，也可以外接于设备以提供相应功能。其中输入设备可以包括键盘、鼠标、触摸屏、麦克风、各类传感器等，输出设备可以包括显示器、扬声器、振动器、指示灯等。

通信接口1040用于连接通信模块(图中未示出)，以实现本设备与其他设备的通信交互。其中通信模块可以通过有线方式(例如USB、网线等)实现通信，也可以通过无线方式(例如移动网络、WIFI、蓝牙等)实现通信。

总线1050包括一通路，在设备的各个组件(例如处理器1010、存储器1020、输入/输出接口1030和通信接口1040)之间传输信息。

需要说明的是，尽管上述设备仅示出了处理器1010、存储器1020、输入/输出接口1030、通信接口1040以及总线1050，但是在具体实施过程中，该设备还可以包括实现正常运行所必需的其他组件。此外，本领域的技术人员可以理解的是，上述设备中也可以仅包含实现本说明书实施例方案所必需的组件，而不必包含图中所示的全部组件。

上述实施例的电子设备用于实现前述任一实施例中相应的弹窗效果的呈现方法，并且具有相应的方法实施例的有益效果，在此不再赘述。

基于同一发明构思，与上述任意实施例方法相对应的，本申请还提供了一种非暂态计算机可读存储介质，所述非暂态计算机可读存储介质存储计算机指令，所述计算机指令用于使所述计算机执行如上任一实施例所述的弹窗效果的呈现方法。

本实施例的计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。

上述实施例的存储介质存储的计算机指令用于使所述计算机执行如上任一实施例所述的弹窗效果的呈现方法，并且具有相应的方法实施例的有益效果，在此不再赘述。

需要说明的是，除非另外定义，本申请实施例使用的技术术语或者科学术语应当为本申请所属领域内具有一般技能的人士所理解的通常意义。本申请实施例中使用的“第一”、“第二”以及类似的词语并不表示任何顺序、数量或者重要性，而只是用来区分不同的组成部分。“包括”或者“包含”等类似的词语意指出现该词前面的元件或者物件涵盖出现在该词后面列举的元件或者物件及其等同，而不排除其他元件或者物件。“连接”或者“相连”等类似的词语并非限定于物理的或者机械的连接，而是可以包括电性的连接，不管是直接的还是间接的。元素前的冠词“一”或“一个”不排除多个这种元素的存在。

虽然已经参考若干具体实施方式描述了本申请的精神和原理，但是应该理解，本申请并不限于所公开的具体实施方式，对各方面的划分也不意味着这些方面中的特征不能组合以进行受益，这种划分仅是为了表述的方便。本申请旨在涵盖所附权利要求的精神和范围内所包括的各种修改和等同布置。所附权利要求的范围符合最宽泛的解释，从而包含所有这样的修改及等同结构和功能。

Claims (11)

1.弹窗效果的呈现方法，其特征在于，包括：

确定目标页面中待显示弹窗的每个关键帧；

对于每一所述关键帧，根据预定的欠阻尼振动系统模型，确定该关键帧在所述目标页面中的显示位置；

根据所述显示位置逐帧显示所述关键帧，以使所述待显示弹窗显示欠阻尼振动效果。

2.根据权利要求1所述的方法，其特征在于，所述欠阻尼振动系统模型包括振动时刻与振动幅度的函数关系；

所述根据预定的欠阻尼振动系统模型，确定该关键帧在所述目标页面中的显示位置，包括：

确定该关键帧在全部所述关键帧中的时序位置；

根据所述时序位置，确定该关键帧的振动时刻；

根据所述振动时刻，通过所述函数关系，确定该关键帧对应的振动幅度；

根据所述对应的振动幅度，确定该关键帧的显示位置。

3.根据权利要求2所述的方法，其特征在于，根据所述时序位置，确定该关键帧的振动时刻，包括：

根据所述时序位置和预设的振动总时间，确定该关键帧的振动时刻。

4.根据权利要求2所述的方法，其特征在于，确定该关键帧在全部所述关键帧中的时序位置，包括：

确定该关键帧在全部所述关键帧中的序号；其中，全部所述关键帧按序排列，每个所述关键帧分配相应的序号；

计算所述该关键帧的序号与最后一个关键帧的序号的比值，将所述比值作为所述时序位置。

5.根据权利要求2-4中任意一项所述的方法，其特征在于，根据所述对应的振动幅度，确定该关键帧的显示位置，包括：

根据所述振动幅度和预设的最大振幅，确定振幅占比；

根据所述振幅占比和该关键帧在所述目标页面内所占的区域，确定所述显示位置。

6.根据权利要求5所述的方法，其特征在于，所述确定目标页面中待显示弹窗的每个关键帧之前，还包括：

获取振动参数；其中，所述振动参数包括振动总时间、最大振幅、阻尼比和固有频率中的一种或几种；

根据所述振动参数，确定所述函数关系。

7.根据权利要求6所述的方法，其特征在于，所述获取振动参数，包括：

根据所述目标页面的页面参数，确定所述振动参数。

8.根据权利要求6所述的方法，其特征在于，所述获取振动参数，包括：

根据所述待显示弹窗的展示内容，确定所述振动参数。

9.弹窗效果的呈现装置，其特征在于，包括：

帧确定模块，用于确定目标页面中待显示弹窗的每个关键帧；

位置确定模块，用于对于每一所述关键帧，根据预定的欠阻尼振动系统模型，确定该关键帧在所述目标页面中的显示位置；

显示模块，用于根据所述显示位置逐帧显示所述关键帧，以使所述待显示弹窗显示欠阻尼振动效果。

10.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如权利要求1至8任意一项所述的方法。

11.一种非暂态计算机可读存储介质，所述非暂态计算机可读存储介质存储计算机指令，其特征在于，所述计算机指令用于使计算机执行如权利要求1至8任意一项所述的方法。

Images