iSVG

炎炎夏日，国产电动车品牌 WEY 通过 SVG 黑科技排版向用户介绍了其“防暑降温”的能力。本文由 GL 操刀，采用了 Prezi 式的 ZOOM IN 动画效果，基于的缩放能力和的多重修正实现了本文的交互体验。

车企凭借雄厚的广告资金盘和供应商能力，长期以来就是 SVG 交互排版的拥趸者。本月，英菲尼迪加入了 SVG 阵营，推出了一个十分扎心的主题排版。

黑科技排版榜单可以说是月月有宝马，毕竟全行业中该品牌是最痴迷于 SVG 交互排版的企业。加之主要由 GL 操刀交互设计，更可谓如虎添翼。本期的伪键盘游戏，是 GL 较早前已经开发的原型迭代版，融入了更好的视觉设计，逐步露出二维码引导用户长按识别，使得用户误以为乐曲由自己制作完成，可谓是一个“心机满满”的作品。

黑科技排版中最简单的技术动画，莫过于淡入设计。但雀巢通过它结合反向阅读，玩出了新意。本文并不在交互区直接提示用户点击屏幕，而是在经历一系列“石化”场景后，在尾部要求用户反向滑动，再点击石膏像体验反转剧情。

本月最宏大的复合式排版交互长卷，莫过于游戏界盛事 WCG 发布的这篇雄文！该文由唯觅互动设计策划，由我们 JZCreative 开发全部交互代码。本文集群组动画、复合触发、序列帧动画等各类 SVG 交互尖端技术为一体，JZCreative 共交付了 2.8 万行，累计 2.4MB 代码。作品中的每个场景 SVG 动画都细腻丝滑，与子弹飞行精确呼应。制作过程中，需要通过繁复的时间精确设定，确保流程阅读的连贯性。

近期有不少品牌主在发布互动式图文式，采用了滑动式双向开启设计。然而大多数情况下，双向开启的效果往往与内容符合度较低，打开的效果缺乏意义的支撑。星巴克在本期推送中，通过双开门打开了一个冰柜，效果自然符合情景。

由荒村设计的本作通过轨迹动画 和 自动定向效果，让蝴蝶沿着轨迹飞行展示企业数字文化墙，一下子让干涩的内容通过交互变得生动。

本篇是非常具有实践意义的 click 和 touchstart 复合触发广告图文设计。该技术旨在通过一次点击，触发众多原本无法彼此协调的图文交互动画效果。由于触屏对这两个事件以 touch > click 排序（click 存在一个 300 毫秒的判断时间） ，故我们能够让包括多个 opacity、translate 彼此不再关联干扰。