型科科技logo

15889914065 微信咨询
关注型科公众号二维码

扫一扫,立即咨询

型科干货 | 黑科技SVG排版技术,品牌微信号10万+跑不了

来源:未知       2019-12-20

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

 

 

什么是图文交互

 
 
 

 

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

 

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

 

核心技术:SVG动画

 
 
 

 

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

 
 
 

 

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

 

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

 

AE  TO SLML 

 
 
 

 

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

 

 

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

 

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

长按扫描二维码添加

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

 

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

标签:微信公众平台

为您推荐其他案例

H5创意推荐

案例介绍

垃圾分类H5小游戏,一共10关,拖拽屏幕上的物品到下面的四个筒中(有害垃圾、可回收物、湿垃圾、干垃圾)。正确时有加分,错误后,会有说明,最后给出垃圾清单,并可以生成海报。

创意亮点

结合垃圾分类这个热门话题,寓教于乐之余还能为品牌圈粉无数~

发布时间:2019年07月04日查看案例

扫一扫,试玩一下

我要定制
返回
顶部