五四青年节｜创意SVG交互图文案例解析
红色运营宝典
发布于:2023-05-04
文章内容来源于公众号：红色运营宝典，点此可查看原文，内容版权归相关企业所有，本网站仅供交流学习。若涉及版权问题或存在侵权情况，请及时与我们联系，我们将第一时间进行删除处理。
摘要：青年犹如大地上茁壮成长的小树，总有一天会长成参天大树。
“青年犹如大地上茁壮成长的小树，总有一天会长成参天大树”百年前，一批热血澎湃的青年擎起真理的火炬，开辟经天纬地的事业；百年后，无数意气风发的青年担当历史的重任，投身民族复兴的征程。时值 2023 年的五四青年节，青年们在党政融媒体岗位上又完成了怎样的创作呢？今天我们推荐 5 期主题图文创作，均涉及 SVG 融媒体交互开发，一起来看看具体的技术解析吧！
层层伸长是一种最早出现在知名媒体账号@GQ实验室 上《红了！》的 SVG 互动模型，通过连续的「是……」结构文案进行情绪递进，原作由@符号互动工作室 开发，它的设计方法论和排版操作流程可以点击阅读《浅谈「微雕」与 GQ 实验室<红了！>》了解。本文承袭了层层伸长的核心动画设计思路，但在此基础上更有自己的创意延展，既通过一句「可青春只是如此吗？」作为起承转合，将交互的时间线索一分为二。在第一轮自动的层层展开完成后，用户通过「点击这里」的按钮触发，使得图文高度坍缩到 0 并再次启动新一轮的层层展开，构建出了独有的行文框架。这较之不少党政融媒体对照商业案例邯郸学步的陋习，是一个非常值得点赞的二创案例。
该作由人民日报与@阔野文化工作室 合作执行开发，采用 <width> 式百分比接续模式实现 SVG 特效。值得讲解的两点是：1）内容层自动动画的矢量化。随着层层展开露出的动态文案中，不少文案结构并非传统意义上的图片格式，而是全 <path> 路径的代码动画，这对开发的技术要求极高。2）二段伸长的触摸指令应用。一般来说，我们采用 <click> 事件引发 SVG 交互效果。但在人民日报的本作中，使用了 <touchstart> 为触发指令，这样既包含了 <click> 的行为指征，更兼容了如点击时间过长（超过3毫秒）和拖拽屏幕滑动等行为，使得触发率有所提高，确保更多读者能完整实现 SVG 交互。基于上述两点，实现了更快的加载速度和更高的图文读完率，这显然是开发者针对党政融媒体账号读者用户画像复杂的针对性适配开发，细节之处见功力。
人民网公众号则以「中国青年」为选题，将一条快闪 GIF 作为图文的开场，随后通过特殊的 SVG「旋转式切换」介绍了多位身在不同行业的优秀青年人物。可以看出，人民网的本篇 SVG 交互设计是在原基础上进行了相对生动的分层差速旋转设计，使用微动效提升了这种切换模式的细腻感和层次性。核心是通过 <g> 编组对多个层进行绑定，在内部形成差速叠加。另外，这套切换效果采用了多次重复的方法，形成了「伪循环」的交互体验，在一定程度上有助于用户反复观看人物感言，强化阅读记忆。
新华网公众号基于 QQ 音乐的调用能力，将大量的排比句式分解为不同音乐歌曲的标题，穿插典型青年人物的新闻图像或其他设计配图。虽然并非 SVG 交互代码，但这种形式我们也特别推荐给各位同志们学习。事实上对于文案创作和选曲流程，本文并不是一件可以简单轻松完成的融媒体工作，同样需要投入足够的时间精力，才能确保用旋律和画面以双重感官打动读者。
5月4日也是北京大学的校庆日，在《这是125岁的北大！》的开篇，采用 SVG 轮播图+浮层 CSS 结构形式，形成了多图画面在文案下方滚动播放的特效。
@GQ实验室 在五 · 四发布了《低估1993年出生的人，我不同意》，以 <translate> 的 <discrete> 瞬移形式，在开屏点击后形成不断加速的序列帧效果，让三十而立的青年「疑问」层层递进。展开后，以多个分段弹性层层二阶展开进一步展示漫画图文内容，由此对大量内容信息进行了合理的大纲分级，降低阅读压力的同时提升了内容条理。作品由@交互实验室 开发，非常值得各位同志们学习这类高密度图文内容分级展示的交互排版思路。
@真果粒 也是今年积极呼应青年节的品牌公众号，在五 · 四发布了《年轻人，今天来「甘」一下》。本文由知名开发者@三千喵 设计，采用 CSS perspective 3D 裸眼 3D 排版，形成了一个立体感十足的花园空间。四周或被悬挂或立于画架上的图像，呈现了不同的职场、生活的场景，点击后展现了不同的青年范儿积极向上的文案。
该作是定制级交互案例，开发方为@阔野文化 工作室，其表现为选择后伸长的特效。当读者点击开屏的任意一位人像后，画面会以该人物为第一个主画面，并展开后续其他人物的卡片信息。本质上，这是一种基于 <polygon> 热区定位的双层触发式伸长。当手指接触到其中一个热区后，热区会带动所有人像消失，并将触发传递到内容层将对应排序的卡片信息编组拉入画面。
微信官方 SVG AttributeName 开发者
本文内容来源于公众号： 红色运营宝典 ，请扫码查看原文。
![]()
点此可查看原文
