- Windows运行时动画库的动画提供以下优势:
- 符合动画指南的运动
- 在UI状态之间进行快速流畅的过渡,使用户知晓但不会分心
- 向用户指示应用内过渡的视觉行为
二、动画类型
Windows运行时动画系统和动画库实现了更大的目标,即允许控件和UI的其他部分具备动画行为。以下是几个不同类型的动画。
- 主题过渡会在UI中的某些条件(其中涉及预定义Windows运行时XAML UI类型的控件或元素)更改时自动应用。这些称为“主题过渡”,原因是动画支持Windows外观,并且定义所有应用从一个交互模式更改为另一个交互模式时为特定UI方案执行的操作。主题过渡是动画库的一部分。
- “主题动画”是具备预定义Windows运行时XAML UI类型一个或多个属性的动画。主题动画与主题过渡不同,因为主题动画面向一个特定元素并存在于控件中的特定视觉状态,而主题过渡将分配到存在于视觉状态外部的控件属性并影响这些状态之间的过渡。许多Windows运行时XAML控件在情节提要中包含主题动画,这些主题动画是其控件模板的一部分且包含由视觉状态引发的动画。只要你未修改模板,则也将删除内置控件主题动画。若要重新获取它们,你必须在视觉状态的控件集中定义包含主题动画的情节提要。你也可以从不在视觉状态中的情节提要运行主题动画并通过Begin方法开始运行,但这并不常见。主题动画是动画库的一部分。
- “视觉转换”会在控件从其定义的视觉状态之一转换到其他状态时应用。这些是你编写的自定义动画,通常与为控件编写的自定义模板和该模板中的视觉状态定义相关。改动画仅在两个状态之间运行,这个时间通常很短,最多几秒钟。
- 情节提要动画可以随时推移设置Windows运行时依赖属性的动画。情节提要可以定义为可视化过渡的一部分,或者在运行时由应用程序触发。
- 通过新ConnectedAnimationService API提供的已连接动画允许开发人员轻松创建以下效果:某一元素似乎在导航期间在视图之间进行动画处理。
三、库中提供的动画
动画库提供以下动画。单击动画的名称即可了解有关其主要使用方案、这些方案的定义方式的详细信息,还可以查看动画示例。
页面过渡:在Frame中设置页面过渡动画。
内容和进入过渡:让一条或一组内容以动画方式进入或退出视图。
淡入/淡出和交叉进出:显示过渡元素或控件,或者刷新内容区域。
指针向上/向下:提供点击或单击磁贴的视觉反馈。
重新定位:将元素移动到新位置。
显示/隐藏弹出元素:在视图顶部显示上下文UI。
显示/隐藏边缘UI:将基于边缘的UI(包括诸如面板的较大UI)滑入或滑出视图。
列表项更改:从列表中添加或删除某个项目,或者重新排序项目。
拖放:在拖放操作期间提供视觉反馈。
四、内容过渡和进入过渡
使用内容过渡动画(ContentThemeTransition)可以将一条或一组内容移入或移出当前视图。例如,内容过渡动画显示在首次加载页面时或者在更改页面某部分的内容时,不准备显示的
内容。EntranceThemeTransition表示可以在首次加载页面或大部分UI时应用到内容的动作。这样,首次出现的内容可以提供不同于对内容的更改的反馈。EntranceThemeTransition等同于具有默认参数
五、淡入/淡出和交叉进出
使用淡入和淡出动画可以显示或隐藏过渡UI或控件。在XAML中,这些动画将表示为FadeInThemeAnimation和FadeOutThemeAnimation。一个示例就是在可能会由于用户交互而显示新控件的应用栏中。另一个示例涉及到临时滚动条或平移指示器,它们将在一段时间内未检测到任何用户输入时淡出。在随着动态加载内容而从占位符项过渡到最终项时,应用还应使用淡入动画。使用交叉进出动画可以在某个项的状态发生改变时顺利进行过渡;例如,应用刷新视图的当前内容时。XAML动画库不提供专用交叉进出动画(不等效与crossFade),但是你可以使用FadeInThemeAnimation和FadeOutThemeAnimation与重叠计时来获取相同的效果。
六、指针向上/向下
使用PointerUpThemeAnimation和PointerDownThemeAnimation动画可以为用户成功点击或单击磁贴提供反馈。例如,当用户单击或点击磁贴时,播放指针向下动画。释放单击或点击后,播放指针向上动画。
- 重新放置
使用重新定位动画
(RepositionThemeAnimation或RepositionThemeTransition)可以将某个元素移动到新位置。例如,在项目控件中移动标题将使用重新定位动画。
- 显示/隐藏弹出元素
当你在当前视图顶部显示和隐藏Popup或类似的上下文UI时,请使用PopInThemeAnimation和PopOutThemeAnimation。PopupThemeTransition是主题过渡,如果要轻型消除弹出元素,它是有用的反馈。
- 显示/隐藏边缘UI
使用EdgeUIThemeTransition动画可以将较小的基于边缘的UI滑入和滑出视图。例如,在屏幕顶部或底部显示自定义应用栏或在屏幕顶部显示用于错误和警告的UI表面时使用这些动画。使用PaneThemeTransition动画可显示和隐藏窗格和面板。此操作适用于基于边缘的较大UI(例如自定义键盘或任务窗格)。
- 列表项更改
当你在现有列表中添加或删除某个项目时,将使用AddDeleteThemeTransition动画添加动画的表现方式。若要添加,过渡将首先重新定位列表中的现有项,以便为新项腾出空间,然后添加新项。若要删除,过渡将从列表中删除项目,然后在移除删除的项目后,重新定位其余的列表项(如有必要)。
还存在一个当某个项目在列表中更改位置时应用的单独ReorderThemeTransition。创建该过渡动画与使用关联的删除/添加动画删除某个项和将其添加到新位置中不同。
- 拖放
使用拖放动画(DragItemThemeAnimation、DragOverThemeAnimation)和放置动画(DropTargetItemThemeAnimation)可以在用户拖放一个项时提供视觉反馈。
在激活时,动画将向用户显示该列表可以在放置的项目周围重新排列。如果用户需要知道在当前位置放下该项目时会将该项目置于列表中的何处,则这样会很有帮助。动画会提供视觉反馈,表明正在拖动的项目可以放到列表中的其他两个项目之间,以及这些项目将腾出空间。
- 将动画与自定义控件结合使用
UI类型 | 推荐动画 |
对话框 | FadeInThemeAnimation和FadeOutThemeAnimation |
浮出控件 | PopInThemeAnimation和PopOutThemeAnimation |
工具提示 | FadeInThemeAnimation和FadeOutThemeAnimation |
上下文菜单 | PopInThemeAnimation和PopOutThemeAnimtion |
命令栏 | EdgeUIThemeTransition |
任务窗格或基于边缘的面板 | PaneThemeTransition |
任意UI容器的内容 | ContentThemeTransition |
适用于控件或不应用其他动画时 | FadeInThemeAnimation和FadeOutThemeAnimation |