CN105190547A - 用于数据更新的图表的分阶段的动画化 - Google Patents

Abstract

更新图形用户界面元素。一种方法包括访问包括初始视图的图形用户界面，初始视图包括图形元素。如果确定适用，则(按顺序)执行下列各项中的每一项：(1)在图形用户界面中更新在初始视图的外面的任何平移元素；(2)动画化图形用户界面的轴中的任何变化，以设置数据修改的阶段；(3)在图形用户界面中执行任何数据元素动画化，包括全部更新的任何移动、任何添加、任何移除以及任何改变，除了当更新在初始视图的外面的任何平移元素时已经添加的那些以及将不会在最后视图中可见的平移元素移除之外；(4)将轴中的任何变化动画化到最终视图；以及，(5)更新现在在视图外的任何剩余元素。

Description

用于数据更新的图表的分阶段的动画化

背景技术

背景和相关技术

计算机和计算系统影响了现代生活的几乎每一个方面。计算机一般涉及工作、消遣、保健、运输、娱乐、家政管理等等。

许多计算机旨在通过与计算机的直接用户交互来使用。如此，计算机具有输入硬件和软件用户界面以促进用户交互。例如，现代的通用计算机可包括用于允许用户向计算机输入数据的键盘、鼠标、触摸垫、相机等等。另外，也可以有各种软件用户界面可用，包括提供丰富显示的图形用户界面。某些图形用户界面提供动画化以指示数据的变化。

图形用户界面显示数据。然而，随着时间的推移数据会因为数据被添加到用户界面中、数据被从用户界面中移除、或数据在用户界面中被更改而变化，用户界面中不断变化的表示可能会导致人类用户的混淆或不准确的解释。例如，考虑示出了正在被使用的网络资源量的资源跟踪器的情况。当网络硬件处于带有最小流量的安静状态时，资源跟踪器可能以放大的视图示出网络使用，诸如通过在带有具有最大值10Mbs的轴的图上示出使用。当用户连接到视频流传输站点时，网络使用可能会超出10Mbs的限制，并且因此比例被更改为100Mbs。然而，对用户而言，观看流传输视频的网络使用由于比例变化可能看起来与安静状态的情况相同。这会混淆或误导用户。

此处所要求保护的主题不仅限于解决任何缺点的实施例或只在诸如上文所描述的那些环境的环境中操作的实施例。相反，提供此背景只是示出了其中可以实施此处所描述的一些实施例的一个示例性技术领域。

发明内容

此处所示出的一个实施例包括一种以能够处理正被添加到用户界面中的数据、正从用户界面移除的数据或在用户界面中正被修改的数据的方式更新图形用户界面元素的方法。该方法包括访问图形用户界面。图形用户界面显示包括图形元素的初始视图。该方法进一步包括，对于下列各项中的每一项，确定是否执行每一动作，并按顺序执行适用于给定视图情况的下列各项中的任何一项：(1)在图形用户界面中更新，添加在初始视图外的任何平移(pan)元素；(2)动画化图形用户界面的轴中的任何变化，以设置数据修改的阶段；(3)在图形用户界面中执行任何数据元素动画化，包括全部更新的任何移动、任何添加、任何移除以及任何改变，除了当更新在初始视图外的任何平移元素时已经添加的那些以及将不会在最后视图中可见的平移元素移除之外；(4)将轴中的任何变化动画化到最终视图；以及，(5)更新现在在视图外的任何剩余元素。

提供本发明内容是为了以精简的形式介绍将在以下详细描述中进一步描述的一些概念。本发明内容并不旨在标识出所要求保护的主题的关键特征或必要特征，也不旨在用于帮助确定所要求保护的主题的范围。

本发明的附加特征和优点将在以下描述中叙述，且其一部分根据本描述将是显而易见的，或可通过对此处的原理的实践来获知。本发明的特征和优点可通过在所附权利要求书中特别指出的工具和组合来实现和获得。本发明的特征将通过以下描述和所附权利要求书变得更加显而易见，或可通过对下文中所述的本发明的实践来领会。

附图简述

为了描述可获得本主题的上述和其它优点和特征的方式，将通过参考附图中示出的具体实施例来呈现以上简要描述的本主题的更具体描述。可以理解，这些附图只描绘了典型实施例，并且因此不被认为是对其范围的限制，将通过使用附图并利用附加特征和细节来描述和解释各实施例，在附图中：

图1示出了线时间序列；

图2示出了带有垂直比例变化的线时间序列；

图3示出了添加了一个序列的线时间序列；

图4示出了添加、移除以及移动各点的散点图；

图5示出了一个柱正在升高的柱状图；

图6示出了一个柱正在降低的柱状图；

图7示出了改变、添加以及移除各柱的柱状图；

图8示出了更新图形用户界面元素的方法。

具体实施方式

各实施例实现了以下功能：该功能允许图表被动画化以对新数据作出反应，以便人类观察者能够跟踪经更新的值移动到哪里以及它们如何变化，而不会被值变化误导。各实施例可以按能被一般化为几乎全部图表类型的方式实现并可以使动画化分阶段，以避免被误导。各实施例可以被实现为通过动画化过渡而并非迅移(snap)到新视图来对图表中示出的数据进行更改，从而允许用户可以看到不断变化的显示条件。

下面示出了可以在此处所描述的各实施例的上下文中考虑的指导原理。

各实施例可以实现跟踪功能。具体而言，使用动画化以在用户观察变化时使与元素被移动到哪里有关的用户混淆最小化。人类一般十分擅长跟踪移动，而不太擅长识别当事物迅移到新布局时去了哪里。这会使非动画化的行为不和谐。

各实施例可以被实现为使误导行为最小化。用户不应该被他们正在显示的数据误导。例如，如果一个值相对于其他值正在上升，则应该清楚它正在上升。

各实施例可以被实现为以动画化性能作为一个因素。具体而言，动画化应该快速运行，但是仍保留知道元素去了哪里的感觉。从用户角度来看，这会导致UI感觉响应快。这还降低了同时运行多个动画化的问题的机会。

尽管在大多数情况下并且特别是在常见的情况下，过渡以及动画化应该在视觉上有吸引力，某些“离奇的”罕见的动画化是可以接受的。

各实施例可以实现允许处理一大片图表和可视化的统一的单个方法或算法。如此，并非对于每一种特殊化情况实现特殊化算法，单个方法或算法允许一种方法被用于许多图表类型或图表元素类型。

下面示出了该功能特别有用的若干个常见示例：

考虑在一端添加了新数据并且从另一端(常常是另一轴的相同部分)移除旧数据的线图。这样的图表的示例可以是实时股票行情的图表。此图表应该表现为从左(或右)平稳地滚动的线，其中新数据点滑入视图且旧数据点滑出视图。这不应该通过首先在图表上创建空间并随后使数据点出现来执行，也不应该通过使数据点消失并随后使其中消失了数据点的空间被删除来执行。相反，数据点应该滑入视图并滑出视图。进一步，也不应该有这样的连锁反应：添加和移除的部分一个接一个地被动画化，从而使另一轴在返回到其原始值之前比例变化。

在另一个示例中，考虑如上所述的在一端添加了新数据并且从另一端移除旧数据的行图表，但是现在添加了全新的线。全新的线(即，新序列)不应该被部分地平移进入并随后使其余部分淡入。

在再一个示例中，考虑散点图：其中，点移动并且新项目出现在旧范围之外，并且在新视图内部和外部的项目消失。应当清楚的，通过使散点出现/消失来添加和移除它们。使添加的散点平移入视图或移除的散点平移出视图同时使其它散点在眼前出现和消失会使用户混淆。他们会觉得被平移开的点仍存在，而他们看见消失的那些点不再存在。类似于被平移入视图的那些对他们看见出现的那些；用户可能不知道那些被平移入视图的点之前是否存在。如果视图移动以及出现和消失在时间上分离，会使此效果更差。

在再一个示例中，考虑柱状图：其中一个柱的值上升，导致y轴比例变化。柱应该看起来生长，而不是让所有其他的柱缩小(在比例和柱一起动画化的情况下所发生的)。应该首先发生比例变化，并随后发生数据值变化，以防止用户被误导。

在再一个示例中，考虑柱状图：其中最高的柱的值下降，导致y轴比例变化。柱应该看起来下降，不是让所有其他的柱生长(比例以及柱一起动画化的情况下所发生的)。请注意，这需要与数据变化在比例变化之前发生的柱增长情况不同的动画化顺序。

在再一个示例中，考虑新类别出现在现有类别集合中间。当创建空间并且新元素出现时，现有元素应该平稳地移动。这是通过将变化分阶段作为移除元素、移动元素并随后添加元素。

各实施例如下实现所需功能：使图表元素被分类成当创建或者移除时平移入以及平移出视图是可接受的类型(平移元素)以及这将产生混淆并且全部创建以及移除应该被用户看见的类型(非平移元素)。线以及柱是平移元素而散点图点是非平移元素是公知的，且这确实是用于附图中的示例中的情况。具体而言，添加的线段平移入视图以及移除的线段平移出视图以及在视图的中心处的出现和消失是可以接受的，因为这不会产生不适当的混淆并且实际上在上文所提及的滚动股票情况是合乎需要的。具有平移出视图的散点及其他消失的散点将产生与哪些点仍存在有关的混淆。这也适用于看见某些点平移入视图中以及然后其他点出现。当平移以及出现/消失动画化在时间上分离时，此效果被放大。

在全部下文中，轴比例/视图变化只在轴比例是自动的情况下才发生。如果用户放大(并潜在地平移)或轴范围被设置为固定，那么在该轴上的视图变化不会发生。

下面示出了包括可以被遵循以动画化变化的动作的过程。下面的过程步骤按照所示顺序执行。然而，如在下面的说明中指出的，某些步骤(或子步骤)可以使步骤的某些部分同时执行。在图8中作为方法800以图形方式示出了下面的过程。

1.阶段外添加(802)。这涉及立即(或尽可能快地)更新在初始(旧)视图外的任何平移元素。这些(最通常地)是针对所添加的数据的元素，诸如新柱、类别或线段，其中它们不在当前视图中。散点图点是非平移元素，所以在此步骤中将不会被添加。应该排除全新的序列，所以稍后整个序列将一起出现。

2.设置阶段(804)。这涉及动画化轴/视图中的变化以设置数据修改的阶段。这将包括将视图调整到至少初始(旧)视图，但是将扩展以适应被移动的元素以及将被添加的非平移元素的新位置。它不扩展以包括在“阶段外添加”步骤中添加的平移元素，但它会揭示它们。

3.数据动画化(806)。执行数据元素动画化，包括除了已经在“阶段外添加”步骤中添加的那些以及将不会在最终视图中可见的平移元素移除之外的全部更新的移动、添加、移除以及改变。为避免某些重叠的元素情况(正在移动的元素与正在被移除的元素重叠以及正在移动的元素与正在被添加的项目重叠)，此动画化分为三个步骤：

a.正在被移除的元素消失(808)。这一般可以通过使元素淡出来执行，但在某些实施例中，还可以通过将元素迅移出来来执行。

b.元素被移动和/或改变(810)。

c.正在被添加的元素出现(812)。这一般可以通过使元素淡入来执行，但在某些实施例中，还可以通过将元素迅移进入来执行。

4.最终视图(814)。将轴/视图中的更改动画化到最终(新)视图。此最终视图只能小于“阶段设置”视图。

5.阶段外移除(816)。立即(或尽可能快地)更新现在在视图外的任何剩余元素。这只能是现在在视图外的平移元素。

如果“数据动画化”阶段具有要动画化的元素的空集，则跳过“设置阶段”和“数据动画化”阶段。这消除在诸如上文所示出的实时股票图表情况之类的情况下的波动。

“设置阶段”动画化和“数据动画化”部分“a”(移除)可以并行地运行。

“最终视图”动画化和“数据动画化”部分“c”(添加)可以并行地运行。

图表元素对于新元素(出现)和变化的元素执行不同的动画化。元素可以被配置成不将出现动画化成从零开始的变化。

当改变视图时，无论由于用户正在执行平移或缩放还是由于数据更改动画化，勾号、它们在轴上的标记以及网格线都应该全部与平移/缩放一起移动并随后在平移/缩放完成之后淡入淡出成新布局的新勾号标记和线。在每个帧上迅移到新勾号、勾号标记以及网格线会产生没有连续性的非常混乱的结果。这将妨碍系统用户跟踪变化。

这里未指定动画化的定时，因为该方法应该相同，而不管为每一阶段选择的定时如何。

这里未指定视图变化或元素移动的放缓(easing)，因为该方法应该与动画化中的任何放缓(或没有它)一起工作。

现在示出若干个示例，其中在若干不同的情况下应用上文所描述的过程。现在参考图1，示出了没有垂直变化的线时间序列。图1示出了初始视图102以及最终视图104。图1还示出了确定应用上文所描述的五个步骤中的哪一个以及如何应用它们。例如，在106，图1示出了步骤1，阶段外添加。具体而言，在步骤1中，添加了线段108。线段108在被添加时是不可见的，而是被裁剪。

作出步骤2不需要被应用的确定。具体而言，没有必要改变轴或视图，因为线段108将简单地平移入视图。

作出步骤3不需要被应用的确定，因为作出的唯一变化是阶段外添加，它们被从步骤3的数据动画化中专门排除。

图1在110示出了由步骤4最终视图动画化执行的动画化的三个帧。线段108平移入视图，而视图的其他部分平移出视图。在110处所示出的动画化帧中，虚线示出了用户看不见但在视图中裁剪的线段。需要注意的是，水平轴也在动画化中被平移。

图1在112示出了步骤5，阶段外移除。具体而言，在步骤4的动画化之后，线段114平移出视图并在视图中裁剪。在步骤5中，线段114被移除。

图2示出了类似于图1中的所示出的示例的替换示例，除了添加的线段208的性质使得垂直轴被改变以适应添加的线段208。图2示出了初始视图202以及最终视图204。图2还示出了确定应用上文所描述的五个步骤中的哪一个以及如何应用它们。例如，在206，图2示出了步骤1，阶段外添加。具体而言，在步骤1中，添加了线段208。线段208在被添加时是不可见的，而是被裁剪。

作出步骤2不需要被应用的确定。具体而言，没有必要改变轴或视图，因为线段208将简单地平移入视图。

作出步骤3不需要被应用的确定，因为作出的唯一变化是阶段外添加，它们被从步骤3的数据动画化中专门排除。

图2在210示出了由步骤4最终视图动画化执行的动画化的三个帧。线段208平移入视图，而视图的其他部分平移出视图。在210处所示出的动画化帧中，虚线示出了用户看不见但是在视图中被裁剪的线段。需要注意的是，水平轴也在动画化中变化。

图2在212示出了步骤5，阶段外移除。具体而言，在步骤4的动画化之后，线段214平移出视图并在视图中被裁剪。在步骤5中，线段214被移除。

图3示出了另一示例，其中新线序列被添加到视图中。图3示出了初始视图302以及最终视图304。图3还示出了确定应用上文所描述的五个步骤中的哪一个以及如何应用它们。例如，在306，图3示出了步骤1，阶段外添加。具体而言，在步骤1中，添加了线段308。线段308在被添加时是不可见的，而是被裁剪。

作出步骤2不需要被应用的确定。具体而言，没有必要改变轴或视图，因为线段308将简单地平移入视图。

在步骤3中，执行数据动画化，如在316所示。在步骤3中，没有元素被移除或移动，但是，添加了线序列318。线序列318可以淡入或迅移进入。

图3在310示出了由步骤4最终视图动画化执行的动画化的三个帧。线段308平移入视图，而视图的其他部分平移出视图。进一步，线序列318的某些部分平移入视图，而线序列318没有任何部分平移出视图。在310处所示出的动画化帧中，虚线示出了用户看不见但是在视图中被插裁剪的线段。需要注意的是，水平轴也在动画化中被平移。

图3在312示出了步骤5，阶段外移除。具体而言，在步骤4的动画化之后，线段314平移出视图并在视图中被裁剪。在步骤5中，线段314被移除。

图4示出了散点图示例，其中在散点图中添加了点、移除了点、且移动了点。图4示出了初始视图402、最终视图404以及发生了什么的概要420。图4示出了散点图。由于散点是非平移元素，因此不执行阶段外添加。图4在422示出了在通过动画化来改变水平轴的情况下执行的设置阶段动作。图4在416示出了数据通过将点移除、点移动以及点添加动画化来进行动画化。图4在410示出了到最终视图的动画化。同样，由于这是散点图，因此，不执行阶段外移除。

图5示出了其中一个柱在量级上增加的柱状图动画化，包括初始视图502以及最终视图504。在此示例中，没有阶段外添加。如在506所示出的，执行的设置阶段动作，其中通过动画化来改变垂直轴。在516，图5示出了通过将对柱“B”的更改动画化的数据动画化步骤。对于此特定示例，不执行最终视图动画化或阶段外移除动画化。

现在参考图6，示出了其中一个柱降低的柱状图动画化的示例，包括初始视图602以及最终视图604。在此示例中，没有阶段外添加。在616，图6示出了通过将对柱“C”的更改动画化的数据动画化步骤。在610，图6示出了导致垂直轴动画化到较小比例的最终视图动画化(还导致柱“A”、“B”以及“C”动画化以匹配该比例)。对于此特定示例，不执行阶段外移除动画化。

现在参考图7，示出了另一示例，示出了其中添加和移除了柱的柱状图，如初始视图702、最终视图704以及示出了发生了什么的概述720所示。如在706所示，执行阶段外添加，以添加新柱“G”，如在708所示。如在722所示，执行设置阶段动画化，以扩展垂直轴并缩小柱A、B、D、E和F以匹配新比例。在716，执行数据动画化步骤，其中(a)移除被动画化或迅移出视图，包括柱A以及E；(b)移动以及改变被动画化，如水平轴向左移动、柱D大小变大，以及柱G平移入视图所示出的；以及(c)添加新柱C。在此示例中，不需要最终视图动画化，因为水平轴以及垂直轴已经正确。此示例不需要阶段外移除。

各方法可由包括一个或多个处理器和诸如计算机存储器等计算机可读介质的计算机系统来实施。特别是，计算机存储器可以存储计算机可执行指令，该计算机可执行指令在由一个或多个处理器执行时使各种功能得以被执行，诸如各实施例中记载的动作。

本发明的各实施例可以包括或使用包括计算机硬件的专用或通用计算机，如以下更详细讨论的。本发明范围内的各实施例也包括用于实现或存储计算机可执行指令和/或数据结构的实体及其他计算机可读介质。这样的计算机可读介质可以是可由通用或专用计算机系统访问的任何可用介质。存储计算机可执行指令的计算机可读介质是物理存储介质。承载计算机可执行指令的计算机可读介质是传输介质。由此，作为示例而非限制，本发明的各实施例可包括至少两种显著不同的计算机可读介质：物理计算机可读存储介质和传输计算机可读介质。

物理计算机可读存储介质包括RAM、ROM、EEPROM、CD-ROM或其他光盘存储器(诸如CD、DVD等)、磁盘存储器或其他磁性存储设备、或者可用于存储计算机执行指令或数据结构形式的期望程序代码装置并且可被通用或专用计算机访问的任何其他介质。

“网络”被定义为使得电子数据能够在计算机系统和/或模块和/或其它电子设备之间传输的一个或多个数据链路。当信息通过网络或另一个通信连接(硬连线、无线、或者硬连线或无线的组合)传输或提供给计算机时，该计算机将该连接适当地视为传输介质。传输介质可以包括可用于携带计算机可执行指令或数据结构形式的期望程序代码装置并可被通用或专用计算机访问的网络和/或数据链路。以上的组合也被包括在计算机可读介质的范围内。

此外，在到达各种计算机系统组件之后，计算机可执行指令或数据结构形式的程序代码装置可从传输计算机可读介质自动转移到物理计算机可读存储介质(或者相反)。例如，通过网络或数据链路接收到的计算机可执行指令或数据结构可被缓存在网络接口模块(例如，“NIC”)内的RAM中，并且然后最终被传输至计算机系统RAM和/或计算机系统处的较不易失性的计算机可读物理存储介质。因此，计算机可读物理存储介质可以被包括在同样(或甚至主要)利用传输介质的计算机系统组件中。

计算机可执行指令包括例如使通用计算机、专用计算机或专用处理设备执行某一功能或一组功能的指令和数据。计算机可执行指令可以是例如二进制代码、诸如汇编语言之类的中间格式指令、或甚至源代码。尽管用结构特征和/或方法动作专用的语言描述了本主题，但可以理解，所附权利要求书中定义的主题不必限于上述特征或动作。更具体而言，上述特征和动作是作为实现权利要求的示例形式而公开的。

本领域的技术人员将理解，本发明可以在具有许多类型的计算机系统配置的网络计算环境中实践，这些计算机系统配置包括个人计算机、台式计算机、膝上型计算机、消息处理器、手持式设备、多处理器系统、基于微处理器的或可编程消费电子设备、网络PC、小型计算机、大型计算机、移动电话、PDA、寻呼机、路由器、交换机等等。本发明也可在其中通过网络链接(或者通过硬连线数据链路、无线数据链路，或者通过硬连线和无线数据链路的组合)的本地和远程计算机系统两者都执行任务的分布式系统环境中实施。在分布式系统环境中，程序模块可位于本地和远程存储器存储设备两者中。

替换地或另选地，此处描述的功能可以至少部分由一个或多个硬件逻辑组件来执行。例如、但非限制，可使用的硬件逻辑组件的说明性类型包括现场可编程门阵列(FPGA)、程序专用的集成电路(ASIC)、程序专用的标准产品(ASSP)、片上系统系统(SOC)、复杂可编程逻辑器件(CPLD)、等等。

本发明可以以其他具体形式来体现，而不背离其精神或特征。所描述的实施例在所有方面都应被认为仅是说明性而非限制性的。因此，本发明的范围由所附权利要求书而非前述描述指示。在权利要求书的等价物的含义和范围内的所有变化应被包含在其范围内。

Claims (7)

1.一种以能够处理正被添加到用户界面中的数据、正从所述用户界面移除的数据或在所述用户界面中正被修改的数据的方式更新图形用户界面元素的方法，所述方法包括：

访问图形用户界面，所述图形用户界面显示包括图形元素的初始视图；

对于下列各项中的每一项，确定是否执行每一动作并按顺序执行适用于给定视图情况的下列各项中的任何一项：

(1)在所述图形用户界面中更新在所述初始视图外的任何平移元素；

(2)动画化所述图形用户界面的轴中的任何变化，以设置数据修改的阶段；

(3)在所述图形用户界面中执行任何数据元素动画化，包括全部更新的任何移动、任何添加、任何移除以及任何改变，除了当更新在所述初始视图外的任何平移元素时已经添加的那些以及将不会在最后视图中可见的平移元素移除之外；

(4)将所述轴中的任何变化动画化到所述最终视图；以及，

(5)更新现在在视图外的任何剩余元素。

2.如权利要求1所述的方法，其特征在于，在所述图形用户界面中执行任何数据元素动画化包括按顺序执行下列各项：

a.使正在被移除的任何元素消失；

b.移动将被移动的任何元素；

c.使正在被添加的任何元素出现；

3.如权利要求2所述的方法，其特征在于，使正在被移除的任何元素消失包括使正在被移除的任何元素淡出视图。

4.如权利要求2所述的方法，其特征在于，使正在被添加的任何元素出现包括使正在被添加的任何元素淡入视图。

5.如权利要求2所述的方法，其特征在于，使正在被移除的任何元素消失的至少一部分与动画化所述图形用户界面的轴中的任何变化来设置数据修改的所述阶段的至少一部分并行地执行。

6.如权利要求2所述的方法，其特征在于，使正在被添加的任何元素出现的至少一部分与将所述轴中的任何变化动画化到所述最终视图的至少一部分并行地执行。

7.如权利要求1所述的方法，其特征在于，更新现在在视图外的任何剩余元素包括移除视图元素。