通过展开动效从卡片直接过渡到详情页是更的设计。

的动效往往能够通过变化让人明白两种状态之间的内在关联。

在制作不同状态之间变化的动效的时候，注意两个界面中共享的元素，并且将它作为桥梁，将两个界面状态连接到一起。

在使用 InVision Studio 创建原型的时候，这种同时存在前后两屏中的控件会自动连接起来，构成动效。这一功能使得动效的构建更加便捷。

在列表中使用瀑布式展开动效

左边的列表使用了较为迅速的淡入淡出动效，而右边的列表当中，淡入淡出以延时的方式呈现，效果类似瀑布的展开方式。

淡入淡出的动效让元素递次出现加上轻微的位移，比较自然，看起来不错。

列表元素通过延时次第出现，位移更加明显，形同瀑布，在视觉和体验上更为。

瀑布式的展开动效只需要通过明显的延时就能够实现，适当地控制节奏，让整个加载速度适当的减缓而不会太慢，让用户能够感知到这个过程即可。

谷歌建议每个元素的延时不超过20毫秒。你可以在 Material Motion 中看到设计的原理和更多的实例。

展开时的扩展动效

左侧的动效是内容在顶层覆盖列表，而右侧的动效是从中间扩展将上下内容顶开。

通过移动、覆盖、展开的方式来呈现详情页的动效，视觉上看起来不错。而点击之后展开顶掉周围的元素，和周围的其他的元素有所互动，这样的动效更加。

界面中所有的元素都应该是有「重量」的，某个 UI 控件随着动效变化的时候，和周围的元素发生互动，则能够强化这种实体感。

菜单的展开动效

左侧的动效中，菜单从底部淡入界面，而右侧的动效中，菜单是从被点击的按钮中扩展开的。

菜单从按钮的位置淡入进入界面的方式展现了两者的关联，这样的设计还不错。

通过扩展动效的方式来呈现菜单的展开，让按钮和菜单之间的关系得到了进一步的加强，这样的设计更加。