地震 · 纯代码图文特效(2)

当个人运营者还在通过百度无意识盗图的时候，企业往往拥有庞大的付费图库资源，同时基于图库素材的 数据可视化信息图 越来越流行。如何在微信公众平台中， 投放 一套高度专业化的信息图？一种选择是贴图，另一种选择是更具有科技感的代码级微信动画。

目前所流行的扁平设计 信息图 ，往往是出于将严肃话题生动化的考量。 但当企业、政府严肃介绍某一款产品、某一桩事件时，可爱而活泼的常规信息图不再合适。 这时候，微信代码级信息图可以极大提升专业度感官，例如往期我们也发布过台湾导弹炸渔船事件的代码信息图《 微信动画｜台湾吓哭：昨天差点回归了！ 》。

本文中的地震图示动画，主要牵涉的是 和 这两个 AttributeName 动画，制作其实非常便捷。

1）绘制地图与震中位置。这一步主要在 Adobe Illustrator 中完成。当那要注意的是，微信图文内的 SVG 画布会 100％ 大小显示，所以在 Ai 画板中制作时也需要将视角设置为 100%，画板的裁切大小控制在手机屏宽度内，并且要有一定留白 ▼

2）接下来，另存为 SVG 格式，并且在 Ai 中查看 SVG 的初始代码 ▼

3）复制到编辑器使用时，仍然要注意不要缩写标签尾，否则 SVG 的路径会仅剩第一段。待实现了静态部分内容包括文字标注后，我们可以着手开始制作地震波效果。事实上， 地震波分别通过一个实心圆和一个描边圆放大+淡出实现，并且描边圆的放大半径比被它套住的实心圆半径更大。 以下是实心圆的静态构建 ▼

<circle




    
 fill="red" cx="182.1" cy="148" r="2">
circle>

在标签之间加入透明度动画和半径动画 ▼

<animate attributename="opacity" values="1;0" dur="1.5s" repeatcount="indefinite">
animate>
<animate attributename="r" values="1;10" dur="1.5s" repeatcount="indefinite">
animate>

描边圆同理可得。

地震式文字是老代码的新玩法（明天我们也将发布第三期非常有趣的老代码新游戏）。相信很多运营官都接触过弹幕类基础 SVG 动画，但也很容易机械地认为这种动画的原理只能实现文字的固定方向刷屏移动。现在，我们取走传统的 和 的起止定义，采用 的 打下多个关键帧，使得 是 和 具备多个定位顺序 ▼

<animate attributename="x" values="100;101;99;104;98;100" dur=".3s" repeatcount="indefinite">
animate>
<animate attributename="y" values="130;131;127;129;135;130" dur=".3s" repeatcount="indefinite">
animate>

以上就是第二期的微信顶级代码图文教学。如果你是运营新手，则建议向本公众号回复 「排版」 开始学习。当然更多专业排版知识你也可以加入我们的网易云课堂深度学习 ▼

网易云课堂 高级排版术

更多 VI、前端、 H5 、 小程序 等层面的其他疑问或企业培训预约，可以致电 (021)37218818 询问。