CN110147260B

CN110147260B - 实现场景过渡动画的方法、介质、装置和计算设备

Info

Publication number: CN110147260B
Application number: CN201910430013.5A
Authority: CN
Inventors: 李云鹏; 刘棉明; 盛惠珍
Original assignee: Netease Media Technology Beijing Co Ltd
Current assignee: Netease Media Technology Beijing Co Ltd
Priority date: 2019-05-22
Filing date: 2019-05-22
Publication date: 2022-02-11
Anticipated expiration: 2039-05-22
Also published as: CN110147260A

Abstract

本发明的实施方式提供了一种实现场景过渡动画的方法、介质、装置和计算设备。该方法包括：起始场景和/或结束场景为客户端浏览器的控件时，获取所述客户端浏览器的控件的绝对位置信息；根据所述绝对位置信息及客户端浏览器页面的滚动距离，确定所述客户端浏览器的控件的真实位置信息；采用所述真实位置信息生成虚拟原生控件；利用所述虚拟原生控件实现场景过渡动画。本发明实施例能够实现涉及客户端浏览器的控件的场景过渡动画。

Description

实现场景过渡动画的方法、介质、装置和计算设备

技术领域

本发明的实施方式涉及场景过渡动画技术领域，更具体地，本发明的实施方式涉及一种实现场景过渡动画的方法、介质、装置和计算设备。

背景技术

本部分旨在为权利要求书中陈述的本发明的实施方式提供背景或上下文。此处的描述不因为包括在本部分中就承认是现有技术。

场景过渡动画(Scene Transition)是指以动画的形式实现视图(View)两个场景的切换(从一个场景切换到另一个场景)。现有的场景过渡动画只能针对安卓(Android)应用内的客户端基础控件进行切换，包括从一个活动窗体(Activity)切换到另一个活动窗体，或者从一个安卓图片控件(ImageView)切换到另一个活动窗体等。安卓(Android)应用内的客户端基础控件是采用JAVA语言编写的，而客户端浏览器的控件(控件在显示界面中可以对应一个图片)是采用超文本标记语言(HTML，Hyper Text Markup Language)编写的，两种无法互通。因此，当场景过渡涉及到客户端浏览器的控件时，现有技术无法实现场景过渡动画。

发明内容

本发明期望提供一种实现场景过渡动画的方法和装置。

在本发明实施方式的第一方面中，提供了一种实现场景过渡动画的方法，包括：

起始场景和/或结束场景为客户端浏览器的控件时，获取所述客户端浏览器的控件的绝对位置信息；

根据所述绝对位置信息及客户端浏览器页面的滚动距离，确定所述客户端浏览器的控件的真实位置信息；

采用所述真实位置信息生成虚拟原生控件；

利用所述虚拟原生控件实现场景过渡动画。

在本发明的一个实施例中，所述获取所述客户端浏览器的控件的绝对位置信息，包括：

通过所述客户端浏览器的内容信息获取所述控件的绝对位置信息；

所述绝对位置信息包括绝对左坐标、绝对上坐标、控件宽度及控件高度。

在本发明的一个实施例中，所述真实位置信息包括真实左坐标、真实上坐标、真实右坐标及真实下坐标；

所述根据所述绝对位置信息及客户端浏览器页面的滚动距离，确定所述客户端浏览器的控件的真实位置信息，包括：

将所述真实左坐标确定为等于所述绝对左坐标；

将所述绝对上坐标减去所述客户端浏览器页面的滚动距离，得到所述真实上坐标；

将所述真实左坐标与所述控件宽度相加，得到所述真实右坐标；

将所述真实上坐标与所述控件高度相加，得到所述真实下坐标。

在本发明的一个实施例中，还包括：

将所述虚拟原生控件作为所述客户端浏览器页面中的隐藏视图，将所述隐藏视图覆盖所述客户端浏览器的控件。

在本发明实施方式的第二方面中，提供了一种实现场景过渡动画的装置，包括：

绝对位置获取模块，用于当起始场景和/或结束场景为客户端浏览器的控件时，获取所述客户端浏览器的控件的绝对位置信息；

真实位置获取模块，用于根据所述绝对位置信息及客户端浏览器页面的滚动距离，确定所述客户端浏览器的控件的真实位置信息；

虚拟控件生成模块，用于采用所述真实位置信息生成虚拟原生控件；

场景过渡模块，用于利用所述虚拟原生控件实现场景过渡动画。

在本发明的一个实施例中，所述绝对位置获取模块用于：通过所述客户端浏览器的内容信息获取所述控件的绝对位置信息；

所述真实位置获取模块，用于：

将所述真实左坐标确定为等于所述绝对左坐标；

在本发明的一个实施例中，还包括：

覆盖模块，用于将所述虚拟原生控件作为所述客户端浏览器页面中的隐藏视图，将所述隐藏视图覆盖所述客户端浏览器的控件。

在本发明实施方式的第三方面中，提供了一种计算机可读介质，其上存储有计算机程序，该程序被处理器执行实现上述实现场景过渡动画的方法的步骤。

在本发明实施方式的第四方面中，提供了一种计算设备，包括：存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述实现场景过渡动画的方法的步骤。

根据本发明实施方式的实现场景过渡动画的方法和装置，当场景过渡涉及到客户端浏览器的控件时，根据该客户端浏览器的控件的绝对位置信息确定真实位置信息。之后，采用真实位置信息生成虚拟原生控件。由于虚拟原生控件是采用JAVA语言编写的，与现有的客户端基础控件的编写语言相同，因此可以利用该虚拟原生控件实现场景之间的过渡。

附图说明

通过参考附图阅读下文的详细描述，本发明示例性实施方式的上述以及其他目的、特征和优点将变得易于理解。在附图中，以示例性而非限制性的方式示出了本发明的若干实施方式，其中：

图1示意性地示出了根据本发明一实施方式的实现场景过渡动画的方法实现流程图；

图2示意性地示出了根据本发明一实施方式的实现场景过渡动画的方法中，客户端浏览器页面及客户端浏览器的控件的显示示意图；

图3示意性地示出了根据本发明一实施方式的实现场景过渡动画的方法中，客户端浏览器的控件在显示屏幕上的显示示意图；

图4示意性地示出了根据本发明一实施方式的用于实现场景过渡动画的方法的介质示意图；

图5示意性地示出了根据本发明一实施方式的用于实现场景过渡动画的装置结构示意图；

图6示意性地示出了根据本发明一实施方式的计算设备的结构示意图。

在附图中，相同或对应的标号表示相同或对应的部分。

具体实施方式

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

本领域技术人员知道，本发明的实施方式可以实现为一种***、装置、设备、方法或计算机程序产品。因此，本公开可以具体实现为以下形式，即：完全的硬件、完全的软件(包括固件、驻留软件、微代码等)，或者硬件和软件结合的形式。

根据本发明的实施方式，提出了一种实现场景过渡动画的方法、介质、装置和计算设备。

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

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

发明概述

本发明人发现，现有技术无法实现涉及到客户端浏览器的控件的场景过渡动画。

有鉴于此，本发明提供一种实现场景过渡动画的方法和装置，当起始场景和/或结束场景为客户端浏览器的控件时，在客户端浏览器中创建一个虚拟原生控件，利用该虚拟原生控件实现场景过渡动画。

在介绍了本发明的基本原理之后，下面具体介绍本发明的各种非限制性实施方式。

示例性方法

本发明实施例可以应用于客户端，特别是应用于安卓客户端。

下面参考图1来描述根据本发明示例性实施方式的实现场景过渡动画的方法。

图1示意性地示出了根据本发明一实施方式的实现场景过渡动画的方法实现流程图，包括：

S11：起始场景和/或结束场景为客户端浏览器的控件时，获取所述客户端浏览器的控件的绝对位置信息；

S12：根据所述绝对位置信息及客户端浏览器页面的滚动距离，确定所述客户端浏览器的控件的真实位置信息；

S13：采用所述真实位置信息生成虚拟原生控件；

S14：利用所述虚拟原生控件实现场景过渡动画。

通过上述过程，本发明实施例在场景过渡动画过程中涉及到客户端浏览器的控件时，确定该客户端浏览器的控件的真实位置信息，并采用真实位置信息生成虚拟原生控件。这样，就可以利用该虚拟原生控件实现场景过渡动画。

在一种可能的实施方式中，步骤S11中的获取所述客户端浏览器的控件的绝对位置信息，包括：

图2示意性地示出了根据本发明一实施方式的实现场景过渡动画的方法中，客户端浏览器页面及客户端浏览器的控件的显示示意图。在图2中，外圈矩形表示客户端浏览器页面，内圈矩形(图2中内圈矩形的边为虚线)表示客户端浏览器的控件(控件在客户端浏览器页面上显示为一个视图)。客户端浏览器页面使用二维坐标系，客户端浏览器页面的左上角为坐标原点，坐标值为(0,0)；X轴为从左到右方向，Y轴为从上到下方向。

在上述坐标系下，客户端浏览器的控件的绝对位置信息可以包括：该控件的绝对左坐标、绝对上坐标、控件宽度及控件高度。如图2所示，该控件的绝对左坐标可以为控件左上角的点的X轴坐标值，该控件的绝对上坐标可以为控件左上角的点的Y轴坐标值。在图2中，控件的绝对左坐标记为left’，控件的绝对上坐标记为top’，控件宽度记为width，控件高度记为height。

在一种可能的实施方式中，客户端浏览器加载了页面之后，采用JavaScript技术得到客户端浏览器的内容信息。客户端浏览器的内容信息中包含客户端浏览器的控件的绝对位置信息。其中，客户端浏览器的控件在上述页面中可以表现为一个图片，控件的绝对位置信息也就是该图片在页面中的绝对位置信息。上述绝对位置信息包括：

1)客户端浏览器的控件的绝对左坐标；

2)客户端浏览器的控件的绝对上坐标；

3)客户端浏览器的控件宽度；

4)客户端浏览器的控件高度。

根据上述四个绝对位置信息，能够确定出客户端浏览器的控件在客户端浏览器页面中的位置。

由于客户端浏览器页面的高度可能大于显示屏幕的高度，用户在阅读客户端浏览器页面的内容时，可能会将客户端浏览器页面向上滚动。因此，客户端浏览器的控件的真实位置信息(即在显示屏幕上的位置信息)不同于客户端浏览器的控件的绝对位置信息(即在客户端浏览器页面中的位置信息)。

将图2所示的客户端浏览器页面向上滚动一段距离之后，客户端浏览器页面的一部分显示在屏幕上，如图3所示。图3示意性地示出了根据本发明一实施方式的实现场景过渡动画的方法中，客户端浏览器的控件在显示屏幕上的显示示意图。在图3中，外圈矩形表示显示屏幕，内圈矩形(图3中内圈矩形的边为虚线)表示客户端浏览器的控件。显示屏幕使用二维坐标系，显示屏幕的左上角为坐标原点，坐标值为(0,0)；X轴为从左到右方向，Y轴为从上到下方向。

在上述坐标系下，客户端浏览器的控件的真实位置信息可以包括：该控件的真实左坐标、真实上坐标、真实右坐标及真实下坐标。在图3中，控件的真实左坐标记为left，控件的真实上坐标记为top，控件宽度记为width，控件高度记为height。

上述步骤S12中确定真实位置信息的方式为：

将所述真实左坐标确定为等于所述绝对左坐标；

将所述绝对上坐标减去所述客户端浏览器页面的滚动距离，得到所述真实上坐标；其中，客户端浏览器页面的滚动距离可以采用函数mWebView.getScrolly()得到；

在一种可能的实施方式中，上述步骤S13采用上述真实位置信息、并利用以下函数生成虚拟原生控件：

getTransitionContainer().layout(left，top，left+width，top+height)；

其中，

left为真实左坐标；

top为真实上坐标；

width为控件宽度；

left+width为真实右坐标；

height为控件高度；

top+height为真实下坐标。

本申请实施例不设置上述函数的内容信息，而仅设置上述函数的布局信息。因此，上述虚拟原生控件可以作为客户端浏览器页面中的隐藏视图，本申请实施例可以进一步将所述隐藏视图覆盖客户端浏览器的控件。虚拟原生控件对用户是不可见的(Invisible)；但是，上述虚拟原生控件又是实际存在的控件，虚拟原生控件是一种客户端基础控件。因此，本申请实施例可以利用该虚拟原生控件，采用现有的场景过渡动画技术实现场景过渡。

场景过渡动画是指不同用户界面(UI，User Interface)状态转换时的动画。其中有两个关键概念：场景(Scenes)和转换(Transitions)。场景定义了一个确定的UI状态，而转换定义了两个场景切换时的动画。

当两个场景切换时，Transition主要有下面两个行为：

(1)确定开始场景和结束场景中每个视图的状态。

(2)根据状态差异创建动画制作模型(Animator)，用以场景切换时视图的动画。

采用本发明实施例提出的上述方法，如果起始场景为客户端浏览器的控件，则为起始场景生成一个虚拟原生控件，将该虚拟原生控件作为起始场景中的隐藏视图。如果结束场景为客户端浏览器的控件，则为结束场景生成一个虚拟原生控件，将该虚拟原生控件作为结束场景中的隐藏视图。在生成上述视图的前提下，即可以采用现有的场景过渡动画技术实现两个场景之间的切换。

可见，本申请实施例实现了以下三种场景过渡动画：

第一种：客户端浏览器的控件过渡到客户端基础控件；

第二种：客户端基础控件过渡到客户端浏览器的控件；

第三种：客户端浏览器的控件过渡到客户端浏览器的控件。

示例性介质

在介绍了本发明示例性实施方式的方法之后，接下来，参考图4对本发明示例性实施方式的介质进行说明。

在一些可能的实施方式中，本发明的各个方面还可以实现为一种计算机可读介质，其上存储有程序，当所述程序被处理器执行时用于实现本说明书上述“示例性方法”部分中描述的根据本发明各种示例性实施方式的实现场景过渡动画的方法中的步骤。

具体地，上述处理器执行上述程序时用于实现如下步骤：

采用所述真实位置信息生成虚拟原生控件；

利用所述虚拟原生控件实现场景过渡动画。

需要说明的是：上述的介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以是但不限于：电、磁、光、电磁、红外线、或半导体的***、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

如图4所示，描述了根据本发明的实施方式的介质40，其可以采用便携式紧凑盘只读存储器(CD-ROM)并包括程序，并可以在设备上运行。然而，本发明不限于此，在本文件中，可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行***、装置或者器件使用或者与其结合使用。

可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了可读程序代码。这种传播的数据信号可以采用多种形式，包括但不限于：电磁信号、光信号或上述的任意合适的组合。可读信号介质还可以是可读存储介质以外的任何可读介质，该可读介质可以发送、传播或者传输用于由指令执行***、装置或者器件使用或者与其结合使用的程序。

可以以一种或多种程序设计语言的任意组合来编写用于执行本发明操作的程序代码，上述程序设计语言包括面向对象的程序设计语言—诸如Java、C++等，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络—包括局域网(LAN)或广域网(WAN)—连接到用户计算设备。

示例性装置

在介绍了本发明示例性实施方式的介质之后，接下来，参考图5对本发明示例性实施方式的装置进行说明。

如图5所示，本发明实施例的实现场景过渡动画的装置可以包括：

绝对位置获取模块501，用于当起始场景和/或结束场景为客户端浏览器的控件时，获取所述客户端浏览器的控件的绝对位置信息；

真实位置获取模块502，用于根据所述绝对位置信息及客户端浏览器页面的滚动距离，确定所述客户端浏览器的控件的真实位置信息；

虚拟控件生成模块503，用于采用所述真实位置信息生成虚拟原生控件；

场景过渡模块504，用于利用所述虚拟原生控件实现场景过渡动画。

在本发明的一个实施例中，绝对位置获取模块501用于：通过所述客户端浏览器的内容信息获取所述控件的绝对位置信息；

所述真实位置获取模块502用于：

将所述真实左坐标确定为等于所述绝对左坐标；

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

覆盖模块505，用于将所述虚拟原生控件作为所述客户端浏览器页面中的隐藏视图，将所述隐藏视图覆盖所述客户端浏览器的控件。

示例性计算设备

在介绍了本发明示例性实施方式的方法、介质和装置之后，接下来，参考图6对本发明示例性实施方式的计算设备进行说明。

所属技术领域的技术人员能够理解，本发明的各个方面可以实现为***、方法或程序产品。因此，本发明的各个方面可以具体实现为以下形式，即：完全的硬件实施方式、完全的软件实施方式(包括固件、微代码等)，或硬件和软件方面结合的实施方式，这里可以统称为“电路”、“模块”或“***”。

在一些可能的实施方式中，根据本发明实施方式的计算设备可以至少包括至少一个处理单元以及至少一个存储单元。其中，所述存储单元存储有程序代码，当所述程序代码被所述处理单元执行时，使得所述处理单元执行本说明书上述“示例性方法”部分中描述的根据本发明的各种示例性实施方式的实现场景过渡动画的方法中的步骤。

下面参照图6来描述根据本发明的这种实施方式的计算设备60。图6真实的计算设备60仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图6所示，计算设备60以通用计算设备的形式表现。计算设备60的组件可以包括但不限于：上述至少一个处理单元601、上述至少一个存储单元602，连接不同***组件(包括处理单元601和存储单元602)的总线603。

总线603包括数据总线、控制总线和地址总线。

存储单元602可以包括易失性存储器形式的可读介质，例如随机存取存储器(RAM)6021和/或高速缓存存储器6022，可以进一步包括非易失性存储器形式的可读介质，例如只读存储器(ROM)6023。

存储单元602还可以包括具有一组(至少一个)程序模块6024的程序/实用工具6025，这样的程序模块6024包括但不限于：操作***、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。

计算设备60也可以与一个或多个外部设备604(例如键盘、指向设备等)通信。这种通信可以通过输入/输出(I/O)接口605进行。并且，计算设备60还可以通过网络适配器606与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图6所示，网络适配器606通过总线603与计算设备60的其它模块通信。应当理解，尽管图中未示出，可以结合计算设备60使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID***、磁带驱动器以及数据备份存储***等。

应当注意，尽管在上文详细描述中提及了实现场景过渡动画的装置的若干单元/模块或子单元/子模块，但是这种划分仅仅是示例性的并非强制性的。实际上，根据本发明的实施方式，上文描述的两个或更多单元/模块的特征和功能可以在一个单元/模块中具体化。反之，上文描述的一个单元/模块的特征和功能可以进一步划分为由多个单元/模块来具体化。

此外，尽管在附图中以特定顺序描述了本发明方法的操作，但是，这并非要求或者暗示必须按照该特定顺序来执行这些操作，或是必须执行全部所示的操作才能实现期望的结果。附加地或备选地，可以省略某些步骤，将多个步骤合并为一个步骤执行，和/或将一个步骤分解为多个步骤执行。

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

Claims

1.一种实现场景过渡动画的方法，其特征在于，包括：

采用所述真实位置信息生成虚拟原生控件；

将所述虚拟原生控件作为所述客户端浏览器页面中的隐藏视图，实现场景过渡动画。

2.根据权利要求1所述的方法，其特征在于，所述获取所述客户端浏览器的控件的绝对位置信息，包括：

3.根据权利要求2所述的方法，其特征在于，所述真实位置信息包括真实左坐标、真实上坐标、真实右坐标及真实下坐标；

将所述真实左坐标确定为等于所述绝对左坐标；

4.根据权利要求1、2或3所述的方法，其特征在于，还包括：

将所述隐藏视图覆盖所述客户端浏览器的控件。

5.一种实现场景过渡动画的装置，其特征在于，包括：

场景过渡模块，用于将所述虚拟原生控件作为所述客户端浏览器页面中的隐藏视图实现场景过渡动画。

6.根据权利要求5所述的装置，其特征在于，所述绝对位置获取模块用于：通过所述客户端浏览器的内容信息获取所述控件的绝对位置信息；

7.根据权利要求6所述的装置，其特征在于，所述真实位置信息包括真实左坐标、真实上坐标、真实右坐标及真实下坐标；

所述真实位置获取模块，用于：

将所述真实左坐标确定为等于所述绝对左坐标；

8.根据权利要求5、6或7所述的装置，其特征在于，还包括：

覆盖模块，用于将所述隐藏视图覆盖所述客户端浏览器的控件。

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

10.一种计算设备，包括：

一个或多个处理器；

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

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