CN110088718A - 动态生成的界面转换 - Google Patents

动态生成的界面转换 Download PDF

Info

Publication number
CN110088718A
CN110088718A CN201880003769.5A CN201880003769A CN110088718A CN 110088718 A CN110088718 A CN 110088718A CN 201880003769 A CN201880003769 A CN 201880003769A CN 110088718 A CN110088718 A CN 110088718A
Authority
CN
China
Prior art keywords
appearance
state
timing function
change
conversion
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201880003769.5A
Other languages
English (en)
Inventor
E.C.亨利
A.B.萨克特-泽尔策
J.A.纳伊马克
S.哈里斯
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Google LLC
Original Assignee
Google LLC
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Google LLC filed Critical Google LLC
Publication of CN110088718A publication Critical patent/CN110088718A/zh
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T13/00—Animation
    • G06T13/80—2D [Two Dimensional] animation, e.g. using sprites
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/04817—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance using icons
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G06T11/001—Texturing; Colouring; Generation of texture or colour
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G06T11/60—Editing figures and text; Combining figures or text
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T13/00—Animation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T3/00—Geometric image transformation in the plane of the image
    • G06T3/40—Scaling the whole image or part thereof
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N5/00—Details of television systems
    • H04N5/222—Studio circuitry; Studio devices; Studio equipment
    • H04N5/262—Studio circuits, e.g. for mixing, switching-over, change of character of image, other special effects ; Cameras specially adapted for the electronic generation of special effects
    • H04N5/2628—Alteration of picture size, shape, position or orientation, e.g. zooming, rotation, rolling, perspective, translation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T2200/00—Indexing scheme for image data processing or generation, in general
    • G06T2200/24—Indexing scheme for image data processing or generation, in general involving graphical user interfaces [GUIs]

Abstract

描述了用于基于用于一个或多个应用内的多个不同转换的定时函数来在运行时间动态确定应用的用户界面状态之间的转换的技术。定时函数被应用于用户界面中的各种转换图形元素，使得每个共享元素的外观以根据定时函数确定的速率逐渐改变。在转换持续时间期间使用(例如，作为整体的)定时函数转换共享元素。使用定时函数的第一子部分和第二子部分分别转换传出元素和传入元素，其中子部分由拐点时间分界，在一些实例中，拐点时间对应于定时函数的峰值速度的时间。

Description

动态生成的界面转换
背景技术
考虑到用于工作、休闲、商业和社交交互的各种类型的计算设备的普遍性，许多人花费大量时间来查看在一个计算设备或其它计算设备上呈现的用户界面。因此，应用界面的设计人员和开发人员努力提供易于使用、直观和/或以其它方式提供积极的用户体验的界面。在一些情况下，为了保持用户注意力并防止迷惑，操作系统和/或应用在界面的静态状态之间提供动画转换。为了被感知为连续且易于用户理解，该转换可以协调界面中呈现的元素的运动、出现和/或消失的排序。该排序也可以称为编排(choreography)。通常，每个转换可以由应用开发人员和/或操作系统单独设计(即，编排)并指定。
发明内容
本公开一般涉及在用户界面(User Interface，UI)中执行转换。更具体地，一些实施方式涉及基于定时函数动态地生成和执行UI中的状态之间的转换，其中该定时函数指示在转换期间各种元素在其外观上如何逐渐改变。
通常，当UI在向用户提供连续性时，即使UI的外观改变，UI也是最有效的。因为UI的改变对用户是可预测的，所以提高连续性可以提高UI的可用性。在许多UI中，元素配置的特定改变是不可预测的。例如，应用开发人员或操作系统设计人员无法预测用户可能并发运行的应用的所有组合，或者最终可以在UI上布置的UI元素的许多不同排列。虽然如何随着时间配置和改变UI有许多可能性，但是如下面所描述的通过以一致的方式来管理转换的定时，可以增强UI的连续性和UI向用户传达改变的能力。
在一些实施方式中，UI转换的特征由操作系统或其它软件动态生成。计算系统可以获得关于UI的元素的当前布置的信息，以及要通过转换实现的元素的期望布置。通过评估两个UI状态之间的相似性和差异，计算系统可以动态地设置转换的属性。通过这种方式，系统可以增强转换过程的连续性并保持在各种UI配置之间执行转换的灵活性。此外，应用不需要指定转换的特性。当计算系统在来自不同第三方的UI元素的不同组合的视图(诸如包括来自若干不同应用的元素的视图)之间转换时，该方式尤其有用。因此，实施方式允许以不能手动编程的改进方式从先前的UI生成UI。
为了在许多不同类型的转换中实现一致性，主定时函数可以用于导出UI出现的定时和改变模式。使用该主定时函数，可以针对不同持续时间(例如，1秒或5秒)的转换调整转换，并且仍然共享一致的改变模式。例如，主定时函数可以指定UI元素应该在转换的不同部分中在UI上行进的运动的相对速率。由主定时函数指定的定时模式可以被缩放(例如，压缩或拉伸以适应短或长转换)，以便在不同类型的转换上提供一致的改变模式。此外，相同的主定时函数可以用于确定针对不同类型的改变的转换，例如，单个应用的界面内的改变、UI上一起显示的不同应用的窗口或其它元素的布置的改变等。
本说明书中描述的主题的一个创新方面体现在包括以下动作的方法中：接收执行用户界面(UI)从第一UI状态到第二UI状态的转换的指示；识别(i)图形元素中的在第一UI状态中呈现并且不在第二UI状态中呈现的至少一个传出元素(outgoing element)、以及(ii)图形元素中的在第二UI状态中呈现并且不在第一UI状态中呈现的至少一个传入元素(ingoing element)；确定从第一UI状态转换到第二UI状态的转换持续时间；根据指定在转换过程中的不同的外观改变速率的定时函数来改变UI的外观以在转换持续时间内从第一UI状态转换到第二UI状态，其中UI的外观通过以下方式改变：在转换持续时间的第一部分期间从UI逐渐移除至少一个传出元素，其中至少一个传出元素的外观以由定时函数指定的、变化的改变速率来改变；以及在转换持续时间的第二部分期间将至少一个传入元素逐渐添加到UI，其中至少一个传入元素的外观以由定时函数指定的、变化的改变速率来改变。
此方面和其它方面的其它实施例包括相应的系统、装置、以及在计算机存储设备上编码的被配置为执行该方法的动作的计算机程序。一个或多个计算机或其它处理设备的系统可以通过安装在系统上的在操作中使系统执行该动作的软件、固件、硬件或它们的组合来如此配置。一个或多个计算机程序可以通过具有在由数据处理装置运行时使该装置执行该动作的指令如此配置。
这些实施例和其它实施例可以各自可选地包括下列特征中的一个或多个。
一些实施例包括以下操作的特征：确定用于控制UI中的多个转换的主定时函数，以及通过调整主定时函数以跨越转换持续时间来导出用于转换的定时函数。
一些实施例包括以下操作的特征：确定拐点时间，其在定时函数指定的最大改变速率的时间的阈值范围内，以及将转换持续时间划分成第一部分和第二部分，使得(i)第一部分从转换持续时间的开始延伸到拐点时间，(ii)第二时段从拐点时间延伸到转换持续时间的结束。
在一些实施例中，在所述转换期间，在相应图形元素的位置、大小、形状、Z-级别(Z-level)、方向、不透明度、颜色或阴影的一个或多个中改变所述至少一个传出元素和所述至少一个传入元素的外观。将理解，改变元素的外观包括修饰元素的外观。
在一些实施例中，逐渐改变至少一个传出元素的外观包括将该至少一个传出元素的不透明度从初始UI状态中的完全不透明逐渐改变为拐点时间处的完全透明。
在一些实施例中，逐渐改变至少一个传入元素的外观包括将该至少一个传入元素的不透明度从拐点时间处的完全透明逐渐改变为最终UI状态中的完全不透明。
在一些实施例中，逐渐改变至少一个传出元素的外观包括将该至少一个传出元素的大小从初始UI状态中的初始大小逐渐改变为拐点时间处的零大小。
在一些实施例中，逐渐改变至少一个传入元素的外观包括将该至少一个传入元素的大小从拐点时间处的零大小逐渐改变为最终UI状态中的最终大小。
一些实施例包括以下操作的特征：识别图形元素中的至少一个快速转换元素在外观上不是逐渐可变的，以及改变该至少一个快速转换元素的外观，以在根据定时函数定义的特定时间从初始UI状态中的相应初始外观改变为最终UI状态中的相应最终外观。
一些实施例包括以下操作的特征：识别图形元素中的在初始UI状态和最终UI状态两者中都呈现的至少一个共享元素，以及将该至少一个共享元素的外观从初始UI状态中的相应初始外观逐渐改变为最终UI状态中的相应最终外观，其中逐渐改变该至少一个共享元素的外观是响应于所接收的指示，根据定时函数动态确定的。
在一些实施例中，逐渐改变至少一个共享元素的外观包括：以在转换期间根据所述定时函数变化的速度将每个共享元素从初始位置移动到最终位置。
在一些实施例中，逐渐改变至少一个共享元素的外观包括：以在转换期间根据所述定时函数变化的大小改变速率将每个共享元素的大小从初始大小改变为最终大小。
在一些实施例中，逐渐改变至少一个共享元素的外观包括：以在转换期间根据所述定时函数变化的旋转速率将每个共享元素从初始方向旋转到最终方向。
在一些实施例中，逐渐改变至少一个共享元素的外观包括：以在转换期间根据所述定时函数变化的颜色改变速率将每个共享元素的颜色从初始颜色改变为最终颜色。
一些实施例包括以下操作的特征：访问用于定义单调增加的曲线的主定时函数的数据，通过缩放该曲线以遍布整个转换持续时间来导出用于转换的定时函数。
在一些实施例中，逐渐移除至少一个传出元素包括利用由缩放后的曲线的第一部分定义的定时模式来改变至少一个传出元素的外观。
在一些实施例中，逐渐移除至少一个传出元素包括利用由缩放后的曲线的第二部分定义的定时模式来改变至少一个传出元素的外观。
在UI中的两个状态之间的转换期间，动画框架、操作系统和/或其它软件模块协调在UI在状态之间转换的时间段的至少一部分的期间在UI中呈现的图形元素的排序和外观(例如，编排)。图形元素可以以文本、形状、符号、颜色、图标、图像、视频数据、图形、窗口、面板、框架等的形式呈现信息。图形元素还可以包括用户可以与之交互的控件，诸如按钮、列表、标签、菜单、数据输入表单字段、滑块控件、可点击图形、可选图标等。
图形元素可以包括静态元素、共享元素、传入元素和/或传出元素。静态元素包括在转换UI的初始状态和最终状态两者中都具有相同外观(例如，位置、形状、大小、颜色等)，使得在转换期间可能不需要改变它们的外观的那些元素。共享元素在初始状态和最终状态两者中都存在，并且在初始状态和最终状态之间展现外观改变。这种外观改变可以包括位置、大小、形状、方向、Z-级别、不透明度、图案、颜色或元素外观的一些其它方面中的一个或多个的改变。传出元素呈现在初始状态中但不呈现在最终状态中。传入元素呈现在最终状态中但不呈现在初始状态中。传出和传入元素可以通过大小、不透明度、位置和/或一些其它可见特性的改变各自地从UI转换出或转换进入UI。
通常，计算系统不使用用于界面转换编排的标准方法，并且应用开发人员典型地单独设计每个转换。例如，在应用的传统开发期间，开发人员可以尝试确定应用的UI状态之间的每个可能的转换，并且然后为每个可能的转换手动组成查找表。查找表可以指示在转换期间在时间上各个中间点处的每个元素的特定状态，或者可以以其它方式为每个单独元素描述该元素将被动画化以实现转换的特定方式。该手动、高度定制化和劳动密集型转换设计过程为每个转换创建了一组复杂的依赖关系，通常没有关于这些值如何相关或者这些值将需要被如何调整以适应各种意外事件(诸如整体转换速度改变、输出显示大小改变等)的基础逻辑。
本文描述的实施方式增强了UI转换过程，在该UI转换过程中通过使用跨特定应用、多个应用、或在更广泛的计算环境中的多个转换被应用的单个定时函数来控制不同UI元素的多个转换，从而将UI从第一UI转换到第二UI。公共定时函数将转换的进展与时间相关联，使得定时函数为转换期间的每个时间提供每个元素在那个时间处的转换中已经达到的进度。
在一些实施方式中，管理转换的动画框架或其它软件模块接收主定时函数和转换的持续时间作为输入。主定时函数和持续时间可以用于通过拉伸或压缩主定时函数以跨越转换的特定持续时间来导出特定转换的定时函数。定时函数被(例如，直接地)应用于共享元素，使得每个共享元素的外观跨转换持续时间根据定时函数逐渐改变。如下面进一步描述的，根据定时函数在初始状态和最终状态之间内插(interpolate)每个共享元素的各种外观特性(例如，大小、位置、方向等)的值。
拐点时间基于定时函数来确定，或者以其它方式与定时函数相关联。在一些实施方式中，拐点时间是定时函数的峰值速度的时间(例如，最大改变速率的点，或定时函数的一阶导数的最大值的点)、和/或在峰值速度的时间的阈值时间段内。定时函数可以在拐点时间处被分成第一子部分(在拐点时间之前)和第二子部分(在拐点时间之后)。从转换开始到拐点时间的第一子部分用于驱动传出元素的动画，使得传出元素根据按照第一子部分执行的内插逐渐改变。传出元素以初始外观开始于初始UI状态，并且其外观逐渐改变，直到传出元素在拐点时间处从UI消失。从拐点时间到转换结束的第二子部分用于驱动传入元素的动画，使得根据按照第二子部分执行的内插逐渐改变传入元素。传入元素在拐点时间处开始出现在UI中，并逐渐改变外观，直到在最终UI状态中达到其最终外观。也就是说，传出元素在第一子部分期间逐渐从UI消失，并且传入元素在第二子部分期间逐渐出现在UI中。
不同于根据传统技术针对每个转换使用独特的、单独设计的(例如，定制的)编排，实施方式可以采用单个定时函数或单个主定时函数来管理应用、一组应用或更广泛的计算环境内的多个界面转换。对于多个转换，通过使用公共定时函数或主定时函数，实施方式总体上提供了在关于外观、风格、感知连续性、理解的容易性和积极的用户体验方面是一致的、紧密结合的一组转换。通过提供紧密结合的一组转换，改善了用户界面的可用性。通过调整转换的持续时间并且导出作为适合于调整后的持续时间的主定时函数的定时函数，实施方式还可以在用户的速度感知方面提供对各个转换的优化的简易性。这有助于一个或多个转换的微调。
在一些实施方式中，定时函数还用于管理在转换期间不适合逐渐改变的那些元素(诸如在初始和最终状态中显示不同文本的元素、在初始状态和最终状态之间改变行和/或列的数量的表格视图或网格元素等)的转换。这样的元素在本文中被描述为快速转换(snap-transition)元素。在一些实施方式中，快速转换元素在与定时函数相关联的拐点时间处从其初始状态改变为其最终状态。这种改变可以是所呈现的快速转换元素从其初始状态到其最终状态的切割、渐隐(dissolve)或其它基本上瞬时的改变。因此，可以使用相同的定时函数来管理逐渐改变的元素(例如，共享、传入和/或传出元素)的转换以及不逐渐改变的快速转换元素。
在一些实施方式中，采用单个定时函数来管理多个转换。在一些实施方式中，可以使用多个定时函数，其中每个定时函数被应用于管理不同类别或类型的转换。例如，一个定时函数可以产生对用户来说相对不显眼的速度改变，并且可以用于处理更功能性的转换。另一个定时函数可以产生稍微更加突然的速度改变，并且可以用于在重要时刻强调。实施方式自动将所有转换元素的编排调整为适用于特定转换的定时函数。
实施方式提供以下技术优点中的一个或多个。通过采用定时函数来动态确定在从初始状态到最终状态的UI转换期间元素要被改变的方式，实施方式允许以一致的方式修改元素，而这在应用的开发期间通过手动设计和编码是不可能的。因此，实施方式提供了更有效的开发过程，该开发过程更简单、耗时更少并且更不易于引入错误(bug)。此外，通过将单个定时函数应用于多个转换，实施方式避免了在查找表中手动指定或以其它方式硬编码和预定每个转换的需要。因此，与如果可运行文件被要求为每个可能的转换包括硬编码和/或单独指定的编排的情况相比，实施方式以较小的二进制、机器代码可运行文件、可运行脚本或中间语言文件的形式为应用提供较小大小的可运行文件。因此，实施方式减少了分别存储和/或传送可运行文件所需的存储空间量和/或网络带宽。
在附图和以下描述中阐述了本说明书中描述的主题的一个或多个实施例的细节。根据说明书、附图和权利要求书，本主题的其它特征、方面和优点将变得明显。
附图说明
图1描绘了根据本文描述的实施方式的用于界面转换的动态生成和运行的示例系统。
图2描绘了根据本文描述的实施方式的转换界面的示例初始和最终状态。
图3描绘了根据本文描述的实施方式的用于动态生成界面转换的示例定时函数。
图4描绘了根据本文描述的实施方式的基于示例定时函数执行的示例界面转换。
图5描绘了根据本文描述的实施方式的用于界面转换的动态生成和运行的示例过程的流程图。
在各附图中，相同的附图标记和命名指示相同的元素。
具体实施方式
图1描绘了根据本文描述的实施方式的用于界面转换的动态生成和运行的示例系统100。如图1的示例中所示，用户102可以操作用户设备104。用户设备104可以是任何合适类型的计算设备，包括便携式(例如，移动)计算设备(诸如智能电话、平板电脑、可穿戴计算机等)。用户设备104还可以是不太便携类型的计算设备，诸如膝上型计算机、台式计算机、智能家电、游戏或娱乐控制台等。应用可以在用户设备104上运行并且通过用户设备104的显示器呈现UI。在一些实例中，应用可以在某个其它计算设备上运行并且可以发送要通过用户设备104的显示器呈现的输出。在任一情况下，软件模块106可以运行以管理应用UI的两个UI状态之间的转换114。在一些实例中，软件模块106可以是作为操作系统(OperatingSystem，OS)的组件和/或OS的特定实施方式的组件的动画框架。在一些实例中，软件模块106可以是管理各种应用UI的信息显示的库、OS组件和/或OS实施方式组件。可替换地，软件模块106可以处理特定应用的信息显示，和/或可以是应用的组件。模块106可以包括处理UI从初始UI状态110到最终UI状态112的转换118的一个或多个转换管理模块108。可替换地，模块106本身可以处理转换118。
初始UI状态110和最终UI状态112可以由(多个)模块108和/或106确定。初始UI状态110是在转换开始时(例如，紧接在转换之前)的UI的状态，并且最终UI状态112是在转换结束时(例如，紧接在转换之后)的UI的状态。UI的状态(诸如初始状态、最终状态或任何中间状态)可以包括任何合适布置的任何合适数量的图形元素，其中每个图形元素在其外观上具有特定的一组特征。外观特征可以包括但不限于以下中的一个或多个：以X和Y坐标或一些其它坐标系表示的、UI内的元素的位置，指示深度或堆叠水平、和/或元素是否在其它元素的后面和/或上面的元素的Z-级别，诸如长度、宽度和/或其它尺寸的元素的大小，元素相对于某个合适的参考轴的方向，指示元素的透明度或不透明度的元素的不透明度，根据任何合适的调色板或颜色模型描述的元素的颜色，和/或元素的填充图案(例如，交叉阴影线等)。
在一些实施方式中，采用定时函数114和转换持续时间116来确定在从初始UI状态110到最终UI状态112的转换期间各种元素将被动画化的特定方式。转换持续时间116是从开始时间(例如，当UI处于其初始UI状态时)到结束时间(例如，当UI处于其最终UI状态时)完成转换的时间量。如上所述，定时函数是时间的函数，p＝F(t)，其中p指示元素在从初始状态到最终状态的转换中的进度。定时函数114可以被描绘为二维的曲线，其中X轴是时间，Y轴是进度。例如，定时函数114可以被描绘为从(0,0)到(1,1)的曲线，其示出了转换随着时间的推移的进展。在此示例中，点(0,0)表示转换的开始或第一UI状态，点(1,1)表示在时间t＝1达到第二UI状态时转换的结束。定时函数114还可以被描述为缓动函数(easingfunction)。在特定示例中，定时函数114是立方贝塞尔曲线。可以使用各种曲线或函数中的任何一种来指定转换发生的模式和速率。
在一些实施方式中，定时函数114提供对于观看用户而言看起来更自然、柔和或美观的转换。例如，定时函数114可以指示元素的进展是在转换开始时逐渐开始，稍微加速直到转换中间的某个时间，然后开始减速直到元素在转换结束时缓和到其最终状态，而不是具有突然开始和突然结束的、将使得元素以固定速度机械地从一种状态进展到另一种状态的严格线性函数。因此，当元素停止加速并开始减速时，定时函数可以在转换期间的某个时间呈现至少一个拐点。下面参考图3进一步描述定时函数114的示例。
在一些实施方式中，采用主定时函数来导出用于管理一个或多个不同转换的一个或多个特定定时函数114。主定时函数是可以在其持续时间中未指定、或者可以具有特定(例如，默认)持续时间的定时函数。特定定时函数114可以通过适当地扩展或压缩主定时函数以跨越将用于特定转换的特定持续时间来从主定时函数导出。以这种方式，实施方式可以采用主定时函数来为多个转换提供类似出现的进展，但是这些转换的持续时间可能不同。
(多个)模块108和/或106可以采用定时函数114来确定如何在转换期间逐渐改变每个图形元素的外观。对于共享元素，可以采用整个定时函数来确定每个共享元素从初始UI状态到最终UI状态的外观改变的进展速率。例如，如果共享元素在转换中从一个位置(x1,y1)移动到另一位置(x2,y2)，则由于共享元素从其第一位置移动到其第二位置，因此定时函数可以用于在转换期间的各种时间处内插元素的位置。作为特定示例，如果定时函数指示元素在转换期间的时间t处进行了进展p(例如，在从0到1的比例上)，则内插可以指示元素在时间t处的x位置是x1+(x2-x1)×p，并且在时间t处的元素的y位置是y1+(y2-y1)×p。作为另一示例，如果定时函数p＝F(t)指示在时间t已经达到进度p，则如果共享元素的大小从在初始UI状态中具有尺寸d1改变为在最终UI状态中具有尺寸d2，则内插可以指示在时间t处的元素的尺寸(例如，长度、宽度、半径等)是|d1-d2|×p。
可以以类似的方式确定元素的视觉特性的内插以用于其它类型的视觉特性。例如，如果元素要在转换期间改变其方向，则元素可以以基于定时函数确定的速率从其初始方向到其最终方向逐渐旋转。作为另一示例，如果元素要在转换期间改变其不透明度，则元素可以根据定时函数随着时间的推移逐渐呈现为或多或少的不透明。作为另一示例，如果元素要在转换期间改变其颜色，则可以根据由定时函数指示的改变速率来确定元素从其初始颜色(例如，RGB)值到其最终颜色值的进展。在一些实例中，可以在转换期间同时改变元素的多个外观特性，并且可以通过基于相同定时函数的内插来逐渐改变每个外观特性。
在一些实施方式中，可以将转换持续时间内的特定时间指定为拐点时间。在一些实施方式中，拐点时间是定时函数的峰值速度(例如，最大一阶导数)的时间，或者在峰值速度的时间的阈值时间段内。可以基于拐点时间将定时函数划分为第一子部分和第二子部分。第一子部分可以是定时函数的从转换的开始时间到拐点时间的部分，并且第二子部分可以是定时函数的从拐点时间到转换的结束时间的部分。第一子部分可以用于使用与上述类似的内插来控制传出元素的转换。拐点可以将整个转换持续时间划分成两个部分或时段，这两个部分或时段也被称为子部分。
例如，在转换开始时，传出元素以其在初始UI状态中的初始外观存在于UI中，并且根据基于第一子部分的内插在外观上逐渐改变，直到传出元素在拐点时间处从UI中消失。类似地，第二子部分可以用于控制传入元素的转换。在拐点时间处，传入元素开始出现在UI内，并且根据基于第二子部分的内插逐渐改变外观，直到传入元素达到其在最终UI状态中的最终外观。因此，在一些实施方式中，传入元素和传出元素都不能在拐点时间处在UI中呈现。以这种方式，两个UI状态之间的整体转换可以被划分为两个不同的部分或时段，其中对传出元素的改变是在第一部分期间进行的，对传入元素的改变是在第二部分期间进行的。运动模式或其它改变遵循由定时函数的相应分段定义的进展。例如，拐点可以基本上将定时函数分割成分别用于转换的不同方面的两条曲线。无论在拐点处的定时函数曲线的值如何，将第一子部分的结束处的定时函数曲线的值定义为表示100％的传出元素移除进展和0％的传入元素添加进展。
在一些实例中，UI可以呈现不适合逐渐改变的元素(诸如呈现在转换期间改变的文本的元素、在转换期间改变行和/或列的数量的表格或网格元素等)。这样的元素被描述为快速转换元素。在一些实施方式中，快速转换元素在拐点时间处在外观上从其初始状态改变为其最终状态。静态元素可以在整个转换期间保持相同外观，并且因此可以不基于定时函数进行改变。
通过使用定时函数来驱动转换UI中的各种图形元素的转换，实施方式避免了对应用内的各种可能转换的单独设计的预定转换动画的需要。实施方式在应用内提供动态生成的UI转换，其中响应于接收到需要这种转换的指示，在应用的运行期间(例如，在运行时间处)确定转换。例如，用户可能正在查看用户设备104上的应用，并且用户可以执行提示应用从一个状态转换到另一状态的动作。作为特定示例，用户可以选择(例如，点击、手势操作)控件以请求应用通过不同地呈现的元素和/或不同的元素来呈现与当前呈现的视图不同的视图。响应于用户选择，应用可以启动从当前视图到新视图的转换，并且可以响应于用户选择并基于如本文所述的定时函数动态地确定转换将被动画化的特定方式。
在一些实施方式中，移除传出元素时的转换的第一时段可以与添加传入元素时的第二时段重叠。例如，可以定义不同的开始和停止时间，而不是使用单个拐点来定义两个时段。例如，如果时间1表示完整的转换持续时间，则第一时段可以在[0,0.75]的时段内发生，而第二时段可以在[0.25,1]的时段内发生。因此，为了实现期望的视觉效果，转换的第一和第二时段可以部分或完全重叠。
对于在两个UI状态之间移动或改变外观的共享元素，可以根据若干选项之一发生改变。例如，共享元素的外观改变可以在转换的整个持续时间期间逐渐发生。作为另一示例，共享元素的改变可以仅在第一时段期间与传出元素的改变一起发生。作为另一示例，共享元素的改变可以仅在第二时段期间与传入元素的改变一起发生。作为另一示例，转换可以被划分为三个时段，诸如发生传出元素的改变的第一时段、改变共享元素的第二时段、以及添加传入元素的第三时段。时段可以是不重叠的，或者可以是重叠的。对于改变共享元素的这些不同方式中的任何一种，运动模式遵循定时函数的相应部分的定时，例如，如果改变发生在整个转换持续时间的前半部分，则改变的从0％到100％的进展按照定时函数的前半部分的指定发生。
图2描绘了从初始状态110转换到最终状态112的UI的示例200。在该示例中，UI呈现两个共享元素202(1)和202(2)、传出元素204和传入元素206。共享元素202(1)和202(2)在整个转换期间存在，并且在初始UI状态110和最终UI状态112之间改变外观。在该示例中，共享元素202(1)改变其位置，共享元素202(2)改变其大小(例如，长度和宽度尺寸)。传出元素204呈现于初始UI状态110中，并且不呈现于最终UI状态112中。传入元素206不呈现于初始UI状态110中，并且呈现于最终UI状态112中。
图3描绘了用于动态生成界面转换的定时函数114的示例300。如上所述，要在转换中使用的定时函数114可以跨越从开始时间到结束时间的转换持续时间116。定时函数114可以针对持续时间期间的每个时间指示转换在那个时间已经达到的进度。在定时函数114内识别拐点时间302，并将拐点时间302用作终止传出元素的转换并开始传入元素的转换的特定时间。第一子部分304是定时函数114的从开始时间到拐点时间302的部分，并且第二子部分306是定时函数114的从拐点时间302到结束时间的部分。如上所述，第一子部分304和第二子部分306分别驱动传出元素和传入元素的逐渐改变。在一些实施方式中，(例如，作为缓动函数的)定时函数114不是线性的，并且可以包括加速和减速的时段以为UI转换提供更自然的感觉。因此，定时函数114可以提供从线性时间进展到非线性速率转换进展的映射。
图3还示出了定时函数114的图形化一阶导数(例如，时间导数)的示例308，其中速度是进展随时间改变的速率。在该示例中，拐点时间302是定时函数114的峰值速度的时间，诸如定时函数114的一阶导数的局部最大值或全局最大值。可替换地，拐点时间302可以近似为峰值速度的时间和/或在峰值速度的时间的阈值时间段内。也可以使用定时函数114的时间跨度内的其它合适的拐点时间302。在一些实施方式中，定时函数114在定时函数的整个跨度上是单调的或非递减的，这可以向UI转换的观看者提供更大一致性的感觉。
图4描绘了UI转换的示例400。在该示例中，图2的示例中示出的UI从初始UI状态转换到最终UI状态，并且根据图3所示的示例定时函数114执行转换。在转换的开始时间T1，UI处于其具有UI外观402(1)的初始UI状态。在随后的时间T2，UI已经开始其转换并且展现外观402(2)，其中一个共享元素(例如，圆圈)已经开始朝着其最终位置移动，第二共享元素(例如，边界框)已经开始朝着其最终大小增大大小，并且传出元素(例如，单个矩形)已经开始变得更加透明以从UI中淡出。在随后的时间T3(例如，拐点时间)，UI展现外观402(3)，其中传出元素已经消失，并且共享元素已经在它们各自的转换中进展。在随后的时间T4，UI展现外观402(4)，其中共享元素在它们各自的转换中更远，并且传入元素(例如，多矩形元素)已经开始进入视野。在结束时间T5，UI在其最终UI状态中展现外观402(5)，其中共享元素和传入元素处于其最终状态。
实施方式支持使用各种外观改变，这些外观改变使得传入元素逐渐出现在UI中，并且使得传出元素逐渐从UI中消失。在一些实例中，元素可以通过不透明度的改变来进入UI或离开UI，其中不透明度的改变使得传入元素开始时完全透明并逐渐变得较不透明并且使得传出元素开始时完全不透明并逐渐变得较透明。在一些实例中，元素可以通过大小的改变来进入UI或离开UI，其中大小的改变使得传入元素以零尺寸开始并逐渐增长到其最终大小并且使得传出元素以全大小开始并逐渐缩小到零尺寸。在一些实例中，元素可以通过位置的改变来进入UI或离开UI，其中位置的改变使得传入元素在显示器外部的位置处(例如，在屏幕外)开始并逐渐移动到它们的最终位置并且使得传出元素在显示中的初始位置开始并逐渐移出视图。其它技术也可以用于引入传入元素或移除传出元素。
图5描绘了根据本文描述的实施方式的用于界面转换的动态生成和运行的示例过程的流程图500。该过程的操作可以由软件模块106、(多个)转换管理模块108或在用户设备104或其它地方运行的其它(多个)软件模块中的一个或多个来执行。
接收要在UI中执行的从初始UI状态到最终UI状态的转换的指示(502)。为转换确定定时函数和转换持续时间(504)。在一些实施方式中，如上所述，通过调整主定时函数以跨越所确定的转换持续时间来从主定时函数导出定时函数。还可以确定定时函数的拐点时间(506)。在一些实施方式中，基于定时函数计算拐点时间(例如，作为定时函数的一阶导数是最大值的时间)。在一些实施方式中，(例如，利用定时函数和持续时间)接收拐点时间作为对过程的输入。
如上所述，可以应用定时函数(508)来驱动共享元素的转换，以确定在转换期间它们逐渐改变的外观。如上所述，可以应用定时函数的第一子部分来驱动传出元素的转换(510)，并且可以应用定时函数的第二子部分来驱动传入元素的转换(512)。如上所述，转换还可以包括在拐点时间处改变任何快速转换元素的外观(514)。在一些实施方式中，共享元素的逐渐改变可以与传出元素的逐渐改变、快速转换元素的改变以及传入元素的逐渐改变并行地执行。
在一些实施方式中，本文中描述的转换的动态生成和运行可以用于以下应用中：在设计应用时未针对该应用预先确定可能的转换、使得用于单独设计每个转换的传统方法可能不可用的应用。例如，动态自适应应用可以被设计为组件(例如，可插入组件)的组成集合，其可以在运行时间(例如，在应用启动时和/或在运行期间)动态地添加到应用或从应用移除。因此，应用的运行组件之间的可能的转换在应用运行前可能是未知的，并且可以通过本文描述的实施方式在运行时间动态地确定和管理。使用本文描述的实施方式，应用可以适配于处理可以在运行中改变的不同配置，并且应用的开发人员可以使用稀疏表示来表示UI，而无需单独设计每个可能的转换。实施方式还便于可以在具有用于可用显示空间的不同形状因子的各种类型的计算设备上运行的应用中的UI转换。使用本文描述的实施方式，UI转换容易且动态地适应不同的显示器大小和比例。
尽管本文的示例描述了使用定时函数来处理涉及共享元素、传入元素、传出元素和快速转换元素的UI转换，但是实施方式不需要存在这些类型的元素中的每一个。例如，在一些实例中，转换可以涉及传入元素和/或传出元素，但可以不涉及共享元素。在这样的实例中，即使整个定时函数未被用于确定任何共享元素的转换，也可以采用定时函数的子部分来驱动传入和传出转换。
在一些实施方式中，用于转换的定时函数是从主定时函数导出的，该主定时函数可以类似地应用于应用、一组应用内或一般计算环境内的多个转换。每个元素的转换可以在转换持续时间内被限制(bound)，其中共享元素在整个持续时间内转换，并且传出元素和传入元素分别在第一子部分和第二子部分期间转换。在一些实施方式中，可以通过使用(例如，由开发人员)为转换指定的一组参数来改变各种元素的转换的定时。这样的(多个)参数也可以描述为参数包装器。(多个)参数可以指示某些元素转换的开始、结束或进展速率将在定时上变化(例如，交错)。此外，在一些实施方式中，参数可以改变用于不同应用的主定时函数，以向一些转换添加进一步的细节和/或细微差别。例如，(多个)参数可以包括主定时函数的系数，以为转换提供定制的附加程度。
本说明书中描述的本发明的实施例和所有功能操作可以在数字电子电路或者计算机软件、固件或硬件中实施，包括本说明书中公开的结构及其结构等同物、或者它们中一个或多个的组合。本发明的实施例可以实施为用于由数据处理装置运行或者用于控制数据处理装置的操作的一个或多个计算机程序产品，即，在计算机可读介质上编码的一个或多个计算机程序指令模块。计算机可读介质可以是非暂时性计算机可读存储介质、机器可读存储设备、机器可读存储基板、存储器设备、影响机器可读传播信号的物质的组合、或者它们中的一个或多个的组合。术语“数据处理装置”包括用于处理数据的所有装置、设备和机器，包括例如可编程处理器、计算机或多个处理器或计算机。除了硬件之外，该装置还可以包括为所讨论的计算机程序创建运行环境的代码，例如，组成处理器固件、协议栈、数据库管理系统、操作系统、或者它们中的一个或多个的组合的代码。传播信号是人工生成的信号，例如，生成以对信息进行编码以便传输到合适的接收器装置的、机器生成的电、光或电磁信号。
计算机程序(也被称为程序、软件、软件应用、脚本或代码)可以以包括编译或解释语言的任何形式的编程语言编写，并且可以以包括以独立程序或者以适合在计算环境中使用的模块、组件、子例程或其它单元的任何形式部署。计算机程序不一定对应于文件系统中的文件。程序可以存储在保存其它程序或数据(例如，存储在标记语言文档中的一个或多个脚本)的文件的一部分中，存储在专用于所讨论的程序的单个文件中，或者存储在多个协调文件(例如存储一个或多个模块、子程序或代码的部分的文件)中。可以部署计算机程序以在一个计算机上或在位于一个站点上或分布在多个站点上并通过通信网络互连的多个计算机上运行。
本说明书中描述的过程和逻辑流程可以由运行一个或多个计算机程序的一个或多个可编程处理器执行，以通过对输入数据进行操作并生成输出来执行功能。过程和逻辑流程也可以由专用逻辑电路执行，并且装置也可以实施为专用逻辑电路，例如FPGA(FieldProgrammable Gate Array,现场可编程门阵列)或ASIC(Application SpecificIntegrated Circuit,专用集成电路)。
举例来说，适合于计算机程序的运行的处理器包括通用和专用微处理器两者、以及任何类型的数字计算机的任何一个或多个处理器。通常，处理器将从只读存储器或随机存取存储器或两者接收指令和数据。计算机的基本元素是用于执行指令的处理器和用于存储指令和数据的一个或多个存储器设备。通常，计算机还将包括或可操作地耦合以从用于存储数据的一个或多个大容量存储设备(例如，磁盘、磁光盘或光盘)接收数据或将数据传输到一个或多个大容量存储设备。然而，计算机不需要这样的设备。此外，计算机可以嵌入在另一设备(例如，平板电脑、移动电话、个人数字助理(Personal Digital Assistant,PDA)、移动音频播放器、全球定位系统(Global Positioning System,GPS)接收器，仅举几例)中。适用于存储计算机程序指令和数据的计算机可读介质包括所有形式的非易失性存储器、介质和存储器设备，包括例如半导体存储器设备(例如，EPROM、EEPROM和闪存设备)、磁盘(例如，内部硬盘或可移动磁盘)、磁光盘以及CD ROM和DVD-ROM磁盘。处理器和存储器可以由专用逻辑电路补充或并入专用逻辑电路中。
为了提供与用户的交互，本发明的实施例可以在具有用于向用户显示信息的显示设备(例如，CRT(Cathode Ray Tube，阴极射线管)或LCD(Liquid Crystal Display，液晶显示器)监视器)、用户可以通过其向计算机提供输入的键盘和指示设备(例如，鼠标或轨迹球)的计算机上实施。其它类型的设备也可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的感官反馈，例如，视觉反馈、听觉反馈或触觉反馈；并且可以以包括声学、语音或触觉输入的任何形式接收来自用户的输入。
本发明的实施例可以在计算系统中实施，该计算系统包括(例如，作为数据服务器的)后端组件，或者包括中间件组件(例如，应用服务器)，或者包括前端组件(例如，具有用户可以通过其与本发明的实施方式交互的图形用户界面或网络浏览器的客户端计算机)，或者包括一个或多个这样的后端组件、中间组件或前端组件的任何组合。系统的组件可以通过任何形式或介质的数字数据通信(例如，通信网络)互连。通信网络的示例包括局域网(Local Area Network，“LAN”)和广域网(Wide Area Network，“WAN”)(例如，因特网)。
计算系统可以包括客户端和服务器。客户端和服务器通常彼此远离，并且典型地通过通信网络交互。客户端和服务器的关系借助于在各自的计算机上运行并且彼此具有客户端-服务器关系的计算机程序产生。
虽然本说明书包含许多细节，但这些细节不应被解释为对本发明或可以要求保护的范围的限制，而是作为对本发明特定实施例的特定特征的描述。在单独实施例的上下文中在本说明书中描述的某些特征也可以在单个实施例中组合实施。相反，在单个实施例的上下文中描述的各种特征也可以单独地或以任何合适的子组合在多个实施例中实施。此外，尽管在上面特征可以被描述为以某些组合起作用并且甚至最初如此声明，但是在某些情况下可以从组合中切除来自所要求保护的组合的一个或多个特征，并且所要求保护的组合可以针对子组合或子组合的变化。
类似地，虽然在附图中以特定顺序描绘了操作，但是这不应该被理解为为了实现期望的结果要求以所示的特定顺序或按顺序次序执行这样的操作或者执行所有示出的操作。在某些情况下，多任务处理和并行处理可能是有利的。此外，上述实施例中的各种系统组件的分离不应被理解为在所有实施例中都要求这种分离，并且应该理解，描述的程序组件和系统通常可以一起集成在单个软件产品中或打包成多个软件产品。
因此，已经描述了本发明的特定实施例。其它实施例在以下权利要求的范围内。例如，权利要求中记载的动作可以以不同的顺序执行并且仍然实现期望的结果。

Claims (20)

1.一种由计算设备执行的方法，所述方法包括：
由计算设备接收用于执行用户界面(UI)从第一UI状态到第二UI状态的转换的指示；
由计算设备识别(i)图形元素中的在第一UI状态中呈现并且不在第二UI状态中呈现的至少一个传出元素、以及(ii)图形元素中的在第二UI状态中呈现并且不在第一UI状态中呈现的至少一个传入元素；
由计算设备确定从第一UI状态到第二UI状态的转换的转换持续时间；
由计算设备根据定时函数来改变UI的外观以在转换持续时间内从第一UI状态转换到第二UI状态，其中所述定时函数指定在转换过程中不同的外观改变速率，其中UI的外观通过以下方式改变：
在转换持续时间的第一部分期间改变所述至少一个传出元素的外观以从UI移除所述至少一个传出元素，其中所述至少一个传出元素的外观以由定时函数指定的、变化的改变速率来改变；以及
在转换持续时间的第二部分期间改变所述至少一个传入元素的外观以将所述至少一个传入元素添加到UI，其中所述至少一个传入元素的外观以由定时函数指定的、变化的改变速率来改变。
2.如权利要求1所述的方法，还包括：
由计算设备确定用于控制UI中的多个转换的主定时函数；以及
由计算设备通过调整主定时函数以跨越转换持续时间来导出用于转换的定时函数。
3.如权利要求1或2所述的方法，还包括：
由计算装置确定拐点时间，所述拐点时间在所述定时函数指定的最大改变速率的时间的阈值范围内；以及
由计算装置将转换持续时间划分成所述第一部分和所述第二部分，使得(i)所述第一部分从转换持续时间的开始延伸到拐点时间、并且(ii)第二时段从拐点时间延伸到转换持续时间的结束。
4.如前述权利要求中任一项所述的方法，其中，在所述转换期间，在相应图形元素的位置、大小、形状、Z-级别、方向、不透明度、颜色或阴影的一个或多个中改变所述至少一个传出元素和所述至少一个传入元素的外观。
5.如前述任一项权利要求所述的方法，其中：
逐渐改变所述至少一个传出元素的外观包括将所述至少一个传出元素的不透明度从初始UI状态中的完全不透明逐渐改变为拐点时间处的完全透明；并且
逐渐改变所述至少一个传入元素的外观包括将所述至少一个传入元素的不透明度从拐点时间处的完全透明逐渐改变为最终UI状态中的完全不透明。
6.如前述任一项权利要求所述的方法，其中：
逐渐改变所述至少一个传出元素的外观包括将所述至少一个传出元素的大小从初始UI状态中的初始大小逐渐改变为拐点时间处的零大小；并且
逐渐改变所述至少一个传入元素的外观包括将所述至少一个传入元素的大小从拐点时间处的零大小逐渐改变为最终UI状态中的最终大小。
7.如前述任一项权利要求所述的方法，还包括：
由计算设备识别图形元素中的至少一个快速转换元素在外观上不是逐渐可变的；以及
由计算设备改变所述至少一个快速转换元素的外观，以在根据定时函数定义的特定时间从初始UI状态中的相应初始外观改变为最终UI状态中的相应最终外观。
8.如前述任一项权利要求所述的方法，还包括：
由计算设备识别图形元素中的在初始UI状态和最终UI状态两者中都呈现的至少一个共享元素；以及
由计算设备将所述至少一个共享元素的外观从初始UI状态中的相应初始外观逐渐改变为最终UI状态中的相应最终外观，其中所述至少一个共享元素的外观的逐渐改变是响应于所接收的指示根据定时函数动态确定的。
9.如权利要求8所述的方法，其中，逐渐改变所述至少一个共享元素的外观包括：以在转换期间根据所述定时函数变化的速度将每个共享元素从初始位置移动到最终位置。
10.如权利要求8或9所述的方法，其中，逐渐改变所述至少一个共享元素的外观包括：以在转换期间根据所述定时函数变化的大小改变速率将每个共享元素的大小从初始大小改变为最终大小。
11.如权利要求8至10中任一项所述的方法，其中，逐渐改变所述至少一个共享元素的外观包括：以在转换期间根据所述定时函数变化的旋转速率将每个共享元素从初始方向旋转到最终方向。
12.如权利要求8至11中任一项所述的方法，其中逐渐改变所述至少一个共享元素的外观包括：以在转换期间根据所述定时函数变化的颜色改变速率将每个共享元素的颜色从初始颜色改变为最终颜色。
13.如前述任一项权利要求所述的方法，还包括：
由计算设备访问定义单调增加的曲线的主定时函数的数据；以及
由计算设备通过缩放曲线以遍布整个转换持续时间来导出用于转换的定时函数；
其中改变所述至少一个传出元素的外观以移除所述至少一个传出元素包括：利用由缩放后的曲线的第一部分定义的定时模式来改变所述至少一个传出元素的外观；并且
其中改变所述至少一个传出元素的外观以移除所述至少一个传出元素包括：利用由缩放后的曲线的第二部分定义的定时模式来改变所述至少一个传出元素的外观。
14.一种系统，包括：
至少一个处理器；和
存储器，其通信地耦合到所述至少一个处理器，所述存储器存储指令，所述指令在由所述至少一个处理器运行时使所述至少一个处理器执行包括以下各项的操作：
接收用于执行用户界面(UI)从第一UI状态到第二UI状态的转换的指示；
识别(i)图形元素中的在第一UI状态中呈现并且不在第二UI状态中呈现的至少一个传出元素、以及(ii)图形元素中的在第二UI状态中呈现并且不在第一UI状态中呈现的至少一个传入元素；
确定从第一UI状态到第二UI状态的转换的转换持续时间；
根据定时函数来改变UI的外观以在转换持续时间内从第一UI状态转换到第二UI状态，其中所述定时函数指定在转换过程中的不同的外观改变速率，其中UI的外观通过以下方式改变：
在转换持续时间的第一部分期间改变所述至少一个传出元素的外观以从UI移除所述至少一个传出元素，其中所述至少一个传出元素的外观以由定时函数指定的、变化的改变速率来改变；并且
在转换持续时间的第二部分期间改变所述至少一个传出元素的外观以将所述至少一个传入元素添加到UI，其中所述至少一个传入元素的外观以由定时函数指定的、变化的改变速率来改变。
15.如权利要求14所述的系统，所述操作还包括：
确定用于控制UI中的多个转换的主定时函数；以及
通过调整主定时函数以跨越转换持续时间来导出用于转换的定时函数。
16.如权利要求14或15所述的系统，所述操作还包括：
确定拐点时间，所述拐点时间在由定时函数指定的最大改变速率的时间的阈值范围内；以及
将转换持续时间划分成所述第一部分和所述第二部分，使得(i)第一部分从转换持续时间的开始延伸到拐点时间、并且(ii)第二时段从拐点时间延伸到转换持续时间的结束。
17.如权利要求14、15或16所述的系统，其中，在所述转换期间，在相应图形元素的位置、大小、形状、Z-级别、方向、不透明度、颜色或阴影的一个或多个中改变所述至少一个传出元素和所述至少一个传入元素的外观。
18.如权利要求14至17中任一项所述的系统，所述操作还包括：
识别图形元素中的在初始UI状态和最终UI状态两者中都呈现的至少一个共享元素；以及
将所述至少一个共享元素的外观从初始UI状态中的相应初始外观逐渐改变为最终UI状态中的相应最终外观，其中所述至少一个共享元素的外观的逐渐改变是响应于所接收的指示根据定时函数动态确定的。
19.如权利要求14至18中任一项所述的系统，所述操作还包括：
访问用于定义单调增加的曲线的主定时函数的数据；以及
通过缩放曲线以遍布整个转换持续时间来导出用于转换的定时函数；
其中改变所述至少一个传出元素的外观以移除所述至少一个传出元素包括：利用由缩放后的曲线的第一部分定义的定时模式改变所述至少一个传出元素的外观；并且
其中改变所述至少一个传出元素的外观以移除所述至少一个传出元素包括：利用由缩放后的曲线的第二部分定义的定时模式来改变所述至少一个传出元素的外观。
20.一种计算机可读存储设备，其存储有指令，所述指令在由一个或多个处理器运行时使所述一个或多个处理器执行包括以下各项的操作：
接收用于执行用户界面(UI)从第一UI状态到第二UI状态的转换的指示；
识别(i)图形元素中的在第一UI状态中呈现并且不在第二UI状态中呈现的至少一个传出元素、以及(ii)图形元素中的在第二UI状态中呈现并且不在第一UI状态中呈现的至少一个传入元素；
确定从第一UI状态到第二UI状态的转换的转换持续时间；
根据定时函数来改变UI的外观以在转换持续时间内从第一UI状态转换到第二UI状态，其中所述定时函数指定在转换过程中的不同的外观改变速率，其中UI的外观通过以下方式改变：
在转换持续时间的第一部分期间改变所述至少一个传出元素的外观以从UI移除所述至少一个传出元素，其中所述至少一个传出元素的外观以由定时函数指定的、变化的改变速率来改变；以及
在转换持续时间的第二部分期间改变所述至少一个传出元素的外观以将所述至少一个传入元素添加到UI，其中所述至少一个传入元素的外观以由定时函数指定的、变化的改变速率来改变。
CN201880003769.5A 2017-08-16 2018-08-13 动态生成的界面转换 Pending CN110088718A (zh)

Applications Claiming Priority (3)

Application Number Priority Date Filing Date Title
US15/678,762 2017-08-16
US15/678,762 US10573051B2 (en) 2017-08-16 2017-08-16 Dynamically generated interface transitions
PCT/US2018/046502 WO2019036366A1 (en) 2017-08-16 2018-08-13 INTERFACE TRANSITIONS GENERATED DYNAMICALLY

Publications (1)

Publication Number Publication Date
CN110088718A true CN110088718A (zh) 2019-08-02

Family

ID=63518004

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201880003769.5A Pending CN110088718A (zh) 2017-08-16 2018-08-13 动态生成的界面转换

Country Status (4)

Country Link
US (1) US10573051B2 (zh)
EP (1) EP3500917A1 (zh)
CN (1) CN110088718A (zh)
WO (1) WO2019036366A1 (zh)

Families Citing this family (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2020040749A1 (en) * 2018-08-21 2020-02-27 Google Llc Dynamically generated interface transitions
US11341274B2 (en) 2018-12-19 2022-05-24 Elasticsearch B.V. Methods and systems for access controlled spaces for data analytics and visualization
US10782860B2 (en) * 2019-02-26 2020-09-22 Elasticsearch B.V. Systems and methods for dynamic scaling in graphical user interfaces
US11477207B2 (en) 2019-03-12 2022-10-18 Elasticsearch B.V. Configurable feature level controls for data
EP3719753A1 (en) * 2019-04-02 2020-10-07 Rightware Oy Dynamic transitioning between visual user interface elements on a display
US11240126B2 (en) 2019-04-11 2022-02-01 Elasticsearch B.V. Distributed tracing for application performance monitoring
US10756959B1 (en) 2019-04-11 2020-08-25 Elasticsearch B.V. Integration of application performance monitoring with logs and infrastructure
US11397516B2 (en) 2019-10-24 2022-07-26 Elasticsearch B.V. Systems and method for a customizable layered map for visualizing and analyzing geospatial data
US11537363B2 (en) * 2020-01-31 2022-12-27 Salesforce.Com, Inc. User interface migration using intermediate user interfaces
US11703990B2 (en) 2020-08-17 2023-07-18 Microsoft Technology Licensing, Llc Animated visual cues indicating the availability of associated content
CN113380352B (zh) * 2021-06-24 2023-06-23 湖南创星科技股份有限公司 基于医疗微服务编排中间语言描述方法及系统

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20070153006A1 (en) * 2006-01-04 2007-07-05 Microsoft Corporation Representing animation as a static image on a graphical user interface
CN103034399A (zh) * 2011-12-09 2013-04-10 微软公司 调整用户界面元素
US20130093764A1 (en) * 2011-10-18 2013-04-18 Research In Motion Limited Method of animating a rearrangement of ui elements on a display screen of an electronic device
WO2016036776A1 (en) * 2014-09-04 2016-03-10 Microsoft Technology Licensing, Llc User interface with dynamic transition times
US20160170945A1 (en) * 2014-12-16 2016-06-16 Kabushiki Kaisha Toshiba Information processing device, information processing method, and computer program product

Family Cites Families (24)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US6396500B1 (en) * 1999-03-18 2002-05-28 Microsoft Corporation Method and system for generating and displaying a slide show with animations and transitions in a browser
US20060129933A1 (en) * 2000-12-19 2006-06-15 Sparkpoint Software, Inc. System and method for multimedia authoring and playback
GB2378342A (en) * 2001-07-31 2003-02-05 Hewlett Packard Co Selecting images based upon the similarity between images
EP1607845A1 (en) * 2004-06-18 2005-12-21 Sony Ericsson Mobile Communications AB Method and apparatus for transitions in a user interface
US7477254B2 (en) * 2005-07-13 2009-01-13 Microsoft Corporation Smooth transitions between animations
US7692658B2 (en) * 2006-11-17 2010-04-06 Microsoft Corporation Model for layout animations
US20090096812A1 (en) * 2007-10-12 2009-04-16 Business Objects, S.A. Apparatus and method for morphing data visualizations
US20090172549A1 (en) * 2007-12-28 2009-07-02 Motorola, Inc. Method and apparatus for transitioning between screen presentations on a display of an electronic device
US8314801B2 (en) * 2008-02-29 2012-11-20 Microsoft Corporation Visual state manager for control skinning
US8234564B2 (en) * 2008-03-04 2012-07-31 Apple Inc. Transforms and animations of web-based content
US7721209B2 (en) * 2008-09-08 2010-05-18 Apple Inc. Object-aware transitions
US9298336B2 (en) 2009-05-28 2016-03-29 Apple Inc. Rotation smoothing of a user interface
US8650501B2 (en) 2010-03-10 2014-02-11 Microsoft Corporation User interface with preview transitions
US20130127877A1 (en) 2011-02-28 2013-05-23 Joaquin Cruz Blas, JR. Parameterizing Animation Timelines
US8982132B2 (en) 2011-02-28 2015-03-17 Adobe Systems Incorporated Value templates in animation timelines
US9235317B2 (en) 2012-02-01 2016-01-12 Facebook, Inc. Summary and navigation of hierarchical levels
US9619912B2 (en) * 2012-03-02 2017-04-11 Verizon Patent And Licensing Inc. Animated transition from an application window to another application window
US8471857B1 (en) * 2012-04-12 2013-06-25 Google Inc. Changing animation displayed to user
JP6002836B2 (ja) * 2012-05-09 2016-10-05 アップル インコーポレイテッド ジェスチャに応答して表示状態間を遷移するためのデバイス、方法、及びグラフィカルユーザインタフェース
US20140028701A1 (en) 2012-07-24 2014-01-30 Research In Motion Limited Modifying transition sequences in a user interface depending on frequency of use
US20140111523A1 (en) * 2012-10-22 2014-04-24 Google Inc. Variable length animations based on user inputs
US8797330B1 (en) * 2013-10-18 2014-08-05 Google Inc. Systems and methods for detecting and animating changes in application state
US20150143260A1 (en) 2013-11-18 2015-05-21 Facebook, Inc. State-Machine-Driven User-Interface Interactions
US20180188898A1 (en) * 2016-12-29 2018-07-05 Intel Corporation User interfaces with semantic time anchors

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20070153006A1 (en) * 2006-01-04 2007-07-05 Microsoft Corporation Representing animation as a static image on a graphical user interface
US20130093764A1 (en) * 2011-10-18 2013-04-18 Research In Motion Limited Method of animating a rearrangement of ui elements on a display screen of an electronic device
CN103034399A (zh) * 2011-12-09 2013-04-10 微软公司 调整用户界面元素
WO2016036776A1 (en) * 2014-09-04 2016-03-10 Microsoft Technology Licensing, Llc User interface with dynamic transition times
US20160170945A1 (en) * 2014-12-16 2016-06-16 Kabushiki Kaisha Toshiba Information processing device, information processing method, and computer program product

Also Published As

Publication number Publication date
US20190057534A1 (en) 2019-02-21
US10573051B2 (en) 2020-02-25
WO2019036366A1 (en) 2019-02-21
EP3500917A1 (en) 2019-06-26

Similar Documents

Publication Publication Date Title
CN110088718A (zh) 动态生成的界面转换
US10656820B2 (en) Snap points including ranges
US10971112B2 (en) Dynamically-themed display utilizing physical ambient conditions
TWI374385B (en) Method and system applying dynamic window anatomy and computer readable storage medium storing dynamic window anatomy
CN103530018B (zh) 安卓操作系统中微件界面的建立方法及移动终端
US20100235769A1 (en) Smooth layout animation of continuous and non-continuous properties
US11488340B2 (en) Configurable stylized transitions between user interface element states
US10083525B2 (en) Multi-dimensional color and opacity gradation tools, systems, methods and components
US20200264749A1 (en) Styling system
US20230116393A1 (en) Dynamically generated interface transitions
US20160030839A1 (en) Modifying a simulated character by direct manipulation
CN104503663A (zh) 一种3d人机交互桌面系统
EP3189424B1 (en) Pre-children in a user interface tree
KR102092156B1 (ko) 표시 장치의 영상 인코딩 방법
CN116310039A (zh) 模型渲染方法、装置以及电子装置
CN116661785A (zh) 基于iOS的进度条实现方法、装置、电子设备及存储介质
CN116974678A (zh) 基于页面的视图控制器跳转方法、装置及存储介质
CN117649460A (zh) 蒙版操作方法及其设备、存储介质、终端
CN116912388A (zh) 贴图处理方法、装置、计算机可读存储介质和电子装置
Svärdström Different screen sizes on iPhoneand iPad effect the user experience

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication

Application publication date: 20190802

RJ01 Rejection of invention patent application after publication