iSVG

高端车企都在玩黑科技排版，捷豹路虎当然也是其中一员。本期捷豹路虎中国通过精美的插画设计配合 SVG 动画挤入了本月十佳作品，技术支持由荒村完成。

本作是一篇技术简单却制作精美的作品——它基于伪播放器改造技术，使得我们点击自定义画面就能播放乐曲。

宝马官方微信公众平台长期由 GL 把持交互图文开发，交互图文的综合数据表现也非常抢眼。父亲节主题的推送中，GL 应用了许久不曾在行业出现的 ZOOM IN 动画，模仿一种类似 Prezi 的镜头效果。该动画在代码原理上由为实现基础，配合不断进行旋转中心修正，是一种制作较为费时费力的动画形态。

「六一」是六月中特别重要的营销节点，NIKE 通过一篇技术主打的滑动式互动图文，在当日赢得了圈内广泛关注。基于滑动的交互图文已经在行业内非常普遍，但该作的亮点在于画面设计。排版初始是一个由纯黑白字符画长卷，而不同模块在经过滑动后，真人形象的透明 GIF 会进入视野，同一 KV 的效果随着滑动会重复进入且不断丰富，最终成为一个纯彩色区块。

Apple 在一周前发布了一则自称能“引起舒适”的图文，这篇推文的确让人眼前一亮：场景细腻、画质高清、动效流畅、SVG交互，这些优点难得的融合在一篇图文里。

校园账号，往往逃不出发布校园美图的推送逻辑。所以怎么把美景以别样的排版方式创意呈现，就成了高校之间官方号高下立判的标准。山东大学发布了一期滑动图片后，会给照片局部着色的特殊排版，由鼈臑操刀交互技术。他所运用的是 CSS 混合模式思维，让原本静态的校园美景，需要同学们通过触发才能看见，极大提升了阅读时的用户注意力。

CSS 在图文 H5 的领域内也有各种应用，在 JZ 提出穿透触发原理后，配合传统的滑动模块，能形成类似背景移动的效果。

奥迪的这期图文 H5，技术核心是 GL 提出的《位图-位图切换》思想。当动态图之间互相配合时，这一看似简单的效果就体现出了高端、大气的排版效果。目前该效果可以在 SVG 黑科技编辑器（https://www.e2.cool/）中通过「GIF控制器」实现。