导语
玩《荒野乱斗》除了升杯，还能get新技能！趁热一起来看一下动画曲线在《荒野》中的巧妙应用吧！
最近一款游戏火遍大江南北，朋友圈都在玩啊。对啦！这就是《荒野乱斗》！游戏本身干净利落，打了一把还想来一把（可不么～），这两天哼哧哼哧打到四位数杯的杯数，发现游戏除了好玩（那当然）还是很多细节值得关注的。其中很多界面动画的应用就增色不少，不愧为 Supercell 出品，值得学习。今天我们就主要来讨论界面动画的一些细节，玩游戏涨姿势岂不美哉。
在界面设计中，苹果认为“运用恰当的动画可以传达状态，提供反馈，增强操控感，更形象的展现出行为用户的结果”。界面动画的本质是元素一系列可视的变化。是可以被计算被触发和控制的。一般来说，界面动画需要一个触发条件，然后这个触发条件影响元素的属性变化。如果元素可变化的属性是确定的，那接下来要考虑的是这个属性的值如何变化，整个变化其实就是动画能够呈现出的效果。
看到上面的三个小球绕大球的轨道动图的例子，元素变化的属性只有小圆的旋转属性。但是应用了三个不同的动画曲线。属性相同但是数值变化不同就能带来不同的感受。这里第一个是应用的线性动画，第二个是比较常见的缓入缓出动画，第三个就是弹性动画。
动画曲线是动画过程的描述，同样也是对动画过程结果的记录，换句话说我们可以通过这种结果来预知动画的效果。因此读懂动画曲线对于我们采用何种的动画设计有比较快速的指导。在很多界面变化中，可以知道哪些可以更适用，或者直接不适用。比如说开始的例子中，模拟轨道运行的动画时，弹性动画基本不会是首选。而线性动画反而更适用。
这里也延伸到另一个问题。这些动画曲线并非有好坏之分。你不能说弹性动画就比缓出缓入更好。如果整个界面中都使用未经调配的弹性动画，想象点一下就感觉弹簧在弹跳，真是会晃瞎眼睛。而各种曲线的不同场合的配合，各司其职，才会神不知鬼不觉的使用动画打造更好的体验。
接下来我们将会以这三种不同的动画类型来看一下《荒野乱斗》的界面动画是如何应用的。
我们回到曲线本身，刚才有说“如果元素的可变化的属性是确定的，那接下来要考虑的是这个属性的值如何变化”。元素的属性有很多，坐标、透明度、大小、颜色等等。为了使曲线的分析更加方便和直观，我们将属性限定在一个位移的坐标轴中。也就是说元素的位移变化方式应用到一种曲线后会如何变化。如果按照一个物体从 A 处移动到 B 处，为了能将各类曲线横向比较，我们需要一个相同的因子，在这里我们确定位移的距离 x 是一致的，各种曲线在这个时间区间 t 中，各个时刻的造成的速度并不是恒定的，为了能够展现出曲线的影响，我们要记录到一段时间区间中，元素的位移量是多少。换句话说，我们要对位移过程做单位时间上的采样。这里我们将最开始的三个动画的曲线进行了采样（文末有采样的代码来源），得到了三种不同的曲线。
这里的三条曲线就是我们经常能够看到的三大类动画曲线。基于时序补间的线性和缓入缓出动画曲线以及基于物理性质的弹性动画曲线。
缓出缓入类曲线
在看这三条曲线前我们先来看一下最常见的缓出EaseOut动画曲线。其实中文已经说明的很清楚了就是缓慢的离开。为什么是缓出呢？我们来看具体的曲线：
为了能够通用的解读曲线的特征我们首先将曲线进行分解，我们将横轴切分3分之一，纵轴我们先划分到1/2（当然你也可以划分的更细）。可以看到，在A点的位置上，在不到1/3的时间内，已经走完了1/2的路程。而剩下的大约2/3的时间走完剩下的路程。这就是为什么这样的曲线被称之为缓出曲线。在实际的应用效果中。元素越在后面就速度越慢。这样来理解是不是整体会清晰很多？
接下来我就要开始从荒野乱斗给大家举例了，缓出动画主要用在了文字信息的反馈上。注意界面中带阴影文字内容的出现。当然这里除了透明度的变化外，还有位移的变化。
看完缓出曲线我们就可以看一看缓入缓出了，也就是我们刚采样的第二条曲线。
按照同样的方法，我们可以看到在开始1/3中速度都很慢，一直都没有过半，但是在中间阶段时完成了近80%的路程。而后又慢下来，1/3的时间留给了剩下的路程。这就可以很好的理解什么是缓入缓出了，即在开始和结尾处的地方降低值的变化，而由于头尾的时间的占用，中间速率会比较高。在界面中这种曲线也比较好用。因为在可以合适的吸引用户的注意力，又比较自然的展示元素内容。而且在距离等数值计算上也比较好理解，你可以看到C点位置，在整个动画的时间中点正好也是数值的中点。
线性动画
好了 我们再来看最基本的线性动画吧。其实为什么不放在第一个讲的原因是如果直接划分区块的话反而不好说明这个曲线的特点。当然你依旧可以划分等分。这样你会看到在每时每刻，它的速度都是一样的。通常来说我们并不会很大量的使用线性动画。因为在展示上会显得不那么活泼。
但是我们换个视角来看直线的话。就像下面这样。将空间和时间继续延伸。你会发现，它依旧是一样的。所以在开始的示例中。像轨道的这种动画。反而显得更加自然。因为整个过度是平滑的。就像刚才所说,并不是要使用多“高级”的曲线。利用到线性动画的话依旧可以有流畅的体验。
而在荒野乱斗中，最典型的就是在匹配过程中的中间奖章的旋转动画。你会发现他可以无限循环下去。如此高频场景并没有“复杂”的曲线，简单直接。包括背景的图案也是基本以相同的速率来位移。
弹性动画曲线
接下来我们继续来看一下更为复杂的情况--弹性动画曲线。通过刚刚的动画的采样，你会发现他跟缓入缓出这种有点不一样。曲线一些位置上超出了坐标的范围。仔细来看会发现，在1/3的时刻动画其实已经到达终点了（约B点位置）。但是他并没有停下，而是继续向外走了一些。而后用了2/3的时间回到终点。之所以叫弹性动画，就是因为它就像弹簧一样，释放的时刻并不是自己的静止时的长度。他会超出自己自身的长度。然后花一段时间恢复平静。整个过程都很符合弹簧的物理特征。正如这种特性，在应用这种曲线的时候要掌握好元素所在环境，运用得当也是一种非常自然的动画方式。
弹性动画在界面中的使用目前来看是非常普遍的，比如像游戏中的结算页面，信息窗口的弹出大多使用了弹性动画，你可以注意到，窗体弹出的那个时刻大于实际的尺寸。这种动画的好处是在这里就比较好的引导用户关注到结算信息。
结算页面中的窗口动画
弹性动画在按钮上的应用
目前我们为了分析方便都是在讨论单个属性的数字变化，但在实际的应用中，涉多个属性的变化是可以复合的，比如位移+透明度就是常见的变化模式。荒野乱斗中有很多转场还有氛围的动画中都是不能简单用一种属性一种曲线来进行概括。由于每个值都可以应用不同的曲线，这种组合带来的效果也是千变万化，这也是在动效设计中的创意来源。在这里就不冗述展开了。
英雄出场的背景光效（透明度缓入缓出和弹性动画的缩放）
菜单栏唤出（位移的弹性动画）
升级中的数值变化背景（位移和透明度的缓出动画）
文章的最后，请记住下面的最特征的3个曲线，无论何种变化，基本上都是这几个的演变，那么动画曲线就万变不离其宗了。
文章中的阅读曲线的方法，将曲线划分区域，除了可以分析最终的曲线，其实也可以大致通过这个方式来判断界面中的动画类型。至此你应该具备了基本的动画类型的识别能力，通过动画的特征就能结合曲线可能的走势作出大致的判断。这样就可以非常灵活和借鉴到各种好的案例在自己的项目中了。最后祝大家在荒野乱斗中快快升杯哦！
附录
1 、苹果爸爸说的话来自这里：https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/animation/
2、这里有采样使用的源代码 https://gist.github.com/chriseidhof/f1bfea3b26ed23c26f2b016a2d618ba4
3、更多类型的曲线可以参照这里：https://easings.net/ ，详情页有比较详细的效果应用
来源： 腾讯PPdesign
原地址：https://mp.weixin.qq.com/s/Ee4rLKzn2BVRcMiIQlelNQ