【绝版】苹果官网iPad Air 颜色切换动画实现原理探究

前言

2月初我写了一篇《苹果官网Ipad mini滚动动画实现原理探究》文章后，后续浏览苹果官网时发现iPad Air产品页面有个非常棒的颜色切换动画，当时和部门磊哥讲：“我要将这个很酷的动效移植到我们自己的业务中去”(ps: FITURE魔镜旗舰版也有颜色切换的业务需求)，后续忙着业务开发就切换到了其他选项卡，忘记关闭这个选项卡了。

这不3月9号苹果举行了2022春季发布会，我和大家一样对苹果的产品充满了期待，发布会当天起了个大早，第一时间对苹果官网的产品介绍页面进行了浏览，想看看一向以炫酷交互和动效吸引眼球的苹果官网，在这次新品页面又会给我们带来哪些好玩的东西。结果浏览一圈后还是挺失望，并没发现比较新颖的东西，甚至还连我夸下海口要实现iPad Air颜色切换的动画，也在这次新品发布会后整个产品页面都给改版了。

得益于我的懒惰，忘记关闭之前已打开的老版iPad Air产品介绍页选项卡，我赶紧去Ctrl+S将页面代码离线保存到我的本机，大家可以通过如下动图，感受一下iPad Air的这个颜色切换动画的效果。

整个3月份我都focus在SVG技术的学习上，在掘金上输出了《使用思维导图拆解SVG技术》的文章，所以正好借此机会想试试用SVG技术来实现这个动画效果。在早期我第一次看到这个动画时，查看页面结构发现苹果当时也是使用的SVG技术来实现的，但到我要实(chao)现(xi)这个效果时，再看源码苹果已改成了Canvas的方式进行了实现。

准备物料

如果要实现苹果官网iPad Air的这个动画，首先我们需要先分析一下这个动画的构成部分。通过观察其实可以发现，该动画是通过滚动来控制笔刷在屏幕上的擦除位置来实现的，类似于读书时使用黑板擦在黑板上擦黑板时的效果，只是每一屏的擦除方式不同罢了。

所以基于分析思路，首先我们需要先准备好我们要擦除的路径，以及iPad Air几个颜色的产品图片，再使用SVG标签将页面基本的结构搭建出来。在SVG中我们可以使用<Path d="" />标记来显示一条路径，那么问题来了，如何才能绘制出iPad Air的这几条路径呢？想必大家和我的想法一样，直接去抠苹果的代码不就可以咯，然后就在iPad Air的源码文件中找到了如下代码。

苹果官网使用的是Canvas的方式进行的实现，而我想刻意使用SVG的方式去实现，所以要想获得完整的SVG使用的路径，需要将路径信息转换为path d属性的完整路径，几经周折最终还是拿到了转换后的结果。但美中不足的是我转换出来的路径还是有不少的瑕疵，所以我使用Adobe Illustrator软件将有瑕疵的路径进行了修复和调整，最终获得了如下几条路径和代码。

技术实现

有了前面的物料准备，就可以开始进行动画的技术实现环节了。要实现这个动画效果，在SVG中可以使用裁剪和蒙版两种技术，他们两都拥有显示元素的一部分隐藏另外一部分的能力。

使用裁剪？还是蒙版？

通过观察我们可以发现，我们要实现的效果和下图clipPath裁剪很类似，我们先布局好一个页面，再拿着我们上面获取出来的路径进行裁剪，最终再显示我们路径中裁剪后留下来的部分。一切都是那么美好，很快就实现了这个动画效果，实际上我也是这么掉到坑中的。

在写代码时我发现，clipPath虽然支持通过路径的方式进行裁剪，但是他是不支持路径上再做相关动画效果的，这是坑爹的地方，在stackoverflow上也有人提出了这样一个问题（如何为 SVG 元素中定义的剪切路径设置动画？），所以回想一下我们要实现的动画效果，当鼠标滚动时需要慢慢的使用路径来擦除掉我们要显示出来的部分，所以clipPath的方式就实现不了想要的效果了。

通过查阅资料发现：SVG中 clipPath 裁剪只会使用图形的几何形状，视觉元素不会被应用，包括但不限于: 描边和描边样式、渐变和填充颜色等

虽然clipPath中的图形只会使用几何形状，无法再做路径动画效果，但是他的能力不可小觑，可以基于transform来实现一些非常炫酷的动画效果，类似下图的这种动画。

clipPath实现不了的事情，自然就交给了mask蒙版来进行实现，蒙版的实现方式思路和clipPath裁剪的思路是一致的，不同在于蒙版中支持裁剪中不能使用的描边、渐变、填充等功能，有了这些能力的支持就可以使蒙版中的路径千变万化起来。蒙版的原理其实就像起雾后的玻璃看不到外面时，我们使用手指在玻璃上擦出一块区域，可以让我们透过该区域看到外面的世界一样，如下图所示。

路径动画实现原理

明白上述核心实现原理后，就可以正式开始制作动画了，在SVG中要实现路径动画需要使用两个核心属性stroke-dashoffset和stroke-dasharray，前者主要负责设置偏移量，后者主要负责设置虚线的长度以及之间的间隙，在Illustrator软件中对应如下所示 通过控制 stroke-dasharray 属性的参数，我们还可以实现很多漂亮的虚线效果

在我实现的版本中，我将路径的宽度设置为刚好紧邻靠在一起，这样可以不留缝隙让后面的画面不会有漏出来的部分，然后手动设置路径的transform的偏移位置和缩放，使其让路径可以铺满整个屏幕的同时又正好在中心的位置

有了上述这些准备后，我们就可以通过监听滚动事件计算出一个滚动系数，然后在CSS中基于滚动系数算出每一个蒙版路径中的 stroke-dashoffset 偏移数值，就能实现该动画效果啦！

核心结构代码

核心样式代码

最终实现效果

点这里-> 在线预览

使用裁剪的方式实现颜色切换的版本

点这里-> 在线预览

代码

最终完整版代码 -> DEMO代码

最后

由于时间和精力有限，加之最近业务开发工作量猛增，实现iPad Air的这个颜色切换的动画还是存在一些不足之处，例如文字的淡入淡出效果未实现、屏幕的各种适配问题、路径宽度的粗细没控制等问题，只实现了最核心的动画部分。

如果本文有帮助到你，欢迎点赞给与一个小小的支持！