动画基础知识
Visual Studio 中的动画最佳做法
遵循这些规则，确保 Visual Studio IDE 中的一致且用户友好的动画样式。
有选择。 将动画限制为满足特定目的的动画。
计时和速度对于确保过渡感觉快速自然非常重要 ：
在半秒内完成动画转换（500 毫秒）。
经常发生的动画需要足够快，无法中断用户的工作流。 在循环中观看动画并调整计时，直到它感觉正确。
动画不应如此快或令人不快，以至于很难理解，但不太慢，以至于它使过渡变得不耐烦。
使用可变计时强调重要性。 例如，在类图上浏览一系列项目时，在项目之间切换速度，然后放慢速度以专注于重要项。
使用从一种状态到另一种状态的逐步非线性缓 动，给人一种平静和自然的运动感。
如果可能， 请在悬停 时使用微妙的动画来指示鼠标下的交互式元素。
如果你严重依赖功能中的动画，则提供一种方法，以便在“工具选项”>对话框中将其关闭（针对所有功能）作为选项。
一次 只应发生一个动画，只传达一条信息。 移动或尝试传达多个事物的多个对象可能会令人困惑。
微妙很重要。 在大多数情况下，动画不必要求用户注意才能达到其目的。 计时、排序和行为的细微变化可能会显著影响感知，并可能导致有效动画和无效动画之间的差异。
使用动画吸引人们注意某些内容时， 请确保有必要中断用户的思维训练。
通过动画显示进度或状态 时：
当基础进程未推进时停止显示进度移动。
将不确定的进程与确定进程区分开来。
确保动画具有可识别的完成和失败状态。
尽量减少使用显示状态的效果动画，并通过提供实际使用的其他信息来确保它们具有实际价值。 示例包括暂时性状态更改和紧急情况
动画不：
不要使用小动作（在小脚印中移动）。 首选淡化和更改，而不是移动对象。
不要使用在大量屏幕空间上发生的动画。 无论大小如何，这种动画样式都会分散用户注意力。
不要使用与用户当前关注或与之交互的对象无关的动画。
不要使用需要用户交互来重置状态的动画，例如强制用户响应闪烁通知，使其停止闪烁。 以任何方式与他们交互应该足以消除它们。
有关这些最佳做法的应用程序的详细信息，请参阅 动画模式。
动画指标
系统应该在不到 10 毫秒内明显地对用户手势做出反应。
动画转换的完成时间不应超过 500 毫秒。
补偿需要较长时间的转换的一种方法是将其分为两个部分。 例如，动画的第一部分可能是空内容容器（最多 500 毫秒），后跟内容淡入容器（最多 500 毫秒）。
对于可计算的负载时间，首选确定进度指示器（完成百分比进度指示器）。
对于无法计算的加载时间，繁忙的指示器（如光标或嵌入旋转动画（加载或工作指示器）是合适的。
动画作为通信器
在 Visual Studio UI 中，动画仅充当通信工具。 它用于传达各种信息，例如 UI 中的结构更改（例如，菜单打开或关闭时）。 动画可以帮助可视化复杂系统的时间依赖行为，例如安装进度可视化。 动画还可用于通过警报和通知吸引注意力。
UI 动画通常以四种方式运行：可视化、吸引注意力、模拟和响应时间/进度指示器。
可视化
动画可以强调对象的三维性质，并让用户更轻松地可视化其空间结构。 为此，动画可能需要旋转整个圆圈中的对象，慢慢地来回转它，或使对象更近，并稍微增加其大小，以强调滚动或焦点。
尽管三维对象可能随用户控件一起移动，但设计器应提前（以编程方式或手动方式）确定如何以最佳方式对对象进行动画处理，以最佳方式对对象进行动画处理。 然后，用户可以通过将光标置于对象上来激活此编程动画，而用户控制的动作则要求用户了解如何操作对象。 一次将移动限制为单个轴或方向;缩放、旋转或转换，但不能同时执行多个操作。
可视化类别包括数据、关系、状态、结构、序列和时间的各个方面。
数据
说明复杂和变量信息：
在图表和图形等信息可视化效果中移动
单步执行序列、引导教程和分页
标注详细信息、指出和突出显示特定信息
覆盖重点元素上的详细信息和其他信息
从一个结构或组织表示形式到另一个结构或组织表示形式
使用时间滑块、慢跑和穿梭车轮以及传输控件（播放、停止和暂停）来表示随时间的变化
关系
说明项如何相互关联或与给定项相关
显示层次结构和父子或同级关系
一个元素生成另一个元素
一个元素最小化到另一个元素
一个绑定到另一个元素
状态
内容更新
用户焦点和选择
进度
错误
结构
在一个节点上透视结构
重新定位
最小化和最大化，或展开和折叠
序列
幻灯片放映序列
翻转图片
时间
显示随时间的变化、时间失误和屏幕广播
移动到回收站、撤消和重做
还原历史状态
吸引关注
如果目标是将用户的注意力从多个元素中吸引出来，或提醒用户更新信息，则动画可能合适。 例如，应用程序起始页可能会使用页面加载后滑入位置的“入门”按钮。
作为一个规则，屏幕上的最后一个移动元素吸引了用户的注意。 在一系列动画元素中，用户的注意将遵循最后一个移动对象。
警报
提醒用户，引起注意，显示进度
显示正在正确或错误执行某些操作或显示进度或进度更改
在任务期间提示用户，例如联机查找详细信息或了解当前任务
通知
向用户发出有关错误条件的警报
中断用户以查看他们是否希望参与其他内容
轻轻地通知用户进程已完成或更改，就像下载完成后一样。
模拟
此类别涵盖物理性和维度。
说明对象来自何处或对象的位置
展开和折叠或打开和关闭
平移、滚动和页面轮次
堆叠和 z 排序
旋转木马和手风琴
翻转和旋转 UI
响应和进度指示器
进度指标具有几个显著优势：
确定进度指示器和不确定进度指示器都向用户保证系统未崩溃，并且正在处理该问题。
确定指示器可让用户了解操作进度有多远，以及接近完成感的感觉。
动画模式
Visual Studio 中的动画旨在提供特定功能，而不会妨碍用户工作效率。 通常，Visual Studio 中的动画应为：
小型和不显眼
自然和现实
微妙和潜移
快速高效
放松，不匆忙
此图显示了建议用于 Visual Studio 的动画样式。 没有动画或微妙的动画，如淡入/淡出是最常用的。 移动动画的应用有限，例如展开和收缩、X 和 Y 位置更改和旋转。
Visual Studio 的建议动画样式
显示和消失
使用此模式时，元素从可见切换到无过渡动画的视图外和后退。
显示和消失动画
正确使用
需要立即显示或消失的全新 UI 元素，以便用户既不会分心，也不会受到阻碍。 此外，缓慢移动的动画可能被视为性能拖动，这不会随出现和消失的样式而发生。
用法不正确
UI 突然出现的情况，用户不知道发生了什么情况，添加动画将有助于上下文理解。
动画属性
时间延迟通常为零秒。
示例
自动隐藏工具窗口
键盘激活的编辑器 UI，如 IntelliSense 和参数帮助
展开和折叠代码区域
淡入和淡出
使用此模式，UI 元素从不可见（0% 不透明度）转换为可见（100% 不透明度），反之亦然。
淡入和淡出动画
正确使用
这是最常用的 UI 动画。 这是一个微妙的效果，增加了兴趣，而不会中断流。 在某些情况下，用户甚至可能没有意识到存在动画、感知流畅且流动的 UI 系统。
动画属性
开始不透明度：0% 表示淡入，100% 表示淡出
结束不透明度：100% 用于淡入，0% 表示淡出
持续时间：独立 200 毫秒，用作组合动画序列的一部分时，为 100 毫秒
缓动样式：正弦值 InOut
示例
自动隐藏工具窗口
菜单打开并关闭
背景和前景选项卡切换
从 A 到 B 的颜色混合
使用此模式，UI 元素从颜色 A 更改为颜色 B。
颜色混合动画
正确使用
当 UI 元素将颜色从一个上下文或状态更改为另一个上下文时，作为动画转换。
动画属性
起始颜色：特定于 UI
结束颜色：特定于 UI
持续时间：独立 200 毫秒，用作组合动画序列的一部分时，为 100 毫秒
缓动样式：正弦值 InOut
示例
文档窗口状态转换（活动、最后一个活动和非活动状态）
工具窗口状态转换（焦点和未聚焦）
展开和收缩
使用此模式，UI 元素在 X、Y 或两个方向中展开。
展开和收缩动画
正确使用
当 UI 元素将大小从一个上下文更改为另一个上下文时，作为动画转换。
动画属性
X 刻度：百分比或特定维度（以像素为单位）
Y 刻度：百分比或特定维度（以像素为单位）
定位点位置：通常是左上角（对于从左到右的语言）或右上方（对于从右到左的语言）
持续时间：独立 200 毫秒，用作组合动画序列的一部分时，为 100 毫秒
示例
体系结构资源管理器面板展开和折叠
Visual Studio 2017 起始页项展开和折叠
X-Y 位置更改
使用此模式，UI 元素会更改其 X 或 Y 位置或两者。
X-Y 位置更改动画
正确使用
当 UI 元素将位置从一个上下文更改为另一个上下文时，作为动画转换。
动画属性
起始 X 和 Y 位置：特定于 UI
结束 X 和 Y 位置：特定于 UI
运动路径：无
持续时间：独立 200 毫秒，用作组合动画序列的一部分时，为 100 毫秒
缓动样式：正弦值 InOut
示例
Tab 重新排序
旋转
使用此模式时，UI 元素将旋转。
UI 元素旋转动画
正确使用
仅适用于不确定的旋转进度指示器。
动画属性
旋转度：360
旋转中心：对象中间
持续时间：连续
示例
不确定进度指示器（旋转）
常见的 shell UI 操作和建议的动画
选项卡打开
Tab 打开动画
样式：显示
持续时间：零秒
Tab 关闭
Tab 关闭动画
样式：X 位置更改
持续时间：200 毫秒
Tab 重新排序
Tab 重新排序动画
样式：X 位置更改
持续时间：200 毫秒
关闭浮动文档
关闭浮动文档动画
样式：显示
持续时间：200 毫秒
窗口状态转换
窗口状态转换动画
样式：要与其他窗口保持一致，让当前操作系统定义文档关闭动画。
持续时间：200 毫秒
菜单打开
菜单打开动画
样式：淡入
持续时间：200 毫秒
菜单关闭
菜单关闭动画
样式：淡出
持续时间：200 毫秒
自动隐藏工具窗口显示
自动隐藏工具窗口显示动画
样式：显示
持续时间：零秒