专利名称：连续和不连续的属性的平滑布局动画的制作方法
连续和不连续的属性的平滑布局动画
背景技术：
现代用户界面工具包使用布局管理器来创建可动态地调整大小的用户界面。布局管理器是具有在不使用距离单位的情况下按组件(有时称为窗口小部件)的相对位置对其布局的能力的软件组件。以此方式来定义组件布局而非用像素或常用距离单位来定义组件位置常常是更普遍的，所以许多流行的窗口小部件工具包默认地包括这种能力。窗口小部件工具包常常允许设计者将窗口小部件放置在布局容器内，在该容器被呈现时其具有特定布局特征。Windows演示基础(WPF)和微软Silverlight是提供布局管理器的工具包的两个示例。设计者用可扩展应用程序标记语言(XAML)来描述用户界面(UI)组件，并且可以使用诸如微软Visual State Manager的应用程序编程接口(API)来定义UI状态和转变。使用布局管理器的一个理由是实现应用程序的自动调整大小，从而使得UI可以在具有不同显示分辨率和可调节大小且可重新配置的窗口的设备上正确地工作。布局管理器用于自动地确定屏幕上图形元件和控件的布局。布局管理器通常通过迫使它们的子件 (图形元件、UI元件)与某种布局规则相符合来操作。例如，栈面板可以迫使其子件进入水平或垂直栈，只控制对象相对于彼此的相对位置。作为另一个示例，统一栅格可迫使对象被安排在栅格中，每一子件具有固定大小。表样式布局可迫使子件符合行和列定义，并定义位置边缘来控制定位和大小。对于动态的用户界面，在UI组件的不同布局之间转变常常是有用的。例如，当用户在“更多”按钮上点击时，设计者可能想要使一个组件的区域扩展并显示更多的UI控件。 出于可用性原因，设计者希望转变是平滑的并且允许详细的控制。在某些场景中，仅仅在两个完全不同的UI屏幕之间淡去是足够的，但当图形元件或用户界面控件的布局被设计成从一个布局到另一布局平滑地变形时，这种技术不起作用。例如，设计者可能想要在用户登录到应用程序之后面板看上去从左侧飞出。诸如微软Visual State Manager的当前动画系统自动地将从一个状态到另一状态的转变动画化。在先前的示例中，动画系统使得面板动画化为在到达最终完整显示的位置之前从显示器的左侧通过若干中间位置。这些自动的转变对于动画系统可在两个值之间轻松地变化的连续属性是有用的。 例如，动画系统通过使用中间值(例如，20^^40%和80% )可轻松地改变始于第一状态的 0%并且结束于第二状态的100%的不透明度。不幸的是，在存在布局管理器的情况下定义布局的属性中的很多是离散的(例如，改变网格的列数量)或者可甚至具有被自动地计算的值(例如，将行宽度设置为“自动”)。使用当前的技术很难实现在存在这样的离散属性的情况下布局之间的平滑布局转变(即，变形)。对这样的属性的动画制作或者是不可能的， 或者导致突然的布局切换而不是平滑的转变。当前的动画系统无法平滑地动画化用于这些类型的属性的转变。
发明内容
此处描述了执行用于布局的属性的平滑转变的布局动画系统，无需考虑布局属性是离散的还是被自动计算的。布局动画系统通过在参与布局状态的每一个中提取元素的几何信息来解决包含对不连续属性的改变的两个给定的布局状态之间变形的问题。在执行转变之前，布局动画系统提取并存储跨布局分层结构的参与元素的定位、大小和可视性。系统首先将受影响的元素置于与传出状态请求相同的位置、大小和可视性。对于每个元素，系统计算将该元素从传出位置、大小和可视性转变为传入位置、大小和可视性的平滑动画。对于可视性，注意使用附加的不透明度动画来引入平滑的淡入动画。系统随后在期望的转变时间期间动画化该元素。这样，布局动画系统在存在自动布局管理的情况下提供创建用于各种类型的属性的平滑布局转变的能力。提供本发明内容以便以简化形式介绍在以下详细描述中进一步描述的一些概念。 本发明内容并不旨在标识所要求保护主题的关键特征或必要特征，也不旨在用于限制所要求保护主题的范围。
图1是示出在一个实施例中布局动画系统的各组件的框图。图2是示出在一个实施例中由系统执行的对UI元素的动画制作的显示图示。图3是示出一个实施例中标识在特定的状态转变期间可移动的潜在目标UI元素的系统的处理的流程图。图4是示出一个实施例中对UI元素从传出状态到传入状态的转变进行平滑地动画化的系统的处理的流程图。
具体实施例方式此处描述了执行用于布局属性的平滑转变的布局动画系统，无需考虑布局属性是离散的还是被自动计算的。离散属性的示例是可视性。UI元素在一个状态中可以是可视的，并且在另一个状态中是不可视的。布局动画系统通过在参与布局状态的每一个中提取元素的几何信息来解决两个给定的布局状态之间变形的问题。在布局转变的执行期间，参与UI元素不受其布局管理器的控制(例如，通过添加补偿布局管理器为动画化UI元素所进行的动作的布局的额外层)，并且由布局动画系统直接在显示表面上动画化该参与UI元素，而无需布局管理。一旦元素已经达到其目的地位置和大小，系统将元素返回至布局系统中的它们的位置，并且布局系统再次接管控制。这样，布局动画系统在存在自动布局管理的情况下提供创建用于各种类型的属性的平滑布局转变的能力。布局动画系统如下管理转变。在执行转变(或变形)之前，布局动画系统提取并存储在坐标中跨布局分层结构的所有参与元素(两个图元，诸如图形元素和控件、以及布局容器)的定位、大小和可视性。当执行转变时，系统可将改变布局属性(例如，大小、位置、 可视性等)的每个元素包装在绘图容器中而无需布局管理(例如，WPF中的画布)，从而系统可(例如，通过逐渐地改变相对于画布的左侧和顶部坐标)平滑地动画化该元素(因为这些属性是浮点数)。另选地或另外地，当布局动画正在进行时(或在布局异常列表中存储这样的元素)，系统可请求布局管理器不向元素的容器广播新的大小/位置。系统首先将受影响的元素置于与传出状态请求相同的位置、大小和可视性。在某些实施例中，该步骤可在系统干预之前由传统的布局管理器执行以提供平滑动画。对于每个元素，系统计算将该元素从传出位置、大小和可视性转变为传入位置、大小和可视性的平滑动画。对于可视性，注意使用附加的不透明度动画来引入平滑的淡入动画。系统随后在期望的转变时间期间动画化该元素。在元素已经到达目的地位置之后，系统将元素放置回到适当的布局容器中。随后，布局动画系统释放对参与元素的控制，并且由布局管理器再次控制行为。离散或已计算的属性可包括各自UI元素设置。例如，栅格布局可包括行和列标识符，而非UI元素被定位的坐标。UI元素在两个状态之间从一列到另一列的转变是离散的属性变化(例如，栅格.列)，但实际上可以将元素移动某些距离并改变元素的宽度和/或高度。尽管列属性在状态之间正在改变，但布局动画系统通过元素的起始和最终位置之间的若干中间位置来修改元素的位置和大小属性，以使得动画制作是平滑的。已计算属性值的示例是将元素的高度属性从明确的高度改变为“自动”的值，该值指示基于该元素周围的其他元素动态地调整该元素的高度。平台本身在例如高度5和自动的值之间不存在逐步的修改。但是，布局动画系统通过修改元素的大小属性来平滑地动画化转变。图1是示出在一个实施例中布局动画系统的各组件的框图。布局动画系统100包括状态管理组件110、确定状态增量组件120、状态快照组件130、快照比较组件140、元素动画组件150、和元素隔离组件160。此处更详细地描述了这些组件中的每一个。状态管理组件110存储UI可存在的多个状态，并且接收从一个状态转变为另一状态的指示。状态可以用诸如XAML文件的声明性格式来存储。设计者可以通过在视觉上在设计者工具中将控件布局在画布上来创建状态，或者可以手动地将控件定义添加到声明性格式文件。声明性格式还可以包含转变信息，诸如引起转变的条件(例如，鼠标悬停、按钮点击等)以及转变的属性(例如，持续时间)。例如，可以使用微软的Visual State Manager 来将这些存储为XAML文件中的"Triggers (触发)和/或VisualMates (视觉状态)。转变可以基于不同应用程序的各种目的由应用程序逻辑引起。确定状态增量组件120将传入和传出状态进行比较以确定在状态之间变化的布局属性和将要变化的对应的UI元素。布局属性可以包括许多不同的属性类型，诸如栅格布局的列和行(以及列扩展和行扩展)、画布的顶部和左侧属性、可视性属性、栈方位、对接器布局中的对接方向、扩展器布局的扩展属性、包装面板布局的方位和项宽度/高度，以及各个元件位置属性(例如，宽度、高度、最小宽度、最小高度、最大宽度、最大高度、边缘、填充、 水平对齐和垂直对齐)。当确定状态增量组件120确定出UI元素的布局属性在转变期间变化时，确定状态增量组件120还将该元素的父元素和兄弟元素添加到变化的一组元素中， 因为由于布局属性正在改变的元素的新参数，这些元素也可以被重新定位。处理子元素通常是不必要的，因为当其双亲改变时它们通常自动地改变，并且对于被证实为复杂的情形， 子元素可以构建其自己的布局动画。状态快照组件130拍摄其中定位布局的每个UI元素的矩形的快照。该矩形是表示实际上不可见的元素维度的UI元素的抽象边界。注意，系统还可用于处理三维动画，所以快照可以包括边界框而非矩形。状态快照组件130拍摄两个快照，一个在通知UI元素其正处在传出状态之后，而另一个在通知UI元素其正处在传入状态之后。在某些实施例中， 布局动画系统提供用于请求在实际上不呈现UI元素的情况下UI元素改变状态的API。快照比较组件140将传入状态和传出状态的快照进行比较以确定哪些UI元素实际上改变了。对于每个元素，快照比较组件140确定在传入和传出状态的每一个中改变的每个属性的值，并随后确定由元素动画组件150修改以动画化该属性的转变的适当的属性。例如，对于可视性属性，快照比较组件140可确定不透明度是通过若干中间状态修改以创建传出和传入布局状态之间的平滑转变的适当的属性。在转变的动画制作期间，系统修改不透明度属性，并且在对传入状态的最终动画制作时，系统将可见性属性修改为其离散值(例如，用于不可见的，假)并且将不透明度属性重置为其原始值。确定状态增量组件120和快照比较组件140在不同的条件下执行类似的功能。确定状态增量组件120在转变发生之前比较状态以提供对将在转变期间改变的比较属性的估计。但是，确定状态增量组件120在其标识为改变的UI元素中实际上是过于包含性的， 而无需实际上执行转变。另一方面，快照比较组件140在每个状态为活动时比较布局属性的快照。在传出状态为活动时拍摄起始快照，并且在已经作出到传入状态的转变之后(例如，发生在存储器中的转变，而其尚未被呈现给屏幕)拍摄结束快照。快照比较组件140随后将实际上改变的那些UI元素传递给元素动画组件150以平滑地动画化该转变，并且通过传统的布局路径传递实际上没有改变的任何附加的UI元素。此外，传统的动画路径可动画化在不具有布局反响(例如，背景颜色)的状态增量中改变的任何属性。元素动画组件150在传出状态和传入状态之间平滑地动画化元素。例如，如果元素始于一个位置并移向另一个位置，则元素动画组件150将该元素从起始位置移动到结束位置，其间通过若干中间位置来向用户提供平滑移动的表象。虽然此处使用矩形和矩形坐标作为示例，但本领域技术人员将明白，该系统可用于各种类型的坐标和转变动作。例如， 该系统可以使用其中元素通过旋转角来动画化的极坐标系统。作为另一个示例，特定的UI 布局可以定义蜿蜒路径，UI元素沿着该路径移动从传出状态变为传入状态。在某些实施例中，布局动画系统100包括将元素的移动与其他元素相隔离的元素隔离组件160。因为布局管理器动态地确定元素布局和位置，所以改变一个元素的大小和位置可能使得其他元素的布局也改变。这在转变动画化的上下文中可能是不期望的，所以元素隔离组件160可以创建包含元素动画组件150正在动画化的元素的临时容器。元素隔离组件160基于传入状态来设置容器的大小和位置，并随后将容器内的元素从其传出状态位置和大小动画化成其传入状态位置和大小。因为容器大小和位置在转变期间不改变，所以其他元件不会受到动画制作的影响。当转变完成后，元素隔离组件160从布局中移除该临时容器。另选地或另外地，布局管理器可以提供标志，布局动画系统设置该标志来通知管理器对元素的一组特定的改变未影响其它元素。在其上实现了系统的计算设备可包括中央处理单元、存储器、输入设备(例如，键盘和指示设备)、输出设备(例如，显示设备)，以及存储设备(例如，磁盘驱动器或其他非易失性存储介质)。存储器和存储设备是可以编码有实现或启用系统的计算机可执行指令 (例如，软件)的计算机可读存储介质。此外，数据结构和消息结构可以被存储或通过诸如通信链路上的信号之类的数据传输介质传输。可以使用各种通信链路，诸如因特网、局域网、广域网、点对点拨号连接、蜂窝电话网络等。系统的各实施例可以在各种操作环境中实现，操作环境包括个人计算机、服务器计算机、手持式或膝上型设备、多处理器系统、基于微处理器的系统、可编程消费电子产品、 数码相机、网络PC、小型计算机、大型计算机、包括上述系统或设备中的任一个的分布式计算机环境等。计算机系统可以是蜂窝电话、个人数字助理、智能电话、个人计算机、可编程的消费电子产品、数码相机等。
可以在由一台或多台计算机或其他设备执行的诸如程序模块之类的计算机可执行的指令的一般上下文中来描述本系统。一般而言，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。通常，程序模块的功能可以按需在各个实施例中进行组合或分布。图2是示出在一个实施例中由系统执行的对UI元素的动画制作的显示图示。UI 元素始于传出状态中的起始位置210，并且终止于传入状态中的结束位置230。为了动画化转变，系统首先在结束位置230使用临时容器240对UI元素进行包装。临时容器240确保 UI元素的移动与诸如UI元素250的其他元素的观察相隔离。出于转变的目的，UI元素的结束位置230被认为是坐标(0，0)。使用此处描述的快照过程，系统确定起始位置是相对于容器的坐标(_500，_500)。注意，在基于布局的系统中，不使用几何坐标来放置UI元素，并且使得UI元素最初位于初始位置210及之后位于结束位置230的行为实际上可以是没有相关联的坐标的某些属性的改变。例如，设计者可以将对齐属性从左上改变为右下从而导致从起始位置210到结束位置230的移动。对于诸如对齐的属性不存在逻辑的中间状态。 但是，通过对传出和传入状态中UI元素的实际坐标拍摄快照，系统能够基于快照坐标平滑地动画化UI元素的移动。这样，系统通过至少一个中间位置220来动画化UI元素，从而使用户看起来元素平滑地从起始位置210移动至结束位置230对临时容器240的使用允许系统仅对感兴趣的UI元素进行动画化，并且使其他元素不会在显示器周围不规律地跳出。例如，如果UI元素250具有被设为“自动”的宽度以使其填满全部可用宽度，则在随着动画UI元素从起始位置210移至中间位置220，并最终到达结束位置230的动画制作中，UI元素250会对自己重新定位。相反，临时容器240在动画制作中不移动，因此UI元素250保持不动。此外，UI元素250由于相同的布局改变或甚至另一个布局改变可能经历其自身的布局动画制作，并且系统避免来自干扰正在进行的任何其他动画制作的当前动画制作的任何负效应。根据传统的布局规则，当转变动画制作结束时， 除非再次调用布局动画系统的状态转变发生，系统移除临时容器240并且布局会再一次响应。图3是示出一个实施例中标识在特定的状态转变期间可移动的潜在目标UI元素的系统的处理的流程图。始于框310，系统对传出状态和传入状态进行比较以确定不同的任何基于布局的属性。例如，系统可枚举布局属性，并在传出和传入状态中的每个布局属性的值上执行相等或类似的编程测试。继续框320，系统基于比较标识已改变的布局属性。注意，即使布局属性改变了，UI元素实际上可能没有移动。例如，如果对齐属性从左改为右， 但UI元素被夹在其他元素之间，它的位置可能与任一个对齐相同。这是可以接受的，此时系统的一个目标是标识包括实际上将改变布局的任何元素的一组UI元素，无论系统是否是过于包含性的并包括被证实为不改变的某些元素。将使用图4中描述的方法最终过滤出这些种类的元素。继续框330，系统存储已改变的UI元素，这些UI元素已标识数据结构中的正改变的布局属性。例如，系统可存储存储器列表中已改变的UI元素的集合。继续框340，对于所标识的每个UI元素，系统向已存储的UI元素添加相关的(例如，兄弟或双亲)UI元素。兄弟和双亲UI元素通常受到特定的UI元素的布局中改变的影响。子元素也可包括在内，虽然在很多布局系统中子元素将自动地且适当地适应双亲的布局改变，因此这可以发生而无需系统的进一步干预。继续框350，系统平滑地动画化每个所标识的UI元素的转变，这将参考图4予以进一步描述。在框350之后，这些步骤结束。图4是示出一个实施例中对UI元素从传出状态到传入状态的转变进行平滑地动画化的系统的处理的流程图。始于框410，系统拍摄由参考图3此处描述的过程所标识的 UI元素的位置和其他可视属性的快照。注意，系统可对由之前过程所标识的每个元素执行这些步骤，并且对于每个元素，这些步骤可顺序地或并行地进行。系统还可存储UI元素的有效不透明度，其中有效不透明度为可视性乘以不透明度。换言之，如果可视性为零或假， 则系统可以不存储不透明度，但如果可视性为真，则不透明度给出可视性程度并且系统存储不透明度。继续框420，系统停止任何之前进行的转变。由于布局UI是动态的并且用户可与 UI交互，因此当接收到新的状态改变请求时，系统可能处于前一状态改变的中间转变。这是相对常见的，并且可使系统基于新的传入状态动画化从UI元素的当前位置到UI元素新的结束位置的转变。继续框430，系统通知UI元素，布局已经改变为新的状态。系统以UI元素更新其位置和布局属性的全部但实际上不向显示器呈现转变的方式执行上述操作。以此方式，系统可访问处于其结束值的UI元素属性中的每一个，而无需向用户示出任何动画。继续框440，既然UI元素处于传入状态，则系统拍摄该UI元素的位置和其他可视属性的快照。这在动画制作结束时将UI元素将终止于何处通知给系统。系统可再次存储 UI元素的有效不透明度，或者可按需从元素的当前属性值读取。继续框450，系统比较这两个快照以确定UI元素是否以某种方式(例如，可视性、对齐)移动或改变外观。该系统使用比较结果以创建用于UI元素的一系列中间位置/外观，从而提供从传出状态到传入状态的平滑的动画转变。继续判定框460，如果UI元素的外观改变了，则系统在框470继续，否则系统结束， 允许UI元素使用传统的动画来转变。继续框470，系统将UI元素包装在临时容器(例如， 画布)中，该临时容器将UI元素的移动在动画制作期间与其他UI元素隔离。继续框480，系统通过逐步地修改外观属性的值来动画化UI元素的转变，该外观属性以使UI元素的外观改变对用户而言显得平滑的方式来模拟传出和传入状态之间的改变。系统从抽象层转变，其中定性的布局属性(例如，对齐、列)正被动画化为正对定量的布局属性(例如，宽度、高度、χ/y坐标)进行动画化的抽象层。该转变中固有的是前一属性看起来是急动的且并不有助于好的用户体验，而后者是平滑的且有助于好的用户体验。 系统基于状态之间转变的所指定的持续时间来确定该系列中中间外观之间的多个中间外观和转变的速度。对于颜色，系统可在起始和结束颜色之间逐步地动画化红色、绿色和蓝色的值。在某些实施例中，传统的动画系统和布局动画系统可并行运行(未示出)，传统的动画系统处理非布局属性改变(例如，颜色)，而布局动画系统处理布局属性改变(例如，对齐)。对于修改元素的位置的布局属性改变，系统逐步地修改UI元素的坐标以生成平滑的移动。对于诸如可视性的其他属性，系统可修改诸如不透明度的相关属性以创建平滑地改变的可视性的外观。继续框490，系统从UI元素移除临时容器以便UI元素被放置回到其在布局分层结构中的正常位置，从而使得对其的任何修改将重新影响周围的元素。在框490之后，这些步
骤结束ο
在某些实施例中，布局动画系统调用可插入的布局容器来执行对转变的动画制作。特定的容器设计者可能想要一种此处描述的默认移动以外的状态之间的移动。布局动画系统向可插入的容器要求起始和结束状态，拍摄状态的快照，当快照不同时通知容器，并且请求容器执行从起始状态到结束状态的动画制作。可插入的容器还可提供从改变布局属性到动画属性的映射，系统使用动画属性用于由布局属性产生的转变。在某些实施例中，布局动画系统操作于使用布局管理的某些UI元素以及不使用布局管理的其他UI元素上。例如，UI可包括根据绝对坐标定位的元素以及相对于其他UI 元素定位的UI元素。系统可动画化相对定位元素的改变，而不影响绝对定位的元素。系统还可允许设计者针对特定的状态组切换平滑布局打开或关闭，由此具有平滑布局打开的状态组使用此处描述的技术，而具有平滑布局切换关闭的组使用传统的布局动画技术。在某些实施例中，布局动画系统还注意到被中断的转变。在任何给定的时间有可能将转变“重定向”到不同的变形目标状态。当用户切换按钮时UI布局可能变为一个状态， 而当用户再次切换该按钮时UI布局可能变为另一个状态。如果用户快速地反复切换按钮， 则当用户的动作逆转转变时布局可能处于中间转变。该系统通过根据新的最终状态动画化从中间转变位置的布局来平滑地处理这种情况。以下是使用以微软Silverlight使用的XAML形式的状态和转变定义用户界面元素的示例。XAML UI元素通常被定义为<vsmVisualStateManager. VisualStateGroups>oneOrMoreVisualStateGroups</vsmVi sualStateManager. VisualStateGroups>前缀vsm映射到System. Windows命名空间和汇编件。对于前缀vsm，映射被声明为 xmlnsvsm = “ clr-namespaceSystem. Windows ；assembly = System. Windows“。文本“oneOrMoreVisualStateGroups” 是指 VisualStateGroup 类型的一个或多个对象元素。设计者将VisualMateGroup对象添加到VisualMateManager. VisualStateGroups附加属性以表示控制的状态。每个VisualMateGroup包含互斥的可视状态(VisualMate)对象的集合。控制作者通过调用VisualMateManager GoToState方法在状态之间转变。这种分开允许(没有编程经验的)设计者声明性地以XAML设计用户界面，而作为程序员的控制作者定义应用程序的用户界面背后的逻辑。以下示例为包含一个栅格(Grid)的按钮(Button)创建简单的控制模板 (ControlTemplate)。不例在栅格上设置 VisualStateManager. VisualStateGroups 属性。VisualStateManager. VisualStateGroups 包含一个称为常见状态(CommonStates) 的VisualStateGroup，该常见状态定义鼠标在上(MouseOver)和普通可视状态(Normal VisualState)对象。当用户将鼠标放置在按钮上方时，栅格内的矩形(Rectangle)使用多于1.5秒将可视性(Visibility)从可见的(Visible)改变为折叠的(Collapsed)。当用户
将鼠标从按钮移开时，矩形回复为可见的。<ControlTemplate TargetType=nButton" xmlns:vsm="clr-
namespace:System.Windows;assembly=System.Windows"> <Grid >
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates"> <vsm:VisualStateGroup.Transitions>
〈!--Take half second to trasition to the MouseOver state.--〉 <vsm:VisualTransition To="MouseOver" GeneratedDuration="0:0:0.5 "/> </vsm:VisualStateGroup.Transitions><vsm:VisualState x:Name="Normal" /> <!~Collapse the Rectangle when the
mouse is over the button.--〉 <vsm:VisualState x:Name="MouseOver"> <Storyboard> <obj ectAnimationUsingKeyFrames
Storyboard.TargetName="Rectangle 1" Storyboard.TargetProperty="UIElement.Visibility"> <DiscreteObjectKeyFrame KeyTime="00:00:00"> <DiscreteObjectKeyFrame.Value>
<Visibilty>Collapsed</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </Obj ectAnimationUsingKeyFrames〉 </Storyboard> </vsm:VisualState> </vsm:VisualStateGroup> </vsm:VisualStateManager.VisualStateGroups> <vsm:VisualStateManager.CustomVisualStateManager> <Microsoft_Expression_Extensions_Animation: LayoutAware VisualStateManager/> </vsm:VisualStateManager.CustomVisualStateManager> 〈Rectangle x:Name="Rectangle 1 "/> </Grid> </ControlTemplate> 从前面的描述中可以看出，可以理解，此处描述的布局动画系统的特定实施例只是为了说明，但是，在不偏离本发明的精神和范围的情况下，可以进行各种修改。因此，本发明不受限制，只受所附的权利要求书的限制。
1权利要求
1.一种用于将用户界面(UI)元素从传出状态到传入状态的转变平滑地动画化的计算机实现的方法，所述方法包括拍摄由布局管理器安排的所述传出状态中UI元素的位置和其他可视属性的传出快照410 ；将布局已经改变至新的状态通知所述UI元素，以便所述UI元素更新其位置和布局属性但不呈现转变430 ；拍摄所述传入状态中所述UI元素的位置和其他可视属性的传入快照440 ； 将所述传出快照和所述传入快照进行比较以确定所述UI元素是否移动了或改变了外观450 ；以及一旦确定所述UI元素的外观或位置改变了 460，通过逐步地修改外观属性的值来动画化所述UI元素的转变480，以使所述UI元素外观的改变对用户而言显得平滑，所述外观属性模拟所述传出和所述传入状态之间的改变， 其中以上步骤由至少一个处理器来执行。
2.如权利要求1所述的方法，其特征在于，还包括为多个UI元素并行地执行所述方法。
3.如权利要求1所述的方法，其特征在于，拍摄快照还包括存储所述UI元素的有效不透明度，其中所述有效不透明度为可视性乘以不透明度。
4.如权利要求1所述的方法，其特征在于，还包括停止任何之前正在进行的转变。
5.如权利要求1所述的方法，其特征在于，拍摄所述传出状态的快照包括拍摄处于之前正在进行的转变的当前位置的所述UI元素的快照，并且基于所述传入状态来对从所述 UI元素当前的大小和位置到所述UI元素新的结束大小和位置的转变进行动画化。
6.如权利要求1所述的方法，其特征在于，比较还包括使用比较结果以创建用于所述 UI元素的一系列中间位置和外观，从而提供从所述传出状态到所述传入状态的平滑动画转变。
7.如权利要求1所述的方法，其特征在于，动画化所述转变包括，基于用于状态之间所述转变的指定的持续时间来确定多个中间外观。
8.如权利要求1所述的方法，其特征在于，动画化所述转变包括确定已改变的属性类型，并且对于颜色属性类型，在开始颜色和结束颜色之间逐步地动画化红色、绿色和蓝色的值。
9.如权利要求1所述的方法，其特征在于，动画化所述转变包括确定已改变的属性类型，并且对于修改所述UI元素位置的布局属性，逐步地修改所述UI元素的坐标以生成平滑的移动。
10.如权利要求1所述的方法，其特征在于，动画化所述转变包括确定已改变的属性类型，并且对于可视性属性，逐步地修改不透明度属性以创建平滑地改变的可视性的外观。
11.如权利要求1所述的方法，其特征在于，还包括在动画化所述转变之前，将所述UI 元素包装在临时容器中，所述临时容器在动画制作期间将所述UI元素的移动与其他UI元素隔离，并且在动画化所述转变之后，从所述UI元素移除所述临时容器，以便所述UI元素被放置回到布局分层结构中其正常的位置且对其任何修改将再次影响周围的元素。
12.一种用于平滑地动画化状态之间用户界面(UI)转变的计算机系统，所述系统包括处理器和存储器，所述处理器和存储器被配置为执行软件指令； 状态管理组件110，被配置为存储UI可存在的多个状态，并接收从一个状态转变到另一个状态的指示；确定状态增量组件120，被配置为将传入和传出状态进行比较，以确定在状态之间改变的布局属性，和将要改变的对应的UI元素；状态快照组件130，被配置为拍摄在其中定位布局的每个对应的UI元素的区域的快照；快照比较组件140，被配置为将传入状态和传出状态的快照进行比较，以确定哪些UI 元素改变并标识处于每个状态的外观属性的属性值；以及元素动画组件150，被配置为通过显示每个元素的一个或多个中间外观，在所述传出状态和传入状态之间平滑地动画化每个元素。
13.如权利要求12所述的系统，其特征在于，所述状态管理组件还被配置为以可由没有编程经验的设计者编辑的声明性格式来存储状态，其中所述声明性格式还包括转变信息，所述转变信息至少包括导致转变的条件和所述转变的持续时间。
14.如权利要求12所述的系统，其特征在于，由所述确定状态增量组件比较的布局属性中的至少一个属性是从以下各项构成的组中选择的栅格布局的列、栅格布局的行、栅格布局的行扩展、栅格布局的列扩展、画布的顶部属性、画布的左侧属性、可视性属性、栈的方位、对接器布局中的对接方向、扩展器布局的扩展属性、包装面板布局的方位、包装面板布局的项宽度、包装面板布局的项高度、宽度属性、高度属性、最小宽度属性、最小高度属性、 最大宽度属性、最大高度属性、边缘属性、填充属性、水平对齐属性和垂直对齐属性。
15.如权利要求12所述的系统，其特征在于，所述快照比较组件还被配置为确定在所述传入状态和所述传出状态之间改变的每个属性的值，并确定要由所述元素动画组件修改以模拟已改变的属性的转变的适当的属性。
全文摘要
此处描述了执行用于布局属性的平滑转变的布局动画系统，无需考虑布局属性是离散的还是被自动地计算的。在执行转变之前，布局动画系统提取并存储跨布局分层结构的参与元素的定位、大小和可视性。系统将受影响的元素置于与传出状态请求相同的位置、大小和可视性，并将元素动画化为传入状态。对于每个元素，系统计算将该元素从传出位置、大小和可视性转变为传入位置、大小和可视性的平滑动画。系统随后在期望的转变时间期间动画化该元素。这样，布局动画系统在存在自动布局管理的情况下提供创建用于各种类型的属性的平滑布局转变的能力。
文档编号G06F3/14GK102356375SQ201080012707
公开日2012年2月15日 申请日期2010年3月9日 优先权日2009年3月16日
发明者C·朔尔曼, K·B·雅各布, K·L·扬, S·C·怀特 申请人:微软公司