Windows 应用商店应用的动画模式

显示页面之间转换的 Windows 应用商店应用 UI

了解如何使用有针对性的动画直观地与体验联系起来,并进行阐述。 设计特定于 Windows 8 方案的动画的目的是传达信息,帮助人们看到预期效果以及构建信任感。请参阅实现 UI 动画部分中的详细指南以及操作方法主题。

启动你的应用

显示应用的第一个页面。

|

JavaScript:使用 enterPage

XAML:使用 EntranceThemeTransition

另请参阅使用动画库创建过渡动画

页面之间的过渡

从应用的一个页面过渡到另一个页面。

|

JavaScript:使用 exitPage,然后使用 enterPage

XAML:使用 EntranceThemeTransition

另请参阅使用动画库创建过渡动画

内容之间的过渡

过渡页面内某个区域的内容。

|

JavaScript:使用 exitContent,然后使用 enterContent

XAML:使用 ContentThemeTransition

另请参阅使用动画库创建过渡动画

触摸和单击反馈

显示用户触摸或单击磁贴的视觉反馈。

|

JavaScript:使用 pointerDownpointerUp

XAML:使用 PointerDownThemeAnimationPointerUpThemeAnimation

另请参阅使用动画库创建指针动画

显示过渡 UI 或控件。

显示和隐藏过渡 UI 或控件。

|

JavaScript:使用 fadeInfadeOut

XAML:使用 FadeInThemeAnimationFadeOutThemeAnimation

另请参阅使用动画库创建 UI 元素动画

刷新

刷新内容或创建现有页面布局更改的动画。

|

JavaScript:使用 crossFade

XAML:使用 FadeOutThemeAnimationFadeInThemeAnimation

另请参阅使用动画库创建 UI 元素动画

显示其他控件或内容内联

留出空间并显示现有 UI 中的其他控件或内容。

|

JavaScript:使用 createExpandAnimationcreateCollapseAnimation

XAML:不可用

添加或从列表中删除项

添加或从列表中删除一个或多个项。

|

JavaScript:使用 createAddToListAnimationcreateDeleteFromListAnimation

XAML:使用 AddDeleteThemeTransition

另请参阅使用动画库创建列表和列表项的动画

搜索时筛选列表

搜索时快速添加或从列表中删除多个项。

|

JavaScript:使用 createAddToSearchListAnimationcreateDeleteFromSearchListAnimation

XAML:不可用

另请参阅使用动画库创建列表和列表项的动画

显示命令或消息栏

显示和隐藏位于屏幕边缘的命令或消息栏。

|

JavaScript:使用 showEdgeUIhideEdgeUI

XAML:使用 EdgeUIThemeTransition

另请参阅使用动画库创建 UI 表面动画

显示任务窗格

显示和隐藏屏幕边缘的任务窗格或其他较大的 UI 容器。

|

JavaScript:使用 showPanelhidePanel

XAML:使用 PaneThemeTransition

另请参阅使用动画库创建 UI 表面动画

显示弹出 UI

显示和隐藏弹出 UI,如弹出窗口或上下文菜单。

|

JavaScript:使用 showPopuphidePopup

XAML:使用 PopInThemeAnimationPopOutThemeAnimation

另请参阅使用动画库创建 UI 表面动画

拖动

拖动项以对列表重新排序。

|

JavaScript:使用 dragSourceStartdragSourceEnddragBetweenEnterdragBetweenLeave

XAML:使用 DragItemThemeAnimationDropTargetItemThemeAnimationDragOverThemeAnimation

另请参阅使用动画库创建列表和列表项的动画

用轻扫的方式选择磁贴

用户执行轻扫手势之后,磁贴动画返回其静止位置。

|

JavaScript:使用 swipeSelectswipeDeselect

XAML:使用 SwipeBackThemeAnimation

显示轻扫的功能

用动画来指示磁贴支持轻扫手势。

|

JavaScript:使用 swipeReveal

XAML:使用 SwipeHintThemeAnimation

更新磁贴

更新磁贴上的所有内容,或快速暂时显示磁贴上的其他信息。

|

JavaScript:使用 createPeekAnimation

XAML:不可用

更新锁屏提醒

使用新值更新数字锁屏提醒。

|

JavaScript:使用 updateBadge

XAML:不可用

重新定位

重新定位 UI 或内容。

|

JavaScript:使用 createRepositionAnimation

XAML:使用 RepositionThemeTransition

另请参阅使用动画库创建 UI 元素动画

相关主题

Windows 应用商店应用的 UX 指南
创建 UI 动画

 

 

显示:
© 2014 Microsoft