CN110457090A - 图形用户界面中呈现的图形元素的压缩转变 - Google Patents

Abstract

方法、系统和包括编码在计算机存储介质上的计算机程序的装置，用于：识别包括容器的图形用户界面，所述容器具有第一子元素和第二子元素；提供用于在第一状态下在所述图形用户界面上进行显示的所述容器，所述第一状态包括显示所述第一子元素但不显示所述第二子元素；向所述容器应用转变以实行所述容器从所述第一状态到第二状态的状态改变，所述第二状态包括显示所述第二子元素但不显示所述第一子元素，应用所述转变包括在向所述容器应用转变期间向所述容器应用淡入淡出以使所述第一子元素图形地渐变到所述第二子元素；以及在应用所述转变之后，提供用于在所述第二状态下在所述图形用户界面上进行显示的所述容器。

Description

图形用户界面中呈现的图形元素的压缩转变

技术领域

本说明书涉及图形用户界面中呈现的图形元素的转变。

背景技术

通常，当用户与网页或应用交互时，图形用户界面能够呈现图形元素之间的转变。也就是说，可以将图形元素的呈现调整(在图形上动画化)为图形元素的不同的呈现。这样的呈现之间的平滑转变提供了用户体验的舒适性以帮助用户理解图形元素之间的语义关系，这使得软件更容易使用。

图形元素在图形用户界面上的转变的设计和实现具有难度并且耗时。在低端硬件上转变通常以低帧率渲染，造成迟缓且未经润饰的用户体验。

发明内容

本说明书中描述的主题的创新性方面可以体现在包括以下动作的方法中：识别包括容器的图形用户界面，所述容器具有第一子元素和第二子元素；提供在第一状态下在所述图形用户界面上进行显示的所述容器，所述第一状态包括显示所述第一子元素但不显示所述第二子元素；向所述容器应用转变以在所述容器在所述图形用户界面内移动时实行所述容器从所述第一状态到第二状态的状态改变，所述第二状态包括显示所述第二子元素但不显示所述第一子元素，应用所述转变包括当所述容器在所述图形用户界面内移动时向所述容器应用淡入淡出以使所述第一子元素图形地渐变到所述第二子元素；以及在应用所述转变之后，提供用于在所述第二状态下在所述图形用户界面内进行显示的所述容器。

这些方面的其他实施例包括对应的系统、装置和配置为执行方法的动作的编码在计算机存储设备上的计算机程序。

这些和其他实施例均可以可选地包括一个或多个下述特征。例如，向所述容器应用淡入淡出以使所述第一子元素图形地渐变到所述第二子元素包括：调整所述第一子元素和所述第二子元素的不透明度。调整所述第一子元素和所述第二子元素的不透明度包括：在应用淡入淡出期间减小所述第一子元素的不透明度而同时增加所述第二子元素的不透明度。向所述容器应用转变包括：使所述容器保持在所述第一状态中同时减小所述第一子元素的不透明度。向所述容器应用转变包括：使所述容器保持在所述第二状态中同时增加所述第二子元素的不透明度。由所述容器中的相应帧表示每个子元素，并且其中，向所述容器应用转变包括：通过改变帧的不透明度，使用在所述第二状态中的所述容器中的帧取代在所述第一状态中的所述容器中的帧。

本说明书中描述的主题的特定实现方式可以被实现为实现一个或多个下述优点。例如，所述主题的实现方式通过减少被渲染而用于显示在交互式界面(例如网页)中呈现的图形元素之间的转变的帧的数量而使得高效利用计算机资源。通过减少对这样的动画序列的渲染，减少了计算机资源而同时提供相似的用户体验。特别地，通过提供压缩转变，动画被更快且更简单地提供，同时保持直接转变的视觉相似性——同时还减少使用计算资源。更特别地，使用压缩转变不需要任何处理来确定来自第一状态的每个用户界面元素如何与第二状态中的第二用户界面元素相关，因为使用压缩转变消除了修改第一状态的用户界面元素以达成第二状态的需要。而是，压缩转变的状态彼此独立，原因是第一状态淡出，随后第二状态淡入。这种渐变在容器在用户界面内移动时发生，从而产生与直接转变的视觉效果相似的视觉效果。换言之，容器移动的速度与淡入淡出组合产生与直接转变相同(或相似)地被感知的显示。此外，由于减少了渲染量，所以改善了例如由具有有限计算机资源的移动计算设备对这样的压缩转变的渲染。另外，在一些情景中，使用压缩转变可以消除执行用于生成使来自第一状态的用户界面元素变形到第二状态的用户界面元素的大量帧的插值技术的需要。压缩转变还能够使得任何两个状态之间的转变独立于每个状态中包括什么用户界面元素，因为两个状态之间的转变独立于在每个状态中呈现什么用户界面元素而执行。另外，减少执行转变所需的工作量提高了帧率，这通过使得元素更平滑地移动来改善用户体验。

本说明书中描述的主题的一个或多个实施例的细节在附图和下面的说明书中阐述。根据说明书、附图和权利要求书，所述主题的其他潜在特征、方面和优点将变得明了。

附图说明

图1描绘了用于提供图形用户界面(GUI)的图形元素的压缩转变的系统。

图2描绘了在第一状态下的GUI的容器。

图3描绘了在第二状态下的GUI的容器。

图4是容器的子元素之间转变的图形描绘。

图5是容器的子元素之间的压缩转变的图形描绘。

图6是容器的子元素之间的淡入淡出转变的图形描绘。

图7是提供GUI的图形元素的压缩转变的示例过程的流程图。

图8描绘了可以用于实现本文描述的技术的示例计算系统。

具体实施方式

根据本文描述的各个方面，提供了以自动化方式实现转变的方法和系统，其消耗较少计算能力和/或提供一致性涉及。

描述了用于提供图形用户界面(GUI)上呈现的图形元素的压缩转变的系统和方法。特别地，GUI可以包括容器，容器包括子元素。取决于容器的状态，子元素的子集被呈现和/或以不同视觉特性(例如，子元素的不透明度)来呈现子元素。子元素可以包括呈现在例如网页上的图形元素。每个子元素均可以与要被呈现的一序列帧关联，并且每个子元素均可以包括帧的子集。在一些示例中，在GUI的初始呈现中，在第一状态下呈现容器，使得第一子元素被呈现以供显示，但不呈现第二子元素。可以向容器应用转变来将容器的状态改变为第二状态。在一些示例中，在GUI的随后呈现中，在第二状态下呈现容器，使得第二子元素被呈现以供显示，但不呈现第一子元素。例如，容器被转换成以期望的顺序显示一序列的帧，以使得在GUI上呈现视觉变换。每个状态均可以包括容器的相应形状和位置以及容器的元素。

在一些可选示例中，可以从所述一序列的帧去除某些帧(例如，相对于使用直接转变)，以使得提供容器的压缩转变以用于在GUI上显示。例如，不需要呈现在所述序列中间的两个子元素之间的会以其他方式变形的帧。消除呈现中间帧的需要使得压缩转变更快且更简单，同时保持与直接转换的相似性。压缩转变在视觉上比较简单并且因此较为容易使软件进行渲染。在一些可选情况中，可以将空白帧插入到一个或多个所述帧原本应当位于的地方。可以将淡入淡出转变应用于容器的压缩转变以将第一子元素(以及与第一子元素关联的帧)图形地渐变为第二子元素(以及与第二子元素关联的帧)。例如，在被去除的帧之前的帧在不透明度上逐渐减小而在被去除的帧之后帧在不透明度上逐渐增大。然后提供容器用于在第二状态下显示——也就是说，显示第二子元素但不显示第一子元素。为此，容器的压缩转变的视觉感知(例如，当由观看被提供用于GUI显示的容器的用户观看时)在视觉上类似于直接转变。如本文进一步所描述，容器从第一状态到第二状态的压缩转变以及容器所包括的子元素的感知的变动类似于容器的直接转变的视觉感知的情况，同时不需要使用直接转变所执行的处理来确定如何可以从第一状态的用户界面元素导出第二状态的每个用户界面元素。

图1描绘了用于提供图形元素的压缩转变的系统100。系统100包括计算设备102，其提供用于显示图形用户界面(GUI)104。计算设备102包括转变模块110和淡入淡出模块114。转变模块110和淡入淡出模块114中的每一个均可以为单独的计算系统，或者可以为计算系统的组合。在一些示例中，转变模块110和淡入淡出模块114中的每一个可以在一组相同的物理硬件中实现。

图形用户界面104包括具有第一子元素122a和第二子元素122b(统称为子元素122)的容器120。在一些示例中，容器120限定子元素122的分组和子元素122之间的关系。可以将变换应用于容器120以调整子元素122的图形属性，这在下面进一步描述。子元素122为可以基于容器120的状态呈现在GUI 104内的图形描绘，这在下面进一步描述。在一些示例中，子元素122是不可知的(agnostic)和/或彼此独立的。在一些示例中，容器120可以包括任意数量的子元素122。

在一些实现方式中，如图2所示，计算设备102设置为用于显示第一状态下的容器120，所述第一状态包括显示第一子元素122a但不显示第二子元素122b。如图所示，第一子元素122a包括菱形状形状的图形描绘；但是，第一子元素122a可以包括任何形状/对象、任何图形描绘或能够在GUI 104上呈现的任何图形元素。在一些示例中，当容器120处于第一状态下时，第二子元素122b被隐藏而不实现，或者以其他方式不可用于呈现在GUI 104内。

在一些实现方式中，计算设备102并且特别是转变模块110向容器120应用转变以实行容器120从第一状态到第二状态的状态改变。在一些示例中，第二状态包括显示第二子元素122b但不显示第一子元素122a。例如，图3示意了容器120包括对第二子元素122b的显示但不显示第一子元素122a。如图所示，第二子元素122b包括圆形形状的图形描绘；但是，第二子元素122b可以包括任何形状/对象、任何图形描绘或能够在GUI 104上呈现的任何图形元素。在一些示例中，当容器120处于第二状态下时，第一子元素122a被隐藏而不显示，或者以其他方式不可用于呈现在GUI 104内。在示意的示例中，计算设备102向容器120应用转变以实行容器120从包括菱形形状的第一子元素122a并且不包括第二子元素122b(第一状态)到包括圆形形状的第二子元素122b并且不包括第一子元素122a(第二状态)的状态改变。

图4示意了在容器120的第一状态和第二状态之间转变的方法。特别地，为了通过计算设备102将转换应用于容器120，计算设备102使用包括在容器120从第一状态到第二状态的转换中的多个帧402。在示意的示例中，多个帧402表示第一子元素122a(菱形形状)到第二子元素122b(圆形形状)的10-帧(直接)转换(动画)。多个帧402表示以特定顺序(例如，从第一帧404到最后帧406)显示的帧的序列。在示意的示例中，以从左向右的顺序显示多个帧402；但是，取决于期望应用多个帧402的任何显示顺序都是可能的。特别地，通过使第一子元素122a变形(例如，使用插值过程的结果)到第二子元素122b，容器120可以从第一状态转变到第二状态——呈现为作为帧402的对象的多个帧402从菱形形状“移动”到圆形形状。

为此，与将容器120从第一状态转变到第二状态的图4的插值过程相比，当容器120在用户界面上移动时，本公开向容器120应用淡入淡出效果，从而产生直接转换的表现，但是不必确定第一状态的用户界面元素和第二状态的用户界面元素之间的关系。这限制和/或消除执行容器120的子元素的变形以及执行变形所需关联插值的需要。如本文进一步所描述，这样的淡入淡出转变可以应用于多个不同的应用场景，包括呈现在网页中的图形元素以及呈现在其他情景中的其他图形元素的淡入淡出。另外，当容器120在用户界面内移动时将淡入淡出效果应用于容器120比图4的常规过程在计算上更高效，因为可以避免或限制在计算上要求更高的生成并呈现容器120的第一状态和第二状态之间的插值的结果。如上所述，子元素122是不可知的和/或彼此独立的。特别地，第一子元素122a可以对第二子元素122b不可知，并且另外，对容器120的状态不可知。为此，在容器120的直接转变中，需要确定呈现在第一状态中的子元素和呈现在第二状态中的子元素中的每一个之间的关系以便在两个状态之间变换子元素。换言之，在直接转变中，将需要修改第一状态中的特定用户界面元素以达成第二状态的对应用户界面元素，从而需要进行处理以确定需要如何修改该特定用户界面元素。但是，利用容器120的压缩转变使得子元素和容器120的状态彼此独立，从而消除了执行处理以确定如何修改第一状态的用户界面元素以达成第二状态的对应用户界面元素的需要。

参考图5，进一步地，在一些可选实施例中，为了通过计算设备102将转变应用于容器120，计算设备102利用容器120的压缩转变，例如，压缩的多个帧502。特别地，计算设备102执行需要比多个帧402少的帧的压缩转变来将容器120从第一状态转变到第二状态。压缩的多个帧502可以相对于图4的转变被压缩。

在一些可选示例中，计算设备102消除了对于来自位于多个帧402中间或中央处的多个帧402中的帧的需要或去除了这些帧，以限定压缩的多个帧502。特别地，当容器在用户界面内移动时，计算设备102可以通过变化经受转变的子元素的不透明度来简单地将淡入淡出应用于两个状态(例如，开始状态和结束状态)之间的转变，这在下面会更详细地讨论。容器的移动和两个状态之间淡入淡出的组合产生在视觉上以与直接转变类似的方式被感知的动画。

替代地或附加地，计算设备102可以将如图4所示意的现有转变(例如，之前使用插值技术生成并且包含在状态之间变形的许多不同帧的转变)转换成压缩转变。例如，计算设备102可以分析多个帧402并且确定要去除哪些帧。计算设备102可以基于一个或多个特性(例如，哪些去除的帧提供容器120从第一状态到第二状态的平滑转变，哪些去除的帧提供计算机资源的高效使用同时仍提供压缩转变等)来识别要去除的帧。在示意的示例中，计算设备102可以识别从多个帧402中要去除的帧410。帧410可以位于多个帧402的中间/中央处。也就是说，在去除的帧410之前存在与去除的帧410之后相似或相同数量的帧。但是，可以从转变的任意点去除任何数量的帧。

在一些可选示例中，压缩的多个帧502(例如，通过将现有转变转换为压缩转变而获得或通过创建两个状态之间的压缩转变而获得)包括第一子集的帧510和第二子集的帧512。第一子集的帧510在顺序上在去除的帧410之前，而第二子集的帧512在顺序上在去除的帧410之后。在一些示例中，容器120的第一状态包括第一子集的帧510，容器120的第二状态包括第二子集的帧512。在示意的示例中，第一子集的帧510与容器120的第一状态的菱形形状关联，第二子集的帧512与容器120的第二状态的圆形形状关联。

在一些实现方式中，为了通过计算设备102将转变应用于容器120，计算设备102并且特别是淡入淡出模块114将淡入淡出应用于容器120，以在将压缩转变应用于容器120期间将第一子元素122a图形地渐变为第二子元素122b。如图6所示，淡入淡出模块114将淡入淡出应用于容器120，并且特别地，应用于压缩的多个帧502，以限定淡入淡出的帧602。特别地，在容器120移动时，淡入淡出模块114通过调整第一子元素122a和第二子元素122b的不透明度来将淡入淡出应用于容器120。也就是说，淡入淡出模块114通过调整第一子元素122a所包括的第一子集的帧510和第二子元素122b所包括的第二子集的帧512的不透明度来将淡入淡出应用于容器120。

如图6所示，淡入淡出模块114通过减小第一子元素122a并且特别是第一子元素122a所包括的第一子集的帧510的不透明度来调整第一子元素122a的不透明度。在一些示例中，第一子集的帧510中的帧在不透明度上逐渐减小以使得每个后续帧均包括比先前帧小的不透明度。另外，淡入淡出模块114通过增加第二子元素122b并且特别是第二子元素122b所包括的第二子集的帧512的不透明度来调整第二子元素122b的不透明度。在一些示例中，第二子集的帧512中的帧在不透明度上逐渐增加以使得每个后续帧均包括比先前帧大的不透明度。在一些示例中，第二子元素122b(以及第二子集的帧512)的不透明度增加的同时第一子元素122a(以及第一子集的帧510)的不透明度减小。

在一些示例中，淡入淡出模块114减小第一子元素122a(以及第一子集的帧510)的不透明度同时使容器120保持在第一状态中。也就是说，GUI 104包括显示第一状态下的容器120(例如，显示第一子元素122a但不显示第二子元素122b)同时减小第一子元素122a(例如，第一子集的帧510)的不透明度。在一些示例中，淡入淡出模块114增加第二子元素122b(以及第二子集的帧512)的不透明度同时使容器120保持在第二状态中。也就是说，GUI 104包括显示第二状态下的容器120(例如，显示第二子元素122b但不显示第一子元素122a)同时增加第二子元素122b(例如，第二子集的帧512)的不透明度。

在一些示例中，计算设备102可以将空白帧610插入(或添加)在淡入淡出的帧602的序列内。计算设备102可以将空白帧610插入在淡入淡出的帧602的序列的中间/中央处。当转换先前创建的转变(例如，如图4所示的转变)时，空白帧610取代(或占据)去除的帧410或去除的帧410的至少一部分。当创建两个状态之间新的压缩转变时，空白帧610可以隔开两个不同状态的帧(例如，可以位于开始状态的帧和结束状态的帧之间)。空白帧610可以没有任何可显示内容。

在一些示例中，参考图4，计算设备102确定第一帧404的形状和位置作为容器120的第一图形表示并且确定最后帧406的形状和位置作为容器120的第二图形表示。另外，计算设备102通过使容器120的第一图形表示变形为容器120的第二图形表示来向容器120应用转变以进行压缩转变。例如，由容器120中的(帧402的)帧来表示子元素122，并且向容器应用转变包括在压缩转变中将处于第一状态下的容器120中的相应帧的形状和位置变形为处于第二状态下的容器120中的相应帧的形状和位置。

在一些实现方式中，在计算设备102并且特别是转变模块110向容器120应用转变之后，计算设备102提供用于在第二状态下在GUI 104上进行显示的容器120，如图3所示。也就是说，容器120的呈现包括第二子元素122b，但不包括第一子元素122a。

图7示意了用于提供图形元素的压缩转变的示例过程700。过程700例如可以由计算设备102或另一数据处理装置来执行。过程700也可以被实现为存储在计算机存储介质上的指令，并且一个或多个数据处理装置对指令的执行使一个或多个数据处理装置执行过程700的操作中的一些或全部。

计算设备102识别图形用户界面(GUI)104(702)。在一些示例中，GUI 104包括具有第一子元素122a和第二子元素120b的容器120。容器120限定子元素122的分组和子元素122之间的关系。计算设备102设置为用于在第一状态下在GUI 104上显示容器120(704)。在一些示例中，容器120的第一状态包括显示第一子元素122a但不显示第二子元素120b。如图2所示，计算设备102设置为用于显示第一状态下的容器120，所述第一状态包括显示第一子元素122a但不显示第二元素122b。转变模块110向容器120应用转变以实行容器120从第一状态到第二状态的状态改变(706)。在一些示例中，第二状态包括显示第二子元素122b但不显示第一子元素122a。

在向容器120应用转变期间，淡入淡出模块114将淡入淡出应用于容器120以使第一子元素122a图形地渐变到第二子元素122b(708)。特别地，当容器120在用户界面内移动时，淡入淡出模块114将淡入淡出应用于容器120，并且特别地，应用于压缩的多个帧502以限定淡入淡出的帧602。在一些示例中，在容器120移动时，淡入淡出模块114通过调整第一子元素122a和第二子元素122b的不透明度来将淡入淡出应用于容器120。这种不透明度调整联合容器的移动产生在视觉上以与直接转变所提供的动画效果类似的方式被感知的动画效果，但不需要执行直接转变的处理。计算设备102提供用于在应用转变之后在第二状态下在GUI 104上进行显示的容器120(710)。也就是说，在应用转变之后，容器120呈现第二子元素122b，但不呈现第一子元素122a。

在一些实现方式中，可以将现有转变(类似于图4所示转变的直接转变)转换为压缩转变。在这些实现方式中，转变模块110识别包括在容器120从第一状态到第二状态的转变中的多个帧402。多个帧402表示以第一状态和第二状态之间的帧的特定顺序显示的一序列帧。计算设备102可以从多个帧402中去除一些帧(例如，帧410)，以提供容器120的压缩转变(710)。特别地，计算设备102可以从多个帧402中去除帧，以使用比完全直接转变所需的帧少的帧提供容器从第一状态到第二状态的压缩转变。上述淡入淡出也可以应用到其余帧。

图8示出可以与本文描述的技术一起使用的通用计算设备800和通用移动移动计算设备850的示例。计算设备800旨在代表各种形式的数字计算机，例如膝上型计算机、台式机、工作站、个人数字助理、服务器、刀片服务器、大型机和其他适当的计算机。计算设备850旨在表示各种形式的移动设备，例如个人数字助理、蜂窝电话、智能电话和其他类似的计算设备。在本文示出的部件、它们的连接和关系以及它们的功能应当仅是示例性的，而不应当限制本发明描述和/或在本文件中请求保护的实现方式。

计算设备800包括处理器802、存储器804、存储设备806、连接到存储器804和高速扩展端口810的高速控制器808以及连接到低速总线814和存储设备806的低速控制器812。部件802、804、806、808、810和812中的每一个均利用各种总线互连，并且可安装在共同的模板上或者酌情以其他方式安装。处理器802可以处理用于在计算设备800内执行的指令，包括存储在存储器804中或在存储设备806上的指令以为在外部输入/输出设备(例如耦合到高速控制器808的显示器816)上的GUI显示图形信息。在其他实现方式中，可酌情与多个存储器或多种类型的存储器使用多个处理器和/或多个总线。另外，可以连接多个计算设备800，其中每个设备提供所需操作的一些部分(例如，作为服务器阵列、刀锋服务器的群组或多处理器系统)。

存储器804在计算设备800内存储信息。在一个实现方式中，存储器804是一个易失性存储器单元或多个单元。在另一实现方式中，存储器804是一个非易失性存储器单元或多个单元。存储器804还可以是其他形式的计算机可读介质，例如磁盘或光盘。

存储设备806能够为计算设备800提供大容量存储。在一个实现方式中，存储设备806可为或包含计算机可读介质，例如软盘设备、硬盘设备、光盘设备或带设备、快闪存储器或其他类似固态存储器设备或设备阵列，包括在存储区域网络或其他配置中的设备。计算机程序产品被有形地实施在信息载体中。计算机程序产品还可以包含指令，所述指令在被执行时执行诸如上述方法的一个或多个方法。信息载体是计算机可读或机器可读介质，例如存储器804、存储设备806或处理器802上的存储器。

高速控制器808管理用于计算设备800的带宽密集的操作，而低速控制器812管理较低的带宽密集的操作。这样的功能分配仅是示例性的。在一个实现方式中，高速控制器808耦合到存储器804、显示器816(例如，通过图形处理器或加速器)并且耦合到高速扩展端口810，高速扩展端口可接受各种扩展卡(未示出)。在该实现方式中，低速控制器812耦合到存储设备806和低速扩展端口814。可包括各种通信端口(例如，USB、蓝牙、以太网、无线以太网)的低速扩展端口可耦合到一个或多个输入/输出设备，例如键盘、指向设别、扫描仪或(例如通过网络适配器)联网设备，例如交换机或路由器。

如图中所示，计算设备800可以以许多不同形式来实现。例如，其可以为实现为标准服务器820或成群组的这样的多重服务器。其也可以被实现为机架服务器系统824的一部分。此外，其可以实现在个人计算机(例如，膝上型计算机822)中。替代地，来自计算设备800的部件可以与移动设备(例如设备850)中的其他部件(未示出)组合。每个这样的设备可以包含一个或多个计算设备800、850，并且整个系统可以由彼此通信的多个计算设备800、850组成。

计算设备850除了其他部件之外尤其包括处理器852、存储器864、输入/输出设备(例如显示器854)、通信接口876和收发器868。设备850还可以设置有存储设备，例如微硬盘(microdrive)或其他设备，以提供附加存储。部件850、852、864、854、876和868中的每一个均利用各种总线互连，并且这些部件中的一些可安装在共同的母板上或者酌情以其他方式安装。

处理器852可以在计算设备850内执行指令，包括存储在存储器864中的指令。处理器可以被实现为包括单独的多个模拟和数字处理器的芯片的芯片组。处理器可以例如设置为用于设备850的其他部件的协调，例如控制用户接口、设备850所运行的应用和设备850的无线通信。

处理器852可以通过控制接口858和耦合到显示器854的显示接口856与用户通信。显示器854可以例如是TFT LCD(薄膜晶体管液晶显示器)或OLED(有机发光二极管)显示器或其他适当的显示器技术。显示接口856可以包括用于驱动显示器854以向用户呈现图形和其他信息的适当电路。控制接口858可以接受来自用户的命令并且对命令进行转换以提交给处理器852。此外，可以提供与处理器852通信的外部接口862，以便使得能够进行设备850与其他设备的近区域通信。外部接口862可以例如在一些实现方式中提供有线通信，或者在其他实现方式中提供无线通信，并且还可以使用多个接口。

存储器864在计算设备850内存储信息。存储器864可以被实现为一个或多个计算机可读介质、一个或多个易失性存储器单元或一个或多个非易失性存储器单元中的一个或多个。还可以设置扩展存储器874并将其通过扩展接口872连接到设备850，扩展接口872可以包括例如SIMM(单列直插存储器模块)卡接口。这样的扩展存储器874可以为设备850提供额外存储空间，或者可以存储用于设备850的应用或其他信息。特别地，扩展存储器874可以包括执行或补充上述过程的指令，并且还可以包括安全信息。这样，例如，扩展存储器874可以被设置为设备850的安全模块，并且可以被编程有允许对设备850进行安全使用的指令。此外，可以通过SIMM卡提供安全应用连同附加信息，例如，以不可破解的方式将识别信息置于SIMM卡上。

存储器可以包括例如快闪存储器和/或NVRAM存储器，这在下面进行描述。在一个实现方式中，计算机程序产品被有形地实施在信息载体中。计算机程序产品包含指令，所述指令在被执行时执行诸如上述方法的一个或多个方法。信息载体是计算机可读或机器可读介质，例如存储器864、扩展存储器874、处理器852上的存储器或可以例如通过收发器868或外部接口862接收的传播信号。

设备850可以通过通信接口876无线通信，通信接口876在需要的情况下可以包括数字信号处理电路。通信接口876可以设置成用于在各种模式或协议(例如，在其他模式或协议之外尤其是：GSM语音呼叫，SMS、EMS或MMS消息传输，CDMA，TDMA，PDC，WCDMA,CDMA2000或GPRS)下进行通信。这样的通信可以例如通过射频收发器868进行。此外，可以进行短程通信，例如使用蓝牙、WiFi或其他收发器(未示出)。此外，GPS(全球定位系统)接收器模块870可以向设备850提供附加导航和位置相关无线数据，其可以酌情由设备850上运行的应用使用。

设备850还可以使用音频编解码器860进行可听式通信，音频编解码器860可以从用户接收语音信息并将其转换成可使用数字信息。音频编解码器860可以同样为用户生成可听声音，例如通过(例如，设备850中的手持接送话器(handset)中的)扬声器。这样的声音可以包括来自语音电话呼叫的声音，可以包括记录的声音(例如，语音消息，音乐文件等)，并且可以包括由设备850上进行操作的应用生成的声音。

如图中所示，计算设备850可以以许多不同形式来实现。例如，其可以被实现为蜂窝电话880。其还可以被实现为智能电话882、个人数字助理或其他类似移动设备的一部分。

本文描述的系统和技术的各种实现方式可以实现在数字电子电路、集成电路、特别设计的ASIC(专用集成电路)、计算机硬件、固件、软件和/或其组合中。这些不同实现方式可以包括实现在一个或多个计算机程序中，计算机程序可以在可编程系统上执行和/或解释，可编程系统包括至少一个可编程处理器，其可以是专用或通用目的，可编程处理器耦合为从存储系统、至少一个输入设备以及至少一个输出设备接收数据和指令和向它们发送数据和指令。

这些计算机程序(也称为程序、软件、软件应用、应用、部件或者代码)包括用于可编程处理器的机器指令，并且可以以高级程序化和/或面向对象的程序语言来实现，和/或以汇编/机器语言来实现。在当本文中使用时，术语“机器可读介质”、“计算机可读介质”指任何计算机程序产品、装置和/或设备(例如磁盘、光盘、存储器、可编程逻辑器件(PLD))，其用于为可编程处理器提供机器指令和/或数据，包括将机器指令作为机器可读信号接收的机器可读介质。术语“机器可读信号”指用于为可编程处理器提供机器指令和/或数据的任何信号。

为了提供与用户的交互，本文描述的系统和技术可以实现在具有用于向用户显示信息的显示设备(例如，CRT(阴极射线管)或LCD(液晶显示)监视器)及键盘和指向设备(例如，鼠标或轨迹球)的计算机上，其中用户可以通过键盘和指向设备向计算机提供输入。也可以使用其他种类的装置来提供与用户的交互；例如，提供给用户的反馈可以是任何形式的感觉反馈，例如视觉反馈、听觉反馈或触觉反馈；并且可以以任何形式接收来自用户的输入，包括声学、语音或触觉输入。

本文描述的系统和技术可以在计算系统中实现，该计算系统包括后端组件(例如，作为数据服务器)，或包括中间件组件(例如，应用服务器)，或包括前端组件(例如，具有图形用户界面或网页浏览器的客户端计算机，用户可通过其与本文描述的系统和技术的实施方式进行交互)，或者这样的后端、中间件或前端组件的任意组合。可以通过数字数据通信的任意形式或介质(例如，通信网络)将系统的组件互连。通信网络的示例包括局域网(“LAN”)、广域网(“WAN”)和因特网。

计算系统可以包括客户端和服务器。一般来说，客户端和服务器彼此远离，并且通常通过通信网络交互。通过运行在各个计算机并且彼此具有客户端-服务器关系的计算机程序而形成的客户端和服务器的关系。

尽管本公开包括了一些细节，但是这些细节不应当被解释为对本公开或请求保护的范围进行限制，而应该被解释为对本公开的示例实现方式的特征的描述。在公开中在不同实现方式的背景中描述的某些特征也可以以组合方式提供在单个实现方式中。相反，在单个实现方式的背景中描述的各种特征也可以单独地提供在多个实现方式中或以任何合适的子组合的方式来实现。此外，尽管特征可以如上所述描述为在某些组合中起作用并且最初也这样地请求，但在一些情况下，来自所请求的组合的一个或多个特征可以从组合中排除，并且所请求的组合可以涉及子组合或子组合的变体。

类似地，尽管在附图中以特定顺序描绘了操作，但是这不应当被理解为需要以示出的特定顺序或以相继的顺序来执行这样的操作或者需要执行所有示意的操作来取得合意的结果。在某些实现方式中，多任务和并行处理可为有利。另外，在上述实现方式中对各种系统部件的分离不应当被理解为在所有实现方式中要求这样的分离，而是应当要理解，所描述的程序部件和系统可一般地在单个软件产品中被集成在一起或者被封装成多个软件产品。

这样，已经描述了本公开的特定实现方式。其他实现方式在下述权利要求的范围内。例如，记载在权利要求中的动作可以以不同的顺序执行而仍然取得合意的结果。已经描述了多个实现方式。然后，将理解，在不背离本公开的精神和范围的情况下可以进行各种修改。例如，可以使用上面示出流程的各种形式，可以重新排定步骤顺序、添加步骤或去除步骤。因此，其他实现实现方式落入下述权利要求的范围内。

Claims (18)

1.一种计算机实现的方法，包括：

识别包括容器的图形用户界面，所述容器具有第一子元素和第二子元素；

提供用于在第一状态下在所述图形用户界面上进行显示的所述容器，所述第一状态包括显示所述第一子元素但不显示所述第二子元素；

向所述容器应用转变以当所述容器在所述图形用户界面内移动时实现所述容器从所述第一状态到第二状态的状态改变，所述第二状态包括显示所述第二子元素但不显示所述第一子元素，应用所述转变包括当所述容器在所述图形用户界面内移动时向所述容器应用淡入淡出以使所述第一子元素图形地渐变到所述第二子元素；以及

在应用所述转变之后，提供用于在所述第二状态下在所述图形用户界面内进行显示的所述容器。

2.根据权利要求1所述的计算机实现的方法，其中，向所述容器应用淡入淡出以使所述第一子元素图形地渐变到所述第二子元素包括：调整所述第一子元素和所述第二子元素的不透明度。

3.根据权利要求2所述的计算机实现的方法，其中，调整所述第一子元素和所述第二子元素的不透明度包括：在应用淡入淡出期间，减小所述第一子元素的不透明度和增加所述第二子元素的不透明度。

4.根据权利要求3所述的计算机实现的方法，其中，向所述容器应用转变包括：使所述容器保持在所述第一状态中同时减小所述第一子元素的不透明度。

5.根据权利要求4所述的计算机实现的方法，其中，向所述容器应用转变包括：使所述容器保持在所述第二状态中同时增加所述第二子元素的不透明度。

6.根据权利要求1所述的计算机实现的方法，其中，由所述容器中的相应帧表示每个子元素，并且其中，向所述容器应用转变包括：通过改变帧的不透明度，使用在所述第二状态中的所述容器中的帧取代在所述第一状态中的所述容器中的帧。

7.一种用于图形元素转变的系统，包括：

一个或多个计算机和一个或多个存储设备，所述一个或多个存储设备存储指令，所述指令在由所述一个或多个计算机执行时可操作为使所述一个或多个计算机执行操作，所述操作包括：

识别包括容器的图形用户界面，所述容器具有第一子元素和第二子元素；

提供用于在第一状态下在所述图形用户界面上进行显示的所述容器，所述第一状态包括显示所述第一子元素但不显示所述第二子元素；

向所述容器应用转变以当所述容器在所述图形用户界面内移动时实行所述容器从所述第一状态到第二状态的状态改变，所述第二状态包括显示所述第二子元素但不显示所述第一子元素，应用所述转变包括当所述容器在所述图形用户界面内移动时向所述容器应用淡入淡出以使所述第一子元素图形地渐变到所述第二子元素；以及

在应用所述转变之后，提供用于在所述第二状态下在所述图形用户界面内进行显示的所述容器。

8.根据权利要求7所述的系统，其中，向所述容器应用淡入淡出以使所述第一子元素图形地渐变到所述第二子元素包括：调整所述第一子元素和所述第二子元素的不透明度。

9.根据权利要求8所述的系统，其中，调整所述第一子元素和所述第二子元素的不透明度包括：在应用淡入淡出期间，减小所述第一子元素的不透明度和增加所述第二子元素的不透明度。

10.根据权利要求9所述的系统，其中，向所述容器应用转变包括：使所述容器保持在所述第一状态中同时减小所述第一子元素的不透明度。

11.根据权利要求10所述的系统，其中，向所述容器应用转变包括：使所述容器保持在所述第二状态中同时增加所述第二子元素的不透明度。

12.根据权利要求7所述的系统，其中，由所述容器中的相应帧表示每个子元素，并且其中，向所述容器应用转变包括：通过改变帧的不透明度，使用在所述第二状态中的所述容器中的帧取代在所述第一状态中的所述容器中的帧。

13.一种非暂态计算机可读介质，存储包括能够由一个或多个计算机执行的指令的软件，在执行所述指令时，所述指令使所述一个或多个计算机执行操作，所述操作包括：

识别包括容器的图形用户界面，所述容器具有第一子元素和第二子元素；

提供用于在第一状态下在所述图形用户界面上进行显示的所述容器，所述第一状态包括显示所述第一子元素但不显示所述第二子元素；

向所述容器应用转变以当所述容器在所述图形用户界面内移动时实行所述容器从所述第一状态到第二状态的状态改变，所述第二状态包括显示所述第二子元素但不显示所述第一子元素，应用所述转变包括当所述容器在所述图形用户界面内移动时向所述容器应用淡入淡出以使所述第一子元素图形地渐变到所述第二子元素；以及

在应用所述转变之后，提供用于在所述第二状态下在所述图形用户界面内进行显示的所述容器。

14.根据权利要求13所述的计算机可读介质，其中，向所述容器应用淡入淡出以使所述第一子元素图形地渐变到所述第二子元素包括：调整所述第一子元素和所述第二子元素的不透明度。

15.根据权利要求14所述的计算机可读介质，其中，调整所述第一子元素和所述第二子元素的不透明度包括：在应用淡入淡出期间，减小所述第一子元素的不透明度和增加所述第二子元素的不透明度。

16.根据权利要求15所述的计算机可读介质，其中，向所述容器应用转变包括：使所述容器保持在所述第一状态中同时减小所述第一子元素的不透明度。

17.根据权利要求16所述的计算机可读介质，其中，向所述容器应用转变包括：使所述容器保持在所述第二状态中同时增加所述第二子元素的不透明度。

18.根据权利要求13所述的计算机可读介质，其中，由所述容器中的相应帧表示每个子元素，并且其中，向所述容器应用转变包括：通过改变帧的不透明度，使用在所述第二状态中的所述容器中的帧取代在所述第一状态中的所述容器中的帧。