UI设计出了静态的效果之外经常会加入一些动态效果，因为这样可以让整个UI设计变得更加动感，让人感觉充满生机，下面我们跟随成都小程序UI设计公司一起来了解一下UI动画设计吧。

一、UI动画设计常见类型

1、旋转

旋转动画是我们在操作界面的过程中比较常见的动画类型，它主要是切换过程中图标或其中元素的角度旋转，是针对具体图标做的巧妙设计。很多app的图标设计中都使用了旋转的效果来模拟实物的晃动感觉，让用户觉得亲切自然。

2、填充

填充的主要内容就是填充图标颜色，这种效果适用于选中后过渡到面性的图标样式，可以是局部色块的填充，也可是填充整体，切换过程都可以做到自然流畅。若只有线性图标的样式，图标面积偏单薄，不易出效果一般不建议使用。

3、形状变化

形状变化动画一般具有较强的趣味性，它也是需要针对图标形状元素定制化设计的一种。它的自由度较高，供设计师发挥的空间大，能产生许多有趣的效果。比如QQ的消息图标，每次双击都切换不同的表情，给用户留下深刻的印象。

4、缩放

缩放动画是比较适合新手设计师选择的一种动画类型。它是简单稳重、包容性好的一种动画，既有动式又不会太复杂夸张。对于视觉引导和明确反馈完全够用，所以它的应用比较广泛，适合大多数UI交互设计，是比较保守不易出错的选择。

二、转换模式

当设计一个导航转换时，简单和统一就是2个最关键的点。为了实现这一点，我们选择了2种类型的动画模式：

1、基于容器的转换

如果界面中涉及到一个容器，比如按钮、卡片或者列表，那么转换就是基于容器的动画。容器通常很容易根据它们的可见边识别出来，但是要记住，它们也可以是在转换之前不可见，就是没有分割线的列表一样。

2、没有容器的过渡

有些界面并不会基于容器进行转换，例如点击底部导航中的图标，将用户带去一个新界面。

以上就是蓝橙视觉对于小程序UI的动画设计的一些分享，在了解了上述分类后，我们会发现表现形式和方法并不唯一，但从以上的分类中，可见UI动画设计的表现形式可以依据3D场景设计的变化做出不同的个性化的表现，但不变的是最终的输出都依托于需求。