跟苹果学习微信公众号排版
近年来 H5 渐渐没那么流行了，原因在于开发成本高，周期长，加载速度慢，用户留存和转化都不高，越是爆款性价比越低……于是各大公司都转而求其次，基于微信公众号文章里的排版，玩起了各种花样，不会影响性能，效果反而更好。所以国内这几年又悄悄诞生了一个新兴的职位：图文交互设计师。
图文交互是什么
所谓图文交互，就是特指在微信公众号这个特殊的平台上，利用微信许可的一些技术，主要以 SVG 动画和排版为主，结合 HTML 和 CSS 进行极具创意的图文排版设计。
苹果公众号的排版布局秘籍主要可以归纳为以下几点：
语义化布局
默认编辑器打字后生成的代码是下图左边这样，多以 <p> 标签和 <section> 标签为主，毕竟公众号最初的目的就是写文章，用 <p> 标签是理所应当的。
但是苹果的每篇文章都改用了右边这种 <div> 标签，把原本的文章当成了传统的网页来布局，我们姑且叫语义化布局吧。（其实根本没有语义没有定义 class，但你也不能管它叫 div 布局，以前 div + css 这种叫法本来就不对。）
这么做的好处有很多，也更加灵活，可以不局限于 <p> 标签内添加自定义元素。也可以更好的适配响应式设计。
防触碰设计
经常看公众号文章的人肯定体会过，刷着刷着文章突然被弹出的图片干扰了，因为公众号的机制是 <img> 标签默认是可点击的，很容易触碰到图片误操作，这种打破沉浸式阅读的体验很糟糕。
而苹果的做法是把图片统一放到了 CSS 的 background-image 属性里面，这样就做到防触碰了，比如《有了 iPadOS，四舍五入就是一台新 iPad。》这篇文章里面这样。再对比苹果之前的文章《放完大招，再给你来几个 Apple 的独家彩蛋。》，因为没有把图片放到背景而是直接放到了 <img> 标签，于是图片就可以点开。可以看到苹果也在不断优化自己的公众号排版细节。
横屏观看
横屏滑动观看的排版已经成为各大公司活动营销方案都玩过很多次的招数了，苹果也不例外，在《准备好，本篇内容可能引起极度舒适。》这篇文章就用到了这种排版方式。这里没什么黑科技，仅仅是把图片做成了横向的切图，再一张张拼起来而已。
高清动图
同样是上面那篇文章，这里的 GIF 动图处理也很有意思，我们知道微信里 GIF 的尺寸有严格的限制，而且压缩极其严重。Apple 的做法是把静态内容做成 JPG，动态内容做成 GIF ，然后上下叠加。这样既保留了高清晰画质，又做到了动态效果。另外 Apple 并没有采用纯透明 GIF ，而是用黑底 GIF 配合 CSS 滤色混合模式 mix-blend-mode: screen 来叠加，这样就解决了 GIF 的毛边问题。
微信公众号禁止外链，禁止 Javascript，但是没有禁止 SVG，并且官方规定了 attributeName 的十几个参数是可以使用的，所以图文排版的本质其实就是利用 SVG 做动画效果。
在微信公众号里唯一可以用的 SVG 动效核心技术是 SMIL。SMIL，全称叫 Synchronized Multimedia Integration Language，所谓的多媒体一体化同步语言。浏览器中引入这个技术，用一种相对简单的语法来让 SVG 在不需要 Javascript 的基础上原生支持动画。但值得注意的是，SMIL 其实并不仅仅用于 SVG，音频、视频等地方都可以用。
如上图所示，attributeName 代表动画的属性名，包括透明度、宽度、高度等等，from 代表初始值，to 代表结束值，dur 代表动画的持续时间，比如 4s 就是 4秒，begin 则代表开始动画的触发点，可以是时间也可以是事件如 click……如果需要不止一个动画，只需要添加更多的 <animate> 标签即可。
通过控制不同的 attributeName，我们就可以做到很多不同类型的动画效果，目前市面上流行的案例也基本属于这些类型。
快闪动效
借助 SMIL 我们就可以做各种创意 SVG 动画效果了，在《Apple 新鲜出品，请慢用。》这篇文章中苹果玩了一次快闪效果，乍一看还以为是 GIF 动图，但其实完全不是，这么长的动图要想保持高清晰度在微信里基本是不可能的。
文章一开始在 20 秒内，快闪了各种苹果产品的图片，每一个图片都是一个 SVG，如下图 <animate> 标签部分，begin='20s', begin='18s'……以此排列下去，以达到一种类似顺序帧的效果。这里的 begin 用于控制开始时间，keytimes 用于控制动画的执行步骤，其中定义的值代表在动画中何时执行。这样就可以精准地控制每一帧的时间和间隔了。苹果为了显示效果最佳，在第一帧还加了一段话并让它等待一秒后再开始后面的一大串动画，中间切换不同产品类型时也是等待一秒。
点击后显示
通过控制 opacity 不透明度，我们可以做到点击后显示内容，很多公众号营销案例还有点击两次、三次、连续点击多次、长按住后显示不同的内容等等。
比如苹果在《放完大招，再给你来几个 Apple 的独家彩蛋。》这篇文章中，彩蛋的显示就用到了这个技巧。
attributeName 设置它为不透明度 opacity，这里的 begin 设置为 click，当点击的时候就会显示出 <path> 中的内容了。
d="" 中路径的内容。闪烁效果
苹果在《嘘，AirPods Pro 来了。》中使用了一种很有意思的闪烁效果。这里比较巧妙的是，苹果通过两张图片叠加在一起，背景是半透明的，前景是不透明的，再通过控制不透明度 opacity 来达到闪烁和渐变消失的效果。
核心代码其实就三行 <animate> 标签，从下往上看：
第三行：设置闪烁值 values、持续时间 dur、无限循环 repeatCount，让它默认先闪烁，并且设置当 click 时停止。
第二行：点击触发后，不透明度 opacity 从 0.5 到 0 让前景图片消失。
第一行：虽然图片“消失”了，但它并不是真的消失，如果继续点击的话，我们还是可以执行第二行的效果。于是这一行来控制它的宽度 width，当 click 后通过 +1s 的时间让这个 SVG 通过 0.01s 的时间把宽度调整为 0，这样再点击就不会有任何效果了。
fill 也值得说一下，通常看到 fill 这个属性肯定以为它是填充颜色的意思，但其实在 SMIL 它有两层含义，根据 MDN 的解释[1]是：fill属性根据它的使用环境，拥有两个意义。默认地，当动画元素结束时，目标元素的外观属性不再应用该效果。在动画元素结束后，要还保持这个动画的的值，就需要用到fill属性。对于形状元素和文本，fill属性是外观属性，用来定义给定图形元素内部的颜色。哪一块算是“内部”取决于形状本身以及fill-rule 属性的值。作为一个外观属性，它可以直接用作CSS样式表内部的属性。
当 fill 设置成 freeze 时，在动画激活持续时间结束后，文档持续时间的剩余时间里（或者直到动画重新开始）动画效果会“冻结”着。
滑动翻页
同样在《Apple 新鲜出品，请慢用》这篇文章下面，苹果还用到了滑动翻页，这和在传统网页里的实现方式一致，无非是通过 CSS 设置 overflow-x: scroll、overflow-y: hidden 等方法实现。
在最新的《谁离你最近，却能严守你的隐私？》这篇文章中，苹果在滑动翻页效果的基础上还玩了个花样：它把上面的文字做成了这种样子，背景透明的文字划过黑色背景就形成了下图的效果。
关于 SMIL
虽然 SMIL 这个技术很好用，用 Google 搜索 SVG motion path animation 也可以找到很多相关文档，并且基于微信的缘故，在国内也大红大紫，被越来越多的人用起来了。但不幸的是，根据 MDN 的消息[2]，其实早在 2015 年 Chrome 就抛弃了 SMIL：
Although Chrome 45 deprecated SMIL in favor of CSS animations and Web animations, the Chrome developers have since suspended that deprecation.
尽管目前除了微软的 Edge 浏览器和 Opera 的浏览器一直都不支持，其他主流浏览器对 SMIL 的支持都非常好，但各家对它的开发和维护都已经暂停了，跨浏览器支持的也没有明确方向，所以 SMIL 的未来是非常不确定的，可以说这个技术已经名存实亡了。
在国外开放的互联网世界中，也基本没有人用这个技术做 SVG 动画了，主流的技术和趋势主要还是 CSS animations 和 Web animations……现在 SVG 和 CSS 工作组则采用了全新的 CSS Motion Path Module 来代替 SMIL，可以用 CSS 更灵活地控制动画效果。当然这里只是说明一下，不展开说明这些相关技术。
如果想学习基于 SMIL 的 SVG 动画，推荐看看这篇详细的教程[3]。
AE to SIML
除了手写代码的方式，我们还可以在 AE 里面制作好动画，用 Pony 开发的这个在线转换工具 SVGAPlayer-SVG[4]，转换成支持 SIML 语法的 SVG 动画。
我不知道苹果到底用了什么工具，不过可以肯定的是，像上面那个快闪效果里面 keytimes=0.08334 这种代码肯定是工具生成的。所以如果有其他类似工具欢迎留言。
SVG 动画所衍生的这种创意设计，我觉得更像是命文做题，只给你有限的条件，利用这一点点特性，并不得不采用各种很脏很不优雅很 hack 的处理方式，而创造新创意。而这种基于 SIML 的 SVG 动画技术，真的没什么高深的难点，可以做到的事情也非常有限，和外面开放的互联网各种层出不穷的新技术比，只能算非常简陋而落后的技术。只不过我们是基于微信平台、公众号平台，只能用这样的技术栈。
但即使这样，人们还是通过自己的聪明才智创造了很多让人眼前一亮的创意作品，并且逐渐形成了一个庞大的产业链。
作品做得好，营销转化效果好，客户有更多的需求，如此良性循环，让大家都有钱赚。就算底层技术很烂，又有什么关系呢？
References
[1] MDN 的 fill 解释: https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/fill[2] MDN 的消息: https://developer.mozilla.org/zh-CN/docs/Web/SVG/SVG_animation_with_SMIL[3] SMIL 详细教程: https://css-tricks.com/guide-svg-animations-smil/[4] PonyCui/SVGAPlayer-SVG: https://github.com/PonyCui/SVGAPlayer-SVG/
本文作者：丁一
转载请点击原文向作者获取授权，并注明作者、出处和链接。
更多精彩文章