用法

在图标设计中可以通过加入动效来增加图标的质感和趣味性。

Animation reflects the action an icon performs in a way that adds polish and delight. > 每个图标的动效需要与视觉设计的风格保持一致。

The animation of each icon is aligned with both the visual design and action they perform.

转场

转场可以将两个视觉状态之间的动态图标连接起来。两个图标之间的转场表示它们已链接，按下一个图标可使另一个图标变得可用。

Transitions connect animated icons between two visual states. Transitioning between two icons signifies that they are linked, and that pressing one icon makes the other icon available.

> 转场显示了两个图标之间的链接关系。

Transitions show the connection between two icons.

> 转场能够用于动态图标之间的相互切换，例如打开和关闭状态。

Transitions are used to toggle between icons, such as between on and off states.

强调

根据不同的场景需求来设计转场动效：

• 不突出的图标使用简单的动效
• 作为应用程序重要部分的图标使用详细的补间

Animated icon transitions can use either simple or complex motion based on the level of emphasis preferred.

• Icons that aren’t prominent use a simple shared motion
• Icons that are an important part of an app can be emphasized with complex motion

简单 > 在不需要强调的图标上使用共享运动。

淡入淡出，缩放或旋转是在图标之间转换的简单方法。

Use shared motion on icons that don’t need to be emphasized. Fading, scaling, or rotating are simple ways to transition between icons.

复杂 > 详细的补间会引起注意，并为重要的图标增添乐趣。

Detailed animations call attention and adds delight to important icons.

> 当功能比样式更重要时，使用简单的图标转换。退出图标只会淡出并进入图标淡入，大小缩小。

Simple icon transitions are used when functionality is more important than style. Exiting icons simply fade out and entering icons fade in, subtly scaling up in size.

> 详细的图标转换用于重要的UI元素，如音乐应用程序中的控件。

Detailed icon transitions are used on important UI elements, like controls in a music app.

持续时间

图标动画越复杂，它需要的持续时间越长，以避免用户感到动画分镜不够流畅。为了在应用程序之间保持一致性，应该保证相似复杂程度的图标具有相同的动效持续时间。

The more complex an icon animation is, the longer duration it needs to have to avoid feeling rushed. To keep consistency across an app, use the same duration for icons that have similar levels of complexity.

图标可以根据其复杂程度将持续时间分为以下三组：

• 简单图标动画：100ms
• 中等图标动画：200ms
• 复杂图标动画：500ms

Most icons will fit into these three groups of recommended durations:

• Simple icon animations: 100ms
• Average icon animations: 200ms
• Complex icon animations: 500ms 1. Simple: 100
  2. Average: 200
  3. Complex: 500

视差

一组图标的动效可以交错的放在时间轴上，依照次序来流畅地显示或隐藏。它们的动效设计从左到右来展开，能够为用户提供步进感。

Sets of icons can use staggered timing to perform entrances fluidly. They animate from left to right to give a sense of progression. 应用栏中的图标从左到右进入交错时间。

Icons in an app bar enter from left to right with staggered timing

状态

图标状态的变化可以用动效进行加强。

Icon animations can be used to reinforce a change in state.

图例中加入的动效表示图标状态的切换。

Icons animate to indicate they have changed state by being selected

主题

动效能够反映品牌的风格。

Animations should reflect a brand’s style.

这些图标动画的灵感都来自于品牌标识和加载动画。

1. 图标动效
2. Logo 动画
3. 加载动画

These icon animations are inspired by the brand logo and loading state animations.

1. Icon animations
   2. Logo animation
   3. Loading animation