三星 sgh u608（那些说"过渡动画"没用的人，你们真的懂手机吗？）

很多人觉得“过渡动画”没有必要，新手机一到手就去开发者模式里把过渡动画全部关闭，并开始输出自己所谓“喜欢直接了当的快”这种观点，更有甚者还做起了能关闭广告的白日梦。但我觉得他们之所以有这种行为，恰恰是因为接触到的产品不够广泛，或者手机对于他们来说就是个通讯工具，否则一个如此重要，甚至是评判一个系统是否有“灵魂”的东西怎么能被如此轻易地忽视呢？

一切的前提：你的手机不仅仅是个通讯工具，你日常和它互动的次数很频繁，如果手机在你手中只是个所谓“老年机”的存在，那接下来的论述对你来说就毫无意义。而动画的形成的原因这里就不详细解释了，你只需要知道，它是由排列在时间线上的一张张静止的照片组成的就行了。

如果一个过渡动画从开始到结束的速度很快，你的眼睛里就不会看到任何细节的体现，速度过快很显然会觉得突兀，整个过程全靠脑补。而如果动画过慢，你或许会认为它甚至不算是一个动画，就好像老师上课放的 PPT 一样，一页一页翻给你看罢了，而且很有可能会翻到上一页，这种拖沓感对常人的耐心是种巨大的挑战，一般人很难忍受。

那么，究竟怎样的动画才能满足常人的视觉需求呢？答案是:符合物理世界的运动规律。这句话不难理解，我们之所以觉得某种动画合理或者不合理，就是基于现实世界中的认知来评判的，人都是在环境中慢慢形成一套对事物的基本判断标准，这点每个人都一样。

当然，话说起来很简单，等到真正去做的时候肯定会遇到各种各样的问题。比如每个手机厂商对动画的调节差异都很明显，iOS 的动画是公认的业界老大，Android 手机一直被诟病卡顿、不顺手的原因也和它过渡动画的调教有直接的关系，要想了解差异背后的原因，首先要知道动画制作的几个基本概念。

前面我们讲过了，动画是由一张张照片组成，所以一个动画从开始到结尾中间肯定有过渡画面，这些过渡画面和起始画面有一个名称就叫“张数”，张数的多少，直接决定了整个动画的细腻过程。

另一个概念是“造型”，拿图标举例，从人手触摸到打开再到关闭，中途返回，长按等操作，有的系统做了比较细腻的适配，有的则只是用了单一的静止画面来呈现。

接下来就是“轨道”，一个动画中，所有物体的运动都会有一个曲线，或者说痕迹，把运动开始到结束物体的偏移位置的坐标曲线在坐标轴上连来，就能得到运动“轨道”。

最后就是“踩点”，它是在相同时间间隔内，动画中的每个事物的“造型”在“轨道”上的位置来决定的，如果通过慢动作把一秒平分为多个相同的块，就能很清晰的看到每个事物的“踩点”。

从上述文字我们可以得出：一个优秀的动画，起码需要这四个关键因素的相互协调来完成，任何想投机取巧的行为都会被现实无情的抛弃。做的不好用户肯定不满意，吐槽是必然的。但影响最大的还是用户对品牌的认可度，品牌效应一旦形成，想要做改变就很难了。比如很多人口中的“华为拍照最好”，“小米产品 lOW”，“OV高价低配”，这些观念会烙在用户脑海里很长时间，虽然也有很多接触到较多产品，对比后发现这些是错误言论的人，但是，大多数人没有机会去深入了解，“人传人”在现实中的影响可能比你我想象中的还要广泛。

如果说之前 Android 和 iOS 差异大的原因是起步时各家对过渡动画的了解不够的话，那么多年的发展后，很多东西一定都有了比较深入的研究了，那么为什么有些厂商做的过渡动画还是得不到认可呢？其实这个问题涉及的东西比较复杂，平台，开发工具、人员，厂商努力程度等都有差异，仅仅从一方面分析并不能看到本质。

在讨论之前，还要明确一点，就是硬件的提升肯定会带来质的改变。比如屏幕的高刷新率，触控采样率，SOC 的图像处理能力，毕竟动画的渲染需要外部硬件的支撑，无论是处理速度还是显示效果，又或者是交互动作的处理都要考虑外部设备元件的承受能力，超过元件负载的过度优化肯定不可取。

过渡动画属于操作系统的用户界面这一层，在GUI （图形用户界面）中，运动学公式、渲染能力，和对动画的调教控制这三个因素对动画的流畅度和交互体验非常重要。

基于常识我们都知道，画家用笔来绘画和用电脑的鼠标来绘画是完全不同的操作，贝塞尔曲线就是一种解决鼠标绘图的工具，是运用最广泛的图形造型设计线条，通过改变线条中间点的坐标位置控制运动轨道，从而实现平滑过渡。

乔布斯在 2007 年 WWDC（苹果全球开发者大会）就隆重的介绍了基于自定义贝塞尔曲线差值 的 API，它是 iOS 和 macOS 上图形渲染和动画的基础结构，可以为视图和应用程序的其他可视元素设置动画，基本的实现逻辑是将大部分实际绘图工作交给专用图形硬件加速渲染，以实现高帧率和流畅的动画，而不会给 CPU 带来不必要的负担，也不会因此降低应用程序的响应速度。

贝塞尔曲线是由不同计算公式得到的，根据公式的不同，可以实现的运动复杂效果也不同，高于三阶的曲线统称为“高阶贝塞尔曲线”，以下是 一阶、三阶、五阶贝塞尔曲线的基本形态，开发人员可以调整对应点的坐标位置来优化具体运动轨迹。

通用公式

一阶贝塞尔曲线

三阶贝塞尔曲线

五阶贝塞尔曲线

想一想 2007 的 Android 是什么状态？可能大家都没什么印象了，下面通过几款经典机型的介绍把大家拉回那个时代。Palm Centro、诺基亚 N95、索尼爱立信 K850i 、HTC Touch、摩托罗拉 V8、三星 U608、黑莓 Curve 8310。这些经典机型的设计厂商再过去的十几年间都没挺住苹果和国产的冲击，大部分都变成了小众品牌或者被收购。而苹果对产品细节的重视从第一代就开始了，这是 Android 至今难找到对手的主要原因。

苹果的 UIKit Dynamic （它允许您通过添加重力，附件（弹簧）和力等行为来创建感觉真实的界面的完整物理引擎）和 Motion Effects （利用手机加速度计提供的数据，以创建响应手机方向变化的界面以创建炫酷的视差效果）等非常好用的物理世界模拟的框架在其它平台很难找到。

而 Google 官方的 FlingAnimation 和 SpringAnimation 所提供的动画调节水平和苹果开发平台有不小的差距。

FlingAnimation 动画效果和代码展示

SpringAnimation 动画效果和代码展示

关于 Google 官方的那一套用于规范应用外观和动作进行设计指导的Material Design标准，在如此庞大且碎片化严重的 Android 阵营中，除了 Google 自己和少数厂商遵循外，基本都是各玩各的，所以才会有鱼龙混杂的场面出现。

Material Design 设计规范和基础知识

至于“动画渲染”、“动画控制”，由于平台的限制，Android 逊于 iOS 的点有很多，这里就不一一展开了，主要还是对应的 API 接口不足，代码逻辑问题带来的一系列差距。

iOS 的开发工具相对齐全，能带给开发者比较友好的环境，从图标、到动画等都能比较舒适的运用官方和第三方工具。加上过去几年厂商的快节奏推进，原本需要慢工出细活的领域被挤压了太多开发时间，普遍情况是先做出来再说，好不好用以后再改善。正是由于这样，很多 Android 开发人员比较浮躁，当然，这里并不是说 Android 开发人员技术不行，只是强调环境对开发有很大的影响。

尽管有那么多的阻力，但是随着整体环境的逐渐成熟和行业洗牌，厂商心态也开始慢慢好转，相比之前为了生存的慌不择路，现在也逐渐开始关注更深层次的体验，而动画过渡作为最基本也最重要的领域之一，已经出现了不少佼佼者，虽然它们并不完美。下面就以刚刚发布，基于 Android 11 的 OPPO ColorOS 11 动画过渡效果为例，结合动画基本概念和核心点，看一下第一梯队的优化究竟到了什么水平，毕竟 Android 11 是能代表这个阵营最顶尖水平的作品。

前面我们提到过“自定义贝塞尔曲线”，ColorOS 7 就已经运用这种高效的图形运动处理线条自研了一套类似于苹果对真实世界物理引擎的动画处理套件，它的出现，让很多对基础体验有着强烈追求的发烧友眼前一亮。如今，ColorOS 11 给我们带来了 “量子动画引擎 2.0”，相比于 1.0 ，给我的直观感受就是细节处理更平滑细腻，以下是 ColorOS 11公测版 在 Find X2 Pro 上的过渡动画展示效果。

手指进行点按操作时，每接触到一个按钮，相应的模块的“造型”出现闪光的现象，同时下方的光标也会跟随选择目标的方向的特定“轨道”移动，你能清楚地知道当前的位置，以便进行下一步操作。滑动时也一样，整个页面移动的“轨道”和对应图标的“踩点”都有自己的时间线。

长按图标时，可以明显看出 APP 的形态向内凹了一下，并且变得小一圈，同时有相应的阴影处理，最后再回弹。这和现实中的体验很接近，物体受到在承受能力内的外力后，会发生一定的形变，经过一段时间仍然会恢复原来的样子。拖拽时的除了跟手的平滑“轨道”外，对触碰到的物体也会有对应的提醒，比如排列位置的和“邮件”应用的闪光图标框架，都在向你展现当前操作的实时坐标。

启停过程中，全屏处理比较巧妙，从点击到完全展开有一定的时间，图标的“造型”也随着对应的动作变化（在打断动画中更明显），而运动“轨道”则是“从哪里来到哪里去”的物理模拟。

翻转的“轨道”是一个扇形的弧线，经过闪黑处理后，整体“造型”在横竖之间切换。后台 APP 的切换过程我觉得和瀑布的状态很像。向左向右滑动，其它 APP 都会像流水一样曲线下滑，下方伴随着图标提示，在执行切换，关闭进程时也会出现不同的效果。

ColorOS 11 的整套动画逻辑覆盖到系统的边边角角，具体内容包括但不限于：交互框点按的阴影和闪灰，下拉的回弹效果、统一的左右滑动“轨道”方向、按钮开关的律动，开启画面的填充过程，目前为止，在 Android 阵营很难找到对手，并且它不是 iOS 的翻版，鲜明的个性在各项动画的表现中都有目共睹。

正如文中所讲，如果你没有接触到那么多事物，一定会被这些领域的某些谬论所洗脑，道听途说其实是一种最可怕的状态，它对你的认知毫无帮助。如果不是真正体验了 ColorOS 11 的过渡动画，如果没有机会接触 Android 11 最新的作品，我或许还会对“过渡动画”这个人人都假装很懂（哪个好，哪个差，但是给不出任何论据支撑。）的话题敬而远之，而等真正了解了它的本质后（当然，深层次的内容还有很多），对 Android 未来的确实多了不少期待。

写作参考：

Core Animation 总结

日式作画基础解说 完整版

iOS开发－贝塞尔曲线 总结

UIKit Dynamics 置身真实世界

为什么 iOS 的过渡动画看起来很舒服？

*部分图片来源于网络，侵删。