iSVG

疫情之下，一套小瓶子的趣味内容在互联网中传播，激发了不少人乐观面向未来的心态。本文由网易将 H5 版小瓶子互动通过 SVG 黑科技排版技术进行了图文内复现，由此在微信公众号领域投下颗种子，在不到一周时间内各家公众号版本的小瓶子遍地开花，不少小瓶子的变体也应运而生。另外，包括秀米、135 编辑器等排版工具都纷纷上线了模板，帮助运营人打造自己的快乐小瓶子互动。

答题卡模式的 SVG 交互在业内已成经典，而本作是第一套加入计分系统的商业作品应用。理论上，“计分”逻辑在 SVG 采用内联式且不支持 ID 选择器的情况下并不可行，但在本作中，我们 JZ Creative 的开发者通过双层触发和巧妙的图层排列，让计分逻辑通过线性逻辑进行演化，也让复工更有保障。

点击锦鲤，你就可以在阅读过程中让一条摆动着的锦鲤沿特定轨迹不断向下游动，中途还会出现水波涟漪……JZ 在本作的交付中，应用了序列帧式互动、轨迹<-d>动画、双层触发等技术点。

这是一篇对代码编组有较高要求的测试题型 SVG 互动排版，需要实现点击时反馈当前选项正误并同步勾选正确选项，此外要并行出现题目解析并支持超链接转跳，因而即便如鼈臑这样的大神，在开发工作上也耗费了大量时间。测试题型 SVG 互动是近期相对较少出现的黑科技排版模式，品牌主不妨思考它的应用可行性。

由 JZ 提出的全新遮罩式滑动，可以在确保图片完整的情况下形成镂空效果，而无需上层挖空后再通过穿透触发。其关键在于<-webkit-mask-image>的技术应用，由此以往的各类穿透式滑动（如车窗外风景变化）制作更为便捷，有兴趣的运营人不妨尝试。目前该效果可以在 SVG 黑科技编辑器（https://www.e2.cool/）中通过「顶层滑动」实现。

CSS 的类入榜花式排版，本期一所高校的反向滑动与 C4D 特效动态混合大作值得大家一看，足以秒杀绝大多数品牌号的排版设计。本文回顾了该校全年的推送数据，并制作了一条基于 C4D 合成的三维动画。对于滑动区，视频的部分片段被采集为 GIF 作为滑块盒子的背景图参数，半透明滑块的内容与动态背景的融合得当，主次清晰，并没有因为元素繁多而凌乱，因而被选入本期榜单。

应用了盲盒设计的品牌还有伊利。尽管伊利的 Agency 众多，但近期都频繁向我们几位开发者定制交互式图文，本作盲盒的交互流程更为丰富，前期串联了一组轨迹+透明度的符合动画组，后期串联了一组伪正反翻转动画。

抽签式 SVG 交互排版还能如何进化？荒村在迪士尼公众号套用了当下时兴的盲盒概念，让用户在图文消息中玩得尽兴。