（图片来源来自网络，侵删）
UI交互动画在各类软件中都不可或缺。 好的交互动画可以让产品体验流畅、流畅。 如何表达页面内容的层次关系、共享元素之间的关系，引导用户在需要关注的地方做出正确的选择？ 一起来看看下面7个互动动画小技巧吧~
选项卡列表内容幻灯片
在设计列表或弹出菜单等交互时，尝试将显示的内容与其引发的操作相关联。 通常我们的内容会从一种状态消失到另一种状态。 通过在状态之间移动内容来显示过渡的连续性，使交互细节更令人难忘。
（图片来源来自网络，侵删）
连接层之间的公共元素
在对不同页面级别之间的交互进行动画处理时，我们可以检查两者之间是否存在共同元素并将它们相互连接。 通常我们进入新详情页面的方式是使用向左或向上滑动等操作。 优秀的交互动画通过动画上下层之间的共同内容来建立两种状态之间的联系。
（图片来源来自网络，侵删）
对内容使用级联效果
在不同页面层级交互时，对于列表卡片页面，可以通过滑动、淡入的方式进行显示。当然，每张卡片都可以延迟，形成瀑布效果，即每张卡片快速交错显示。
（图片来源来自网络，侵删）
内容将其他元素推开
我们通常通过使用淡入和淡出来分别隐藏和显示内容（图中左侧）来调整透明度，优秀的交互动画会让新的内容影响到周围的其他元素，我们可以让内容隐藏随着新内容的增长动画被推出页面之外，使整个交互更加流畅。
（图片来源来自网络，侵删）
使菜单出现在上下文中
在做页面小元素的交互动画时，比如菜单显示，我们通常会在点击按钮后让菜单卡从按钮方向淡入。 而如果点击按钮后菜单卡是从按钮上长出来的，会更自然，不生硬。
（图片来源来自网络，侵删）
按钮显示不同的状态
通常，我们点击按钮后，按钮的反馈信息会出现在按钮周围。 当然，我们可以尝试使用按钮作为容器来提供状态的视觉反馈。 我们可以在按钮的背景中显示进度动画，或者使用按钮颜色来区分按钮状态。
（图片来源来自网络，侵删）
微动画强调
当需要引导用户做一些重要的事情时，可以尝试在元素中添加动画来吸引人们的注意力。 通常我们使用颜色、大小和位置来突出需要关注的内容，但使用巧妙的微动画也可以更戏剧性地吸引用户的注意力。
（图片来源来自网络，侵删）
结语
我们可以利用一些微动画来优化页面之间的交互，也可以通过微动画来提请注意必要的操作。 巧妙的互动动画可以为我们的产品增添更多的乐趣和功能。 通过这些技巧，我们可以更好的完善我们的交互动画~
