iSVG

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

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

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

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

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

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

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

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