阅读此文大约需要7分钟

本文首发于微信公众号，查看原文

动画效果会讲故事，动效不仅仅是为了愉悦用户，更是为了帮助理解当前操作进展，帮助提高app的使用效率。当动效制作非常成熟时，看起来应当是非常自然的。

App中随处可见各种各样绚丽的动态效果，从页面跳转到加载进度指示，从状态反馈到下拉刷新。但动效的使用应当自然流畅，过多花哨或者不适当的动效反而会给用户体验带来负面影响。

 一、App store的全新改版

苹果作为用户体验界的标杆，在最新的iOS11中，对界面及动效做了很多更新迭代。其中最明显的就是App store的全新改版。改版后的应用每日会根据最新时事，精选出小众精选、游戏文化、独立佳作等应用，用卡片的方式展示出来。作为第一级 Tab，巨大、显眼的卡片式设计意味着信息更为聚焦。

首页的今日推荐页还使用了非常漂亮的转场效果。转场动效是十分重要的一种动效，它的作用是引导用户，让用户更好地理解页面跳转，知道自己身处何方。App store的设计者为了避免卡片展示页和卡片详情页之间的过度过于生硬，利用动效填补了页面跳转的中间过程，使体验更加流畅自然。

二、小细节

App store的卡片页和详情页之间的转场在AE中用到的功能并不多，列举出来就是放大缩小、位移、改变透明度、遮罩、曲线等基础功能。而相对于普通的转场动效来说，它的动效更加自然流畅的原因是它注重到了三个细节：

• 回弹
•  阴影
• 卡片展开时尺寸不变

1、回弹

回弹即是在原有过渡效果的基础上，借用符合物理规则的轻微颤动来强化用户体验，让动效更加生动。举个例子：当你想让一个球从屏幕最上方落下时，它在停止之前要有几次强度逐渐减弱的回弹才符合物理规律；没有回弹的动画看起来则会非常生硬。

iOS动效最大的亮点在于，很多地方都有回弹的效果，卡片展开与收起的效果也不例外。

实现方式：

以关闭按钮的回弹为例：

step1: 用钢笔工具勾出一条路径，该路径需要弯曲以制作回弹的效果；

step2: 选中路径的path属性复制，在要移动的物体的position属性上粘贴，物体的中心点就会沿着路径移动，从而产生回弹的效果。

step3: 调整位置运动路径的曲线，使运动更加自然。（关于曲线调节可以查看这篇文章：彻底搞懂AE曲线，让设计中的动效更加有趣）

小tips：

1、卡片与它里面的字、关闭按钮是分离的，分别处于单独的图层上面，因此要为它们创建不同的移动路径。

2、回弹也可以用表达式制作，更加方便快捷。但这里的回弹是物体弹出去以后往下移动，用表达式达不到想要的效果，因此我用了绘制路径的方法。回弹表达式可以参考这篇文章：AE表达式：回弹。

2、阴影

阴影可以让用户理解元素的层次，让他们知道两个对象并不在同一高度，不是同一个层级。同时阴影也暗示了用户某个元素其实是可点击的。

App store中的每个卡片背后都使用了微妙的灰色弥散阴影，让卡片的细节更加丰富，并暗示用户卡片是可交互的。如果去掉阴影，卡片就失去了层次感，也没有了明确的交互引导性，很容易让用户误解为不可点击。

当卡片展开时，阴影也会随之扩散变大，透明度降低，与现实中物体扩大时阴影的变化方式相同。这样的设计可以给用户较高的感知度，能够更加清楚地传递信息。

实现方式：

step1: 卡片下面新建一个图层，创建一个与卡片形状大小相同的灰色圆角长方形，放在卡片正下方；

step2: 将圆角长方形向下移动5像素，使用高斯模糊并降低其透明度，做成阴影图层；

step3: 卡片展开时，扩大阴影图层，并继续降低其透明度；

step4: 卡片收回时，将阴影图层回归到原来的大小和透明度。

3、卡片展开时尺寸不变

这也是iOS卡片的特色之一，仔细观察就会发现，当卡片详情页展开时，卡片的大小其实是没有发生变化的。这样做的好处是，在首页的卡片展示中不会由于图片的放大缩小而丢失细节，用户在首页就可以很清楚的看到推广banner的每个细节。

实现方式：

step1: 在卡片上加一个圆角长方形遮罩，使卡片只露出遮罩的部分；

step2: 点击卡片展示卡片详情页时，放大遮罩，使卡片全部露出来。

step3: 卡片收起时，再将遮罩缩小到原来的大小。

以上是我对App store中卡片动效的理解，相信每个人对它都有不同的理解，都可以在AE中用不同的方式做出来，具体怎么操作不重要，重要的是如何对一个动效进行解析和思考，并总结方法用在自己的设计上。

我已经将AE工程源文件上传到附件，下载就可以看到我每一步具体的操作步骤～

对于这篇文章中的动效有其他更好的方法也欢迎和我留言讨论哦，写教程不易，喜欢就点个赞吧～