交互动画展示方法及装置与流程

1.本技术涉及计算机技术领域，特别涉及一种交互动画展示方法。本技术同时涉及一种交互动画展示装置，一种计算设备，以及一种计算机可读存储介质。


背景技术：

2.随着计算机技术的不断发展，各种各样的动画层出不穷。在动画领域，可交互动画非常流行。可交互动画可以根据用户不同的输入展示不同的动画效果，给用户一种耳目一新的感觉，会极大的提高用户对展示可交互动画的浏览器或者应用的观看兴趣。
3.然而，常用的展示可交互动画的方法，存在图片文件过大、网络传输效率低等性能问题。因此，亟需一种有效的方案以解决上述问题。


技术实现要素：

4.有鉴于此，本技术实施例提供了一种交互动画展示方法。本技术同时涉及一种交互动画展示装置，一种计算设备，以及一种计算机可读存储介质，以解决现有技术中存在的图片文件过大、网络传输效率低的技术缺陷。
5.根据本技术实施例的第一方面，提供了一种交互动画展示方法，包括：
6.接收交互动画标识，获取与所述交互动画标识对应的视频文件；
7.根据预设的获取频率获取所述视频文件中的帧图像，并将所述帧图像进行本地存储；
8.接收交互动画展示请求，根据所述交互动画展示请求确定待展示的帧图像标识；
9.从所述本地存储中获取与所述帧图像标识对应的目标帧图像，在交互动画展示界面展示所述目标帧图像。
10.根据本技术实施例的第二方面，提供了一种交互动画展示装置，包括：
11.接收模块，被配置为接收交互动画标识，获取与所述交互动画标识对应的视频文件；
12.存储模块，被配置为根据预设的获取频率获取所述视频文件中的帧图像，并将所述帧图像进行本地存储；
13.确定模块，被配置为接收交互动画展示请求，根据所述交互动画展示请求确定待展示的帧图像标识；
14.展示模块，被配置为从所述本地存储中获取与所述帧图像标识对应的目标帧图像，在交互动画展示界面展示所述目标帧图像。
15.根据本技术实施例的第三方面，提供了一种计算设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机指令，所述处理器执行所述计算机指令时实现所述交互动画展示方法的步骤。
16.根据本技术实施例的第四方面，提供了一种计算机可读存储介质，其存储有计算机指令，该计算机指令被处理器执行时实现所述交互动画展示方法的步骤。
17.本技术提供的交互动画展示方法，接收交互动画标识，获取与所述交互动画标识对应的视频文件；根据预设的获取频率获取所述视频文件中的帧图像，并将所述帧图像进行本地存储；接收交互动画展示请求，根据所述交互动画展示请求确定待展示的帧图像标识；从所述本地存储中获取与所述帧图像标识对应的目标帧图像，在交互动画展示界面展示所述目标帧图像。通过根据交互动画标识获取视频文件，保证了获取的视频的准确性，进一步保证了交互动画的准确性；通过预设的获取频率获取视频文件中的帧图像并进行本地存储，避免了视频文件过大导致获取的帧图像过多，一定程度上提高了网络传输效率。此外，本技术通过帧图像标识获取对应的帧图像，可以实现帧图像的逐帧倒放或者随机帧播放，在保证可交互动画的效果体验和支持更高帧数的动画效果的同时，降低了对浏览器版本和计算机的性能、或者应用程序的版本以及计算机的性能的要求。
附图说明
18.图1是本技术一实施例提供的一种交互动画展示方法的流程图；
19.图2a是本技术一实施例提供的一种交互动画展示界面的示意图；
20.图2b是本技术一实施例提供的一种交互动画展示效果的示意图；
21.图2c是本技术一实施例提供的一种封面动画展示效果的示意图；
22.图2d是本技术一实施例提供的一种预设帧图像展示效果的示意图；
23.图2e是本技术一实施例提供的一种应用于浏览器的交互动画展示方法的处理流程图；
24.图3是本技术一实施例提供的一种交互动画展示装置的结构示意图；
25.图4是本技术一实施例提供的一种计算设备的结构框图。
具体实施方式
26.在下面的描述中阐述了很多具体细节以便于充分理解本技术。但是本技术能够以很多不同于在此描述的其它方式来实施，本领域技术人员可以在不违背本技术内涵的情况下做类似推广，因此本技术不受下面公开的具体实施的限制。
27.在本技术一个或多个实施例中使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本技术一个或多个实施例。在本技术一个或多个实施例和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义。还应当理解，本技术一个或多个实施例中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。
28.应当理解，尽管在本技术一个或多个实施例中可能采用术语第一、第二等来描述各种信息，但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如，在不脱离本技术一个或多个实施例范围的情况下，第一也可以被称为第二，类似地，第二也可以被称为第一。取决于语境，如在此所使用的词语“如果”可以被解释成为“在
……
时”或“当
……
时”或“响应于确定”。
29.首先，对本技术一个或多个实施例涉及的名词术语进行解释。
30.可交互动画：是指电子设备屏幕显示的内容支持事件响应和交互功能的一种动画效果，即电子设备屏幕显示的内容根据用户的输入实时变化的动画效果。也就是说，电子设
备屏幕显示的内容可以接受某种控制，这种控制可以是可交互动画播放者的某种操作，也可以是在可交互动画制作时预先准备的操作。
31.视频封面预览：例如视频网站首页上将鼠标置于视频卡片封面时，可以快速预览视频内容的效果。
32.css animations是css(层叠样式表)的一个模块，它定义了如何用关键帧来随时间推移对css属性的值进行动画处理。关键帧动画的行为可以通过指定它们的持续时间，它们的重复次数以及它们如何重复来控制。
33.canvas(画布)，在新的html标准html5中canvas元素用于在网页上绘制图形，该元素标签强大之处在于可以直接在html上进行图形操作，具有极大的应用价值。用javascript脚本在该元素上绘制任意图形(2d或者3d)。canvas元素有两个属性“width”和“height”，用来设置画布的宽度和高度。
34.webgl技术是一种3d绘图协议，这种绘图技术标准允许把javascript(一种具有函数优先的轻量级、解释型或即时编译型的编程语言)和opengl es 2.0结合在一起，通过增加opengl es 2.0的一个javascript绑定，webgl可以为html5 canvas提供硬件3d加速渲染。
35.视频编码格式：常用的视频编码格式为了节约数据，通常会使用关键帧来存储图像数据，在一个关键帧到下一个关键帧之间的画面只保存更改信息，即只存储一个关键帧与下一个关键帧之间不同画面区域的图像数据，而不是存储下一个关键帧的全部图像数据。在播放时需要先解码读取上一个关键帧，然后再解码处理得到当前帧数据。
36.接下来，对本说明书提供的弹幕处理方法的基本构思进行简述。
37.现有技术中，常用的实现可交互动画效果的方法有两种：一是通常使用css animation(层叠样式表)、canvas2d(二维画布)或者webgl(绘图协议)技术实现；二是利用视频封面预览效果的技术来实现，也即在服务端读取多个帧图像，并将读取的多个帧图像拼接成一张大图，在用户通过鼠标等设备指向大图时，终端根据鼠标位置在大图中的位置确定鼠标位置对应的目标帧图像，从而展示大图中的目标帧图像。
38.然而第一种方法是基于视频编码格式实现的，基于视频编码格式需要先解码读取上一个关键帧，然后再解码处理得到当前帧数据，在倒放或随机帧播放时，无法预先读取帧数据，需要每一帧分别先读取它的上一个关键帧并计算当前帧，在运行时处理会导致很大的性能问题。也即交互动画的效果越复杂，如逐帧倒放或者随机帧播放，基于视频编码格式实现可交互动画时，对展示可交互动画的浏览器版本和计算机的性能、或者应用的版本以及计算机的性能要求就越高，当用户使用的计算机和浏览器、或者计算机和应用无法逐帧倒放或者随机帧播放时，用户不能获得逐帧倒放或者随机帧播放的交互体验。
39.而第二种方法只有在展示视频封面预览效果的帧图像数量较低时可行，也即在组成大图的帧图像数量较少时可行。一旦组成大图的帧图像数量较高，将会造成图片文件过大、网络传输效率低等性能问题。
40.为了避免对用户使用的浏览器版本和计算机的性能、或者应用程序的版本以及计算机的性能有过高的要求，且保证可交互动画的效果体验和支持更高帧数的动画效果，同时不会网络传输效率低，本说明书提出了一种交互动画展示方法，接收交互动画标识，获取与所述交互动画标识对应的视频文件；根据预设的获取频率获取所述视频文件中的帧图
像，并将所述帧图像进行本地存储；接收交互动画展示请求，根据所述交互动画展示请求确定待展示的帧图像标识；从所述本地存储中获取与所述帧图像标识对应的目标帧图像，在交互动画展示界面展示所述目标帧图像。
41.在本技术中，提供了一种交互动画展示方法，本技术同时涉及一种交互动画展示装置，一种计算设备，以及一种计算机可读存储介质，在下面的实施例中逐一进行详细说明。
42.图1示出了根据本技术一实施例提供的一种交互动画展示方法的流程图，具体包括以下步骤：
43.步骤102：接收交互动画标识，获取与所述交互动画标识对应的视频文件。
44.具体的，交互动画标识是指所要展示的交互动画对应的标识，交互动画标识与视频文件一一对应，也即一个交互动画标识唯一对应一个视频文件，例如交互动画标识a1对应视频文件a1、交互动画标识a2对应视频文件a2。视频文件是指提供交互动画资源的文件。
45.实际应用中，对于某个应用程序或者某个浏览器页面来说，提供了多个视频文件，可以根据该应用程序或者该浏览器的版本选择不同的视频文件形成不同的动画展示效果，也即将应用程序或者浏览器的版本的作为交互动画的标识，例如，应用程序的版本为b1，也即交互动画标识为b1，该应用程序对应视频文件b1，又如，浏览器的版本为b2，也即交互动画标识为b2，该浏览器对应视频文件b2；还可以根据时间的发展选择不同的视频文件形成不同的动画展示效果，也即将当前时间作为交互动画的标识，例如，当前时间在0:00至12:00的时间段内，交互动画标识为c1，该交互动画标识c1对应视频文件c1，当前时间在12:00至24:00的时间段内，交互动画标识为c2，该交互动画标识c2对应视频文件c2。本地在接收到交互动画标识的情况下，获取与该交互动画标识对应视频文件即可。
46.需要说明的是，本技术中对视频文件的大小和视频时长不做限定。优选地，视频文件的大小和视频时长需要确保视频能流畅播放且不占用过多的网络资源。
47.在本实施例的一个或多个实施方式中，为了减少本地视频文件的存储量，提高本地的处理效率，视频文件由服务器提供，如此，本地只需根据交互动画标识向服务器获取对应的视频文件即可。因此，获取与所述交互动画标识对应的视频文件的具体实现过程可以如下：
48.根据所述交互动画标识，生成视频文件下载请求；
49.将所述视频文件下载请求发送至服务器；
50.接收所述服务器发送的与所述交互动画标识对应的视频文件。
51.具体的，视频文件下载请求是指用于下载与交互动画标识对应的视频文件的请求；服务器是指与该应用程序或者该浏览器页面对应的服务端。
52.实际应用中，本地在接收到交互动画标识后，需要生成针对交互动画标识对应的视频文件的下载请求，也即携带有交互动画标识的视频文件下载请求。将该视频文件下载请求发送至服务器，服务器在允许下载的情况下，将与交互动画标识对应的视频文件发送给本地，本地接收该视频文件即可。此外，本地可以通过异步http(超文本传输协议)请求从服务器下载与交互动画标识对应的视频文件。
53.例如，本地接收到交互动画标识d1，根据交互动画标识d1生成视频文件下载请求d2，其中该视频文件下载请求d2携带有交互动画标识d1；然后将视频文件下载请求d2发送
至服务器。服务器接收到视频文件下载请求d2并允许后，根据交互动画标识d1匹配到视频文件d3，再将视频文件d3发送给本地。
54.步骤104：根据预设的获取频率获取所述视频文件中的帧图像，并将所述帧图像进行本地存储。
55.在接收到交互动画标识并获取与该交互动画标识对应的视频文件的基础上，进一步地，对视频文件的帧图像进行提取，并进行存储。
56.具体的，获取频率是指获取帧图像的频率，例如每间隔20毫秒获取一个帧图像。帧图像也即图像帧。
57.实际应用中，根据预设的获取来获取视频文件对应的视频的帧图像，也即每间隔一定时间获取一次视频文件的帧图像，然后将帧图像进行本地存储，直至所有的帧图像均存储完毕。优选地，可以将帧图像存储至内存中，如此不仅可以提高存储速度，还可以在展示可交互动画时提高获取帧图像的效率。
58.例如，预设的获取频率为每30毫秒获取一个帧图像，然后从视频文件的起点开始，每间隔30毫秒，获取一个帧图像，直至获取到所有的帧图像，再将帧图像存储至内存中。
59.需要说明的是，预设的获取频率是针对预览视频文件的视频预览环境进行设置的，也即在该视频预览环境下，可以根据预设的获取频率获取视频文件的帧图像。如此，可以提高帧图像的效率。也即在根据预设的获取频率获取所述视频文件中的帧图像之前，还需要根据所述视频文件创建视频预览环境，为所述视频预览环境设置帧率；根据所述帧率确定所述视频预览环境的获取频率。
60.具体的，帧率(frame rate)是以帧称为单位的位图图像连续出现在显示器上的频率或速率，其中该预设的帧率与视频文件的原始的帧率和终端显示的帧率无关。
61.实际应用中，该视频预览环境是指预览视频文件的环境，也即html<video>元素。为视频文件创建一个html<video>元素，然后在为该html<video>元素设置一个预设的帧率，根据该预设的帧率，为视频预览环境设置获取频率。
62.例如，创建一个html<video>元素，预设的帧率为25fps，即每秒25帧，则该html<video>元素获取频率为1000/25＝40毫秒。
63.本技术中，在创建了视频预览环境和设置了获取频率之后，可以根据该获取频率在视频预览环境中对视频文件进行预览，得到该视频文件在该获取频率下所有的帧数据，再将各帧数据逐一转换为帧图像并存储。因此，根据预设的获取频率获取所述视频文件中的帧图像，并将所述帧图像进行本地存储的具体实现过程可以如下：
64.根据预设的获取频率在所述视频预览环境中预览所述视频文件，得到各帧数据；
65.针对各帧数据，根据该帧数据生成当前帧图像；
66.将所述当前帧图像进行本地存储。
67.实际应用中，在预设环境中预览视频文件，根据预设的获取频率获取该视频文件的帧数据，在得到该视频文件的各帧数据之后，逐一根据帧数据生成帧图像，即将当前帧数据通过canavs.putimage方法绘制在一个canvas元素(画布)中，得到当前帧图像，再通过canvas.getimagedata方法将当前帧图像存储在内存中。然后再根据下一帧数据生成帧图像，然后存储至内存中。以此类推，直至将最后一帧数据生成图像帧并存储。
68.此外，在创建了视频预览环境和设置了获取频率之后，还可以根据该获取频率在
视频预览环境中对视频文件进行预览，在得到一个帧数据时，就将当前帧数据转换为帧图像并存储，然后获取下一帧数据，将下一帧数据转换为帧图像并存储，以此类推，直至视频文件预览结束。也即根据预设的获取频率在所述视频预览环境中预览所述视频文件，得到当前帧数据；根据该帧数据生成当前帧图像，将所述当前帧图像进行本地存储；得到当前数据的下一帧数据，继续执行所述根据该帧数据生成当前帧图像的步骤。
69.也即，在预设环境中预览视频文件，根据预设的获取频率获取该视频文件的帧数据，先得到该视频文件的第一帧数据，根据第一帧数据生成第一帧图像，即将第一帧数据通过canavs.putimage方法绘制在一个canvas元素(画布)中，得到第一帧图像，再通过canvas.getimagedata方法将第一帧图像存储在内存中。然后获取第二帧数据并生成第二帧图像，然后存储至内存中。以此类推，直至将最后一帧数据生成图像帧并存储。
70.步骤106：接收交互动画展示请求，根据所述交互动画展示请求确定待展示的帧图像标识。
71.在对视频文件的帧图像进行提取并进行本地存储的基础上，进一步地，在接收交互动画展示请求的情况下，根据所述交互动画展示请求确定待展示的帧图像标识。
72.具体的，交互动画展示请求是指用户想要某个应用程序或者浏览器页面显示交互动画的请求。帧图像标识是指所要展示的交互动画效果对应的帧图像的标识。
73.实际应用中，用户通过浏览器浏览可以展示交互动画的页面，或者使用可以展示交互动画的应用程序时，可以生成交互动画展示请求，也即本地接收到交互动画展示请求，进一步地，本地根据该交互动画展示请求确定需要展示的帧图像标识。
74.在本实施例的一个或多个实施方式中，交互动画展示请求可以为封面动画展示请求，此时目标帧图像为封面帧图像。也即在用户打开该浏览器页面或者应用程序时，将立即触发该浏览器页面或者应用程序进行交互动画的封面展示，因此，本地将接收到封面动画展示请求，然后确定封面帧图像标识。也即接收交互动画展示请求，根据所述交互动画展示请求确定待展示的帧图像标识可以为：接收封面动画展示请求，对所述封面动画展示请求进行解析，获得待展示的封面帧图像标识。
75.具体的，封面动画展示请求是指用户打开浏览器页面或者应用程序时、触发的使浏览器页面或者应用程序展示交互动画的封面的请求。封面帧图像即用户指用户打开浏览器页面或者应用程序时，浏览器页面或者应用程序所展示的交互动画的图像。
76.实际应用中，在交互动画展示请求为封面动画展示请求的情况下，需要对封面动画展示请求进行解析，以获取需要展示的封面帧图像标识，用来确定需要展示的封面帧图像是哪个。如此，可以使用户在打开浏览器页面或者应用程序时，提高封面帧图像展示的效率，进一步提高用户体验性。
77.为了进一步增加用户的互动性和体验性，交互动画展示请求还可以为用户操作使展示的帧图像变化的请求，接收交互动画展示请求，根据所述交互动画展示请求确定待展示的帧图像标识具体实现过程可以如下：
78.接收交互动画展示请求，所述交互动画展示请求携带有的位置信息；
79.确定所述位置信息对应的待展示的帧图像标识。
80.具体的，位置信息是指用户使用鼠标、键盘或者通过触控想要进行交互动画展示时，鼠标、键盘或者触控点所指向的位置的信息。
81.实际应用中，用户使用鼠标、键盘或者通过触控的方式触发本地接收到交互动画展示请求是，该交互动画展示请求中携带有鼠标、键盘或者触控点的位置信息，每一个位置信息都对应一个帧图像标识，因此，可以基于该位置信息确定待展示的图像帧的标识。
82.为了提高确定帧图像标识的效率，可以基于该位置信息与预设的参考位置的偏移信息确定待展示的图像帧的标识。确定所述位置信息对应的待展示的帧图像标识的具体实现过程可以如下：
83.确定所述位置信息相对于所述交互动画展示界面的参考位置的偏移信息；
84.根据预设的偏移信息与帧图像对应关系表，确定所述偏移信息对应的待展示的帧图像标识。
85.具体的，交互动画展示界面是指浏览器页面或者应用程序上用来展示交互动画的界面，如图2a所示，图2a示出了本技术一实施例提供的一种交互动画展示界面的示意图，其中交互动画展示界面可以在浏览器页面或者应用程序的上方、也可以是下方、还可以是中间，本技术对交互动画展示界面在浏览器页面或者应用程序的位置不做限定。偏移信息与帧图像对应关系表是预先设置的用于确定偏移信息与帧图像标识一一对应的表，如表1所示，每一个偏移信息均对应一个帧图像，每一个帧图像对应一个帧图像标识，也即每一个偏移信息均对应一个帧图像标识。参考位置是指在交互动画展示界面预先设置的一个用于衡量位置信息的参考点的位置，该参考点可以是交互动画展示界面上的任意一个点，优选交互动画展示界面的中心点和边界点。
86.表1偏移信息与帧图像对应关系表
87.偏移信息x1x2x3x4x5帧图像帧图像x1帧图像x2帧图像x3帧图像x4帧图像x5帧图像标识x1x2x3x4x5
88.实际应用中，可以根据位置信息和参考位置，确定出位置信息相对于参考位置的偏移信息，在获取到偏移信息后，然后在偏移信息与帧图像对应关系表中，匹配到与该偏移信息对应的帧图像标识，也即待展示的帧图像标识。
89.例如，参考位置为交互动画展示界面的中心位置，位置信息为交互动画展示界面的边界点，该边界点与中心位置的偏移信息为x3，根据表1可以确定待展示的帧图像标识为x3。
90.此外，在实际中偏移信息与帧图像对应关系表中的偏移信息可以是一个范围，如表2所示。当位置信息相对于所述交互动画展示界面的参考位置的偏移信息为x1.2时，由于x1.2在[x1
‑
x2)的范围内，则偏移信息x1.2对应的帧图像标识为x2。
[0091]
表2另一种偏移信息与帧图像对应关系表
[0092]
偏移信息[x0
‑
x1)[x1
‑
x2)[x2
‑
x3)[x3
‑
x4)[x4
‑
x5]帧图像帧图像x1帧图像x2帧图像x3帧图像x4帧图像x5帧图像标识x1x2x3x4x5
[0093]
为了提高确定帧图像标识的效率，还可以基于位置信息中的起始位置与中止位置确定位置偏移信息，再根据位置偏移信息确定待展示的图像帧的标识。也即在所述位置信息包括起始位置信息和终止位置信息的情况下，所述确定所述位置信息对应的待展示的帧图像标识的具体实现过程可以如下：
[0094]
根据所述起始位置信息和所述终止位置信息确定位置偏移信息；
[0095]
确定所述位置偏移信息对应的待展示的帧图像标识。
[0096]
具体的，所述起始位置信息是指用户使用鼠标、键盘或者通过触控的方式进入交互动画展示界面的初始位置的信息；所述终止位置信息是指用户使用鼠标、键盘或者通过触控的方式在交互动画展示界面的终止位置的信息。
[0097]
实际应用中，用户在交互动画展示界面进行交互时，在交互动画展示界面上会有初始位置信息和终止位置信息，本地可以根据初始位置信息和终止位置信息确定用户操作时鼠标、键盘或者触控点的位置偏移信息，进而根据该位置偏移信息确定待展示的帧图像标识。
[0098]
需要说明的是，根据初始位置信息和终止位置信息确定的位置偏移信息可以是终止位置相对于初始位置的位置偏移量，也即所述位置偏移信息包括位置偏移量。为了提高进一步确定帧图像标识的效率，可以根据位置偏移量与交互动画展示界面宽度确定待展示的帧图像标识。即所述确定所述位置偏移信息对应的待展示的帧图像标识的具体实现过程可以如下：
[0099]
计算所述位置偏移量与所述交互动画展示界面宽度的比值；
[0100]
根据预设的比值与帧图像对应关系表，确定所述偏移信息对应的待展示的帧图像标识。
[0101]
具体的，交互动画展示界面是指浏览器页面或者应用程序上用来展示交互动画的界面，如图2a所示，其中交互动画展示界面可以在浏览器页面或者应用程序的上方、也可以是下方、还可以是中间，本技术对交互动画展示界面在浏览器页面或者应用程序的位置不做限定。位置偏移量与帧图像对应关系表是预先设置的用于确定比值与帧图像标识一一对应的表，如表3所示，每一个比值均对应一个帧图像，每一个帧图像对应一个帧图像标识，也即每一个比值均对应一个帧图像标识。
[0102]
表3比值与帧图像对应关系表
[0103]
比值y1y2y3y4y5帧图像帧图像y1帧图像y2帧图像y3帧图像y4帧图像y5帧图像标识y1y2y3y4y5
[0104]
实际应用中，在确定了位置偏移量之后，获取所述交互动画展示界面的宽度，然后计算该位置偏移量和该宽度的比值，再在比值与帧图像对应关系表中，匹配到与该比值对应的帧图像标识，也即待展示的帧图像标识。
[0105]
例如，位置偏移量为m10，交互动画展示界面的宽度m2，位置偏移量与交互动画展示界面宽度的比值为y5，根据表2可以确定待展示的帧图像标识为y5。
[0106]
此外，在实际中比值与帧图像对应关系表中的比值可以是一个范围，如表4所示。例如，当位置偏移量与交互动画展示界面宽度的比值为y4.5时，由于y4.5在[y4
‑
y5]的范围内，则比值y4.5对应的帧图像标识为y5。
[0107]
表4另一种比值与帧图像对应关系表
[0108]
比值[y0
‑
y1)[y1
‑
y2)[y2
‑
y3)[y3
‑
y4)[y4
‑
y5]帧图像帧图像y1帧图像y2帧图像y3帧图像y4帧图像y5帧图像标识y1y2y3y4y5
[0109]
需要说明的，本技术中还可以根据位置偏移量占浏览器或者应用程序宽度的百分比映射确定帧图像标识，该百分比映射也即映射关系支持设计者自由配置，可以是线性映射，也可以是非线性映射，例如使用贝塞尔曲线表示该映射关系。当映射关系为非线性映射时，将会出现位置偏移量和当前帧图像与待展示的帧图像在视频文件中的播放时间不成比例，例如鼠标移动往前100个像素时，当前帧图像与待展示的帧图像在视频文件中的播放时间间隔1秒，而鼠标往后移动100像素视频，当前帧图像与待展示的帧图像在视频文件中的播放时间只间隔0.5秒。
[0110]
步骤108：从所述本地存储中获取与所述帧图像标识对应的目标帧图像，在交互动画展示界面展示所述目标帧图像。
[0111]
在根据所述交互动画展示请求确定待展示的帧图像标识的基础上，进一步地，从本地存储中获取该帧图像标识对应的目标帧图像，在交互动画展示界面展示所述目标帧图像。
[0112]
具体的，目标帧图像是指当前需要在交互动画展示界面进行展示的帧图像。交互动画展示界面是指浏览器页面或者应用程序上用来展示交互动画的界面，如图2a所示，其中交互动画展示界面可以在浏览器页面或者应用程序的上方、也可以是下方、还可以是中间。
[0113]
实际应用中，在确定了帧图像标识后，根据该帧图像标识在本地存储中匹配对应的帧图像，将匹配成功的目标帧图像渲染在交互动画展示界面，以便于展示给用户。也即将交互动画展示界面展示的当前帧图像变为目标帧图像，如图2b所示，图2b示出了本技术一实施例提供的一种交互动画展示效果的示意图：当前帧图像为荷花的花骨朵，目标帧图像为荷花的盛开状态，将当前帧图像替换为目标帧图像后，就像荷花从花骨朵到完成绽放的动画。
[0114]
在本实施例的一个或多个实施方式中，交互动画展示请求可以为封面动画展示请求，对应的，目标帧图像为封面帧图像。在对接收的封面动画展示请求进行解析之后，获得待展示的封面帧图像标识，进一步地，从所述本地存储中获取与所述帧图像标识对应的目标帧图像，在交互动画展示界面展示所述目标帧图像可以是：从所述本地存储中获取所述封面帧图像标识对应的封面帧图像，在所述交互动画展示界面展示所述封面帧图像。
[0115]
实际应用中，在交互动画展示请求为封面动画展示请求的情况下，对封面动画展示请求进行解析，以获取需要展示的封面帧图像标识，进而根据封面帧图像的标识从本地存储中获取该封面帧图像标识对应的封面帧图像，然后在交互动画展示界面展示该封面帧图像。如图2c所述，图2c示出了本技术一实施例提供的一种封面动画展示效果的示意图：当用户打开浏览器页面或者应用程序时，在打开浏览器页面或者应用程序的交互动画展示界面展示封面帧图像。如此，可以使用户在打开浏览器页面或者应用程序时，提高封面帧图像展示的效率，避免了用户在打开浏览器页面或者应用程序时交互动画展示界面出现空白，即没有帧图像的展示，进一步提高用户体验性
[0116]
为了提高交互动画效果的流畅性，可以在交互动画展示界面展示所述目标帧图像之后，获取目标帧图像的下一帧图像，在交互动画展示请求连续发生时，便于快速地展示下一帧图像。也即在交互动画展示界面展示所述目标帧图像之后，获取所述本地存储中所述目标帧图像的下一个帧图像；在接收到连续的交互动画展示请求的情况下，响应于当前交
互动画展示请求的下一交互动画展示请求，在所述交互动画展示界面展示所述下一个帧图像。
[0117]
实际应用中，用户可能会发出多个连续的交互动画展示请求，例如鼠标在交互动画展示界面向左滑动、然后继续向左滑动。为了提高处理效率，可以提前获取目标帧图像的下一个帧图像，在下一交互动画展示请求发生时，将下一帧图像在交互动画展示界面进行展示。
[0118]
此外，还可以使用requestanimationframes方法使浏览器在每次展示目标帧图像前更新下一帧动画，从而保持动画效果的流畅。需要说明的是，在展示某个帧图像时，展示该帧图像所需的时间超过浏览器帧率，可以跳过一次展示，以保质用户的交互体验，不会有卡顿感。例如浏览器刷新频率为60fps，此时，展示一个帧图像的所需的最长时间为16毫秒，如果展示某个帧图像所需要的时间超过17毫秒，则该帧图像就不能及时在浏览器的交互动画展示界面中进行展示，需要在浏览器的交互动画展示界面在下一次使用该帧图像时才能进行展示，这时这一帧图像就相当于被跳过了。
[0119]
需要说明的是，通过交互动画展示界面接收交互动画展示请求只是本技术中的一种与用户交互的情况，而在交互动画展示请求结束的情况下，交互动画展示界面显示预设的帧图像，即在检测到所述交互动画展示请求结束的情况下，在所述交互动画展示界面展示预设帧图像。
[0120]
具体的，预设帧图像可以是封面帧图像，可以是目标帧图像，也可以帧图像中的人一个其他帧图像，由设计者进行配置预设帧图像为帧图像中的某个帧图像。
[0121]
实际应用中，当用户通过操作鼠标或者键盘使指针离开交互动画展示界面时，或者通过触控的方式令触控点离开交互动画展示界面时，此时交互动画展示请求结束，则交互动画展示界面显示预设帧图像。
[0122]
图2d示出了本技术一实施例提供的一种预设帧图像展示效果的示意图。如图2d所示，用户操作鼠标离开浏览器页面或应用程序中的交互动画展示界面时，该交互动画展示界面将显示预设帧图像。
[0123]
本技术提供的交互动画展示方法，接收交互动画标识，获取与所述交互动画标识对应的视频文件；根据预设的获取频率获取所述视频文件中的帧图像，并将所述帧图像进行本地存储；接收交互动画展示请求，根据所述交互动画展示请求确定待展示的帧图像标识；从所述本地存储中获取与所述帧图像标识对应的目标帧图像，在交互动画展示界面展示所述目标帧图像。通过根据交互动画标识获取视频文件，保证了获取的视频的准确性，进一步保证了交互动画的准确性；通过预设的获取频率获取视频文件中的帧图像并进行本地存储，避免了视频文件过大导致获取的帧图像过多，一定程度上提高了网络传输效率。此外，本技术通过帧图像标识获取对应的帧图像，可以实现帧图像的逐帧倒放或者随机帧播放，在保证可交互动画的效果体验和支持更高帧数的动画效果的同时，降低了对浏览器版本和计算机的性能、或者应用程序的版本以及计算机的性能的要求。
[0124]
下述结合附图2e，以本技术提供的交互动画展示方法在浏览器中的应用为例，对所述交互动画展示方法进行进一步说明。其中，图2e示出了本技术一实施例提供的一种应用于浏览器的交互动画展示方法的处理流程图，具体包括以下步骤：
[0125]
步骤202：接收交互动画标识。
[0126]
步骤204：根据所述交互动画标识，生成视频文件下载请求。
[0127]
步骤206：将所述视频文件下载请求发送至服务器。
[0128]
步骤208：接收所述服务器发送的与所述交互动画标识对应的视频文件。
[0129]
步骤210：根据所述视频文件创建视频预览环境。
[0130]
步骤212：为所述视频预览环境设置获取频率。
[0131]
可以先为视频预览环境设置帧率，再根据帧率确定所述视频预览环境的获取频率。
[0132]
步骤214：根据预设的获取频率在所述视频预览环境中预览所述视频文件，得到各帧数据。
[0133]
步骤216：从第一帧数据开始，根据该帧数据生成当前帧图像。
[0134]
步骤218：将所述当前帧图像进行本地存储。
[0135]
步骤220：判断是否还有下一帧数据。
[0136]
若是，执行步骤216，若否执行步骤222。
[0137]
步骤222：接收封面动画展示请求。
[0138]
步骤224：解析所述封面动画展示请求，获得待展示的封面帧图像标识。
[0139]
步骤226：从所述本地存储中获取所述封面帧图像标识对应的封面帧图像。
[0140]
步骤228：在所述交互动画展示界面展示所述封面帧图像。
[0141]
步骤230：接收交互动画展示请求，所述交互动画展示请求携带有的位置信息。
[0142]
步骤232：确定所述位置信息对应的待展示的帧图像标识。
[0143]
在本实施例的一个或多个实施方式中，可以确定所述位置信息相对于所述交互动画展示界面的参考位置的偏移信息；根据预设的偏移信息与帧图像对应关系表，确定所述偏移信息对应的待展示的帧图像标识。
[0144]
在本实施例的一个或多个实施方式中，所述位置信息包括起始位置信息和终止位置信息。在此基础上，根据所述起始位置信息和所述终止位置信息确定位置偏移信息；确定所述位置偏移信息对应的待展示的帧图像标识。
[0145]
进一步地，所述位置偏移信息包括位置偏移量。确定所述位置偏移信息对应的待展示的帧图像标识的具体过程可以为：计算所述位置偏移量与所述交互动画展示界面宽度的比值；根据预设的比值与帧图像对应关系表，确定所述偏移信息对应的待展示的帧图像标识。
[0146]
步骤234：从所述本地存储中获取与所述帧图像标识对应的目标帧图像。
[0147]
步骤236：在交互动画展示界面展示所述目标帧图像。
[0148]
步骤238：获取所述本地存储中所述目标帧图像的下一个帧图像。
[0149]
步骤240：在接收到连续的交互动画展示请求的情况下，响应于当前交互动画展示请求的下一交互动画展示请求，在所述交互动画展示界面展示所述下一个帧图像。
[0150]
步骤242：在检测到所述交互动画展示请求结束的情况下，在所述交互动画展示界面展示预设帧图像。
[0151]
本技术提供的应用于浏览器的交互动画展示方法，通过接收交互动画标识，获取与所述交互动画标识对应的视频文件；然后根据预设的获取频率获取所述视频文件中的帧图像，并将所述帧图像进行本地存储；再接收交互动画展示请求，根据所述交互动画展示请
求确定待展示的帧图像标识；最后从所述本地存储中获取与所述帧图像标识对应的目标帧图像，在交互动画展示界面展示所述目标帧图像。通过根据交互动画标识获取视频文件，保证了获取的视频的准确性，进一步保证了交互动画的准确性；通过预设的获取频率获取视频文件中的帧图像并进行本地存储，避免了视频文件过大导致获取的帧图像过多，一定程度上提高了网络传输效率。此外，本技术通过帧图像标识获取对应的帧图像，可以实现帧图像的逐帧倒放或者随机帧播放，在保证可交互动画的效果体验和支持更高帧数的动画效果的同时，降低了对浏览器版本和计算机的性能的要求。
[0152]
与上述方法实施例相对应，本技术还提供了交互动画展示装置实施例，图3示出了本技术一实施例提供的一种交互动画展示装置的结构示意图。如图3所示，该装置包括：
[0153]
接收模块302，被配置为接收交互动画标识，获取与所述交互动画标识对应的视频文件；
[0154]
存储模块304，被配置为根据预设的获取频率获取所述视频文件中的帧图像，并将所述帧图像进行本地存储；
[0155]
确定模块306，被配置为接收交互动画展示请求，根据所述交互动画展示请求确定待展示的帧图像标识；
[0156]
展示模块308，被配置为从所述本地存储中获取与所述帧图像标识对应的目标帧图像，在交互动画展示界面展示所述目标帧图像。
[0157]
在本实施例的一个或多个实施方式中，所述交互动画展示请求为封面动画展示请求，所述目标帧图像为封面帧图像；
[0158]
所述确定模块306，还被配置为：
[0159]
接收封面动画展示请求，对所述封面动画展示请求进行解析，获得待展示的封面帧图像标识；
[0160]
进一步地，所述展示模块308，还被配置为：
[0161]
从所述本地存储中获取所述封面帧图像标识对应的封面帧图像，在所述交互动画展示界面展示所述封面帧图像。
[0162]
在本实施例的一个或多个实施方式中，所述确定模块306，还被配置为：
[0163]
接收交互动画展示请求，所述交互动画展示请求携带有的位置信息；
[0164]
确定所述位置信息对应的待展示的帧图像标识。
[0165]
在本实施例的一个或多个实施方式中，所述确定模块306，还被配置为：
[0166]
确定所述位置信息相对于所述交互动画展示界面的参考位置的偏移信息；
[0167]
根据预设的偏移信息与帧图像对应关系表，确定所述偏移信息对应的待展示的帧图像标识。
[0168]
在本实施例的一个或多个实施方式中，所述位置信息包括起始位置信息和终止位置信息；
[0169]
所述确定模块306，还被配置为：
[0170]
根据所述起始位置信息和所述终止位置信息确定位置偏移信息；
[0171]
确定所述位置偏移信息对应的待展示的帧图像标识。
[0172]
在本实施例的一个或多个实施方式中，所述位置偏移信息包括位置偏移量；
[0173]
所述确定模块306，还被配置为：
[0174]
计算所述位置偏移量与所述交互动画展示界面宽度的比值；
[0175]
根据预设的比值与帧图像对应关系表，确定所述偏移信息对应的待展示的帧图像标识。
[0176]
在本实施例的一个或多个实施方式中，所述装置还包括创建模块，被配置为：
[0177]
根据所述视频文件创建视频预览环境，为所述视频预览环境设置帧率；
[0178]
根据所述帧率确定所述视频预览环境的获取频率。
[0179]
在本实施例的一个或多个实施方式中，所述存储模块304，还被配置为：
[0180]
根据预设的获取频率在所述视频预览环境中预览所述视频文件，得到各帧数据；
[0181]
针对各帧数据，根据该帧数据生成当前帧图像；
[0182]
将所述当前帧图像进行本地存储。
[0183]
在本实施例的一个或多个实施方式中，所述接收模块302，还被配置为：
[0184]
根据所述交互动画标识，生成视频文件下载请求；
[0185]
将所述视频文件下载请求发送至服务器；
[0186]
接收所述服务器发送的与所述交互动画标识对应的视频文件。
[0187]
在本实施例的一个或多个实施方式中，所述装置还包括获取模块，被配置为：
[0188]
获取所述本地存储中所述目标帧图像的下一个帧图像；
[0189]
在接收到连续的交互动画展示请求的情况下，响应于当前交互动画展示请求的下一交互动画展示请求，在所述交互动画展示界面展示所述下一个帧图像。
[0190]
在本实施例的一个或多个实施方式中，所述装置还包括检测模块，被配置为：
[0191]
在检测到所述交互动画展示请求结束的情况下，在所述交互动画展示界面展示预设帧图像。
[0192]
本技术提供的交互动画展示装置，接收交互动画标识，获取与所述交互动画标识对应的视频文件；根据预设的获取频率获取所述视频文件中的帧图像，并将所述帧图像进行本地存储；接收交互动画展示请求，根据所述交互动画展示请求确定待展示的帧图像标识；从所述本地存储中获取与所述帧图像标识对应的目标帧图像，在交互动画展示界面展示所述目标帧图像。通过根据交互动画标识获取视频文件，保证了获取的视频的准确性，进一步保证了交互动画的准确性；通过预设的获取频率获取视频文件中的帧图像并进行本地存储，避免了视频文件过大导致获取的帧图像过多，一定程度上提高了网络传输效率。此外，本技术通过帧图像标识获取对应的帧图像，可以实现帧图像的逐帧倒放或者随机帧播放，在保证可交互动画的效果体验和支持更高帧数的动画效果的同时，降低了对浏览器版本和计算机的性能、或者应用程序的版本以及计算机的性能的要求。
[0193]
上述为本实施例的一种交互动画展示装置的示意性方案。需要说明的是，该交互动画展示装置的技术方案与上述的交互动画展示方法的技术方案属于同一构思，交互动画展示装置的技术方案未详细描述的细节内容，均可以参见上述交互动画展示方法的技术方案的描述。
[0194]
图4示出了根据本技术一实施例提供的一种计算设备400的结构框图。该计算设备400的部件包括但不限于存储器410和处理器420。处理器420与存储器410通过总线430相连接，数据库450用于保存数据。
[0195]
计算设备400还包括接入设备440，接入设备440使得计算设备400能够经由一个或
多个网络460通信。这些网络的示例包括公用交换电话网(pstn)、局域网(lan)、广域网(wan)、个域网(pan)或诸如因特网的通信网络的组合。接入设备440可以包括有线或无线的任何类型的网络接口(例如，网络接口卡(nic))中的一个或多个，诸如ieee802.11无线局域网(wlan)无线接口、全球微波互联接入(wi
‑
max)接口、以太网接口、通用串行总线(usb)接口、蜂窝网络接口、蓝牙接口、近场通信(nfc)接口，等等。
[0196]
在本技术的一个实施例中，计算设备400的上述部件以及图4中未示出的其他部件也可以彼此相连接，例如通过总线。应当理解，图4所示的计算设备结构框图仅仅是出于示例的目的，而不是对本技术范围的限制。本领域技术人员可以根据需要，增添或替换其他部件。
[0197]
计算设备400可以是任何类型的静止或移动计算设备，包括移动计算机或移动计算设备(例如，平板计算机、个人数字助理、膝上型计算机、笔记本计算机、上网本等)、移动电话(例如，智能手机)、可佩戴的计算设备(例如，智能手表、智能眼镜等)或其他类型的移动设备，或者诸如台式计算机或pc的静止计算设备。计算设备400还可以是移动式或静止式的服务器。
[0198]
其中，处理器420执行所述计算机指令时实现所述的交互动画展示方法的步骤。
[0199]
上述为本实施例的一种计算设备的示意性方案。需要说明的是，该计算设备的技术方案与上述的交互动画展示方法的技术方案属于同一构思，计算设备的技术方案未详细描述的细节内容，均可以参见上述交互动画展示方法的技术方案的描述。
[0200]
本技术一实施例还提供一种计算机可读存储介质，其存储有计算机指令，该计算机指令被处理器执行时实现如前所述交互动画展示方法的步骤。
[0201]
上述为本实施例的一种计算机可读存储介质的示意性方案。需要说明的是，该存储介质的技术方案与上述的交互动画展示方法的技术方案属于同一构思，存储介质的技术方案未详细描述的细节内容，均可以参见上述交互动画展示方法的技术方案的描述。
[0202]
上述对本技术特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。
[0203]
所述计算机指令包括计算机程序代码，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质可以包括：能够携带所述计算机程序代码的任何实体或装置、记录介质、u盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(rom，read
‑
only memory)、随机存取存储器(ram，random access memory)、电载波信号、电信信号以及软件分发介质等。需要说明的是，所述计算机可读介质包含的内容可以根据司法管辖区内立法和专利实践的要求进行适当的增减，例如在某些司法管辖区，根据立法和专利实践，计算机可读介质不包括电载波信号和电信信号。
[0204]
需要说明的是，对于前述的各方法实施例，为了简便描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本技术并不受所描述的动作顺序的限制，因为依据本技术，某些步骤可以采用其它顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定都是本申
请所必须的。
[0205]
在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其它实施例的相关描述。
[0206]
以上公开的本技术优选实施例只是用于帮助阐述本技术。可选实施例并没有详尽叙述所有的细节，也不限制该发明仅为所述的具体实施方式。显然，根据本技术的内容，可作很多的修改和变化。本技术选取并具体描述这些实施例，是为了更好地解释本技术的原理和实际应用，从而使所属技术领域技术人员能很好地理解和利用本技术。本技术仅受权利要求书及其全部范围和等效物的限制。