[译] iOS 中赏心悦目的动画

• 原文地址：Delightful animations in iOS
• 原文做者：Roland Leth
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：iWeslie
• 校对者：Fengziyin1234

咱们热爱动画。

一方面，它们引导咱们的视线，同时也是画龙点睛的一笔，增添了额外的关注点甚至一点 感情。比起静态的 UI，咱们更偏心生动形象而且能给咱们反馈，能够交互的 UI。可是太多了就会形成不良的后果，因此让咱们来探索一些能够给一款 app 增长恰到好处的润色的动画。

在 touchDown 时改变一个按钮的大小或颜色

咱们一般在 touchUpInside 上设置点击事件，其缘由是可让用户有机会改变他的主意，但在现实生活中，按下按钮则执行事件，这应 touchDown 处理。咱们能够在此时让 UI 响应用户的交互，并经过改变外观让他们知道一些事 确实 已经发生了。

可是仍然不要太过度。 我以 0.97 的 scale 开始，背景色的 alpha 为 0.85，borderWidth 增长 1 或 2，或者是它们其中二者的组合，超过两个的话就有点过了。从这开始，你还有不少选项，仅仅举几个例子：增长 scale 缩放比例，改变 y 值，添加一个轻微的阴影，当一个按钮被不停地点击时添加一个 “抖动” 动画，就好像按钮在跟你说 我已经知道你点了我了，你还想干吗？，还有增长字体的粗细，抑或是改变背景颜色。

这类动画没必要很显眼，它们惟一的目的就是画龙点睛，以及给用户一些信息，告诉他们一些事情 确实 已经发生了。

添加到购物车或相似动做

就像苹果在 Safari 中添加书签的动画同样，咱们也能够把添加到购物车时作成这样的动画，这样的话就能够把用户的视线引导到购物车按钮上。若是按钮上有小数字的话，就添加个缩放动画，例如像弹簧同样的动画。或者直接模仿苹果的原生效果，把整个图标添加动画就好像你买的东西进入了购物车同样。

还有，咱们可让 UI 对用户的操做进行了相应，这样也能够提示用户下一步该作什么。它能引导并告诉用户发生了什么以及 哪里 发生了改变。你也许会以为在把东西添加到购物车不少次以后，用户天然就会知道购物车在哪里了，也许你是对的，可是强调它并无坏处。

事件响应

经过合适的层级结构，一个按钮事件的响应应当已经很突出了。可是有时候却不可行或者根本不够。全部有一种方法是给他添加一个轻微的动画，也许是一个有节奏的跳动（scale 在 1.03 和 0.97 间范围内的带有延时的慢动做变化），或者一个抖动（快速地连续旋转几度，中间延迟较长），又或者是背景，文字颜色或大小，描边的宽度和颜色等等的变化。可是要注意一次性不要变化太多了。

建立、删除和提交

当发生了错误的时候能够采用相同的策略。

当提交一个表单时，若是其中一个 UITextFields 为空，就给它添加一个轻微的抖动，也能够给边框或者文字添加红色的闪烁的效果，这样才能吸引用户并告诉他们问题出在哪了。

若是用户想添加了一个已经存在的东西，就让那一项的背景色突出显示出来或者抖动一下，这主要取决与它的大小，若是很大的话，很是轻微的动画会更好，由于它的尺寸比较大的缘故，很微小的动画反而会更加显眼。

当用户成功建立新的一项时，比起简单的刷新 UI，把新的那一项滑入或者淡入，或者也可使用 tableView.insertRows(at:with:) 自带的动画会更好。反之亦然，删除一项也能够这么作。

选择

想象一下单选按钮或者复选框，在这特殊的状况下，动画的惟一做用就是润色，由于并无太多真正的用户体验价值。这样确实添加了一个视觉上的确认效果，直到手指抬起。一个复选框能够绘制复选的标记，就好像你是在纸上把它画出来同样。至于单选按钮，则能够给它的中心填充，例以下面的效果：

小窍门

你能够看看个人关于上面的单选按钮动画的 帖子，我把动画拆分红了不少很是细小的步骤，核心部分则是：

1. 正确理解动画的组成部分。
2. 采起易于实施的可操做步骤。
3. 若是须要的话，使每一步骤足够的小以便于更换或移除。

再次强调：不愠不火，从细节开始作。比起没有动画，夸张的动画反而更加有害。从短小精悍的动画开始吧，只变化几个属性！比起十分刺眼的动画，能让用户能注意到的微妙细节上的动画会更好。

有一些例子的要点能够在 这里 找到，单选按钮的动画能够在控件的找到 这里 有单选按钮的动画，它们能够在自身的控件中找到。

祝你和动画相处愉快！

---

你能够在个人博客里找到更多文章，或者订阅 每个月的推送。原文连接：rolandleth.com。

若是发现译文存在错误或其余须要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。