这几年又悄悄诞生了一个新兴的职位：图文交互设计师。

所谓图文交互，就是特指在微信公众号这个特殊的平台上，利用微信许可的一些技术，主要以 SVG 动画和排版为主，结合 HTML 和 CSS 进行极具创意的图文排版设计。

型科为大家主要归类以下几点

SVG简单来说就是一种图像文件格式，是可交互的和动态的。我们可以直接使用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看。

微信公众号禁止外链，禁止 Javascript，但是没有禁止 SVG，并且官方规定了 attributeName 的十几个参数是可以使用的，所以图文排版的本质其实就是利用 SVG 做动画效果。

在微信公众号里唯一可以用的 SVG 动效核心技术是 SMIL。SMIL，全称叫 Synchronized Multimedia Integration Language，所谓的多媒体一体化同步语言。浏览器中引入这个技术，用一种相对简单的语法来让 SVG 在不需要 Javascript 的基础上原生支持动画。但值得注意的是，SMIL 其实并不仅仅用于 SVG，音频、视频等地方都可以用。

如上图所示，attributeName 代表动画的属性名，包括透明度、宽度、高度等等，from 代表初始值，to 代表结束值，dur 代表动画的持续时间，比如 4s 就是 4秒，begin 则代表开始动画的触发点，可以是时间也可以是事件如 click……如果需要不止一个动画，只需要添加更多的 <animate> 标签即可。

通过控制不同的 attributeName，我们就可以做到很多不同类型的动画效果，目前市面上流行的案例也基本属于这些类型。

虽然 SMIL 这个技术很好用，用 Google 搜索 SVG motion path animation 也可以找到很多相关文档，并且基于微信的缘故，在国内也大红大紫，被越来越多的人用起来了。

在国外开放的互联网世界中，也基本没有人用这个技术做 SVG 动画了，主流的技术和趋势主要还是 CSS animations 和 Web animations……现在 SVG 和 CSS 工作组则采用了全新的 CSS Motion Path Module 来代替 SMIL，可以用 CSS 更灵活地控制动画效果。

除了手写代码的方式，我们还可以在 AE 里面制作好动画，用 Pony 开发的这个在线转换工具 SVGAPlayer-SVG[4]，转换成支持 SIML 语法的 SVG 动画。

◐◐◐

微信公众号的日常推送也有许多创意可挖——更风趣的内容，更独特的形式，希望它们可以给各位新媒体运营er带来启发。
 

他咨询请加小姐姐微信吧！

长按扫描二维码添加

▼

扫描或长按识别二维码添加客服微信哟（快来撩）

转载请注明  型科科技
型科科技专业H5游戏开发公司
www.wan9527.com
量身定制 ● 广州H5开发公司 ● 快速上线