189 8069 5689

详细教你微信公众号正文页SVG交互开发技巧

详细教你微信公众号正文页SVG交互开发技巧

创新互联服务项目包括蒸湘网站建设、蒸湘网站制作、蒸湘网页制作以及蒸湘网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,蒸湘网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到蒸湘省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!

现在很多公众号都直接在正文页通过SVG交互动画增加文章的阅读交互体验,而不再跳转H5。结合这一需求,本期分享的内容是如何开发交互式SVG,并嵌入微信公众号正文页。设计师和前端开发同学都可以来学习下。学会了可以接这方面的私活了,短平快地赚小钱钱。

先看下最终SVG交互效果:

(体验公众号正文页实际效果,请到本文底部扫码关注公众号)

详细教你微信公众号正文页SVG交互开发技巧

1 为什么公众号需要交互SVG

技术要有落地的应用场景才能发挥实效。为什么很多公众号开始做SVG交互而放弃H5呢?

主要原因有两点:

  1. H5制作成本高,需要一定的开发周期和服务器支撑。
  2. 从正文页跳转H5页面多了一个步骤,容易造成用户流失。

当然,对于需要复杂交互,或者更多功能的话,还是需要单独开发H5。

SVG虽然只能实现简单的交互,但既能增加交互体验又不会太分散用户对内容的关注点,在很多场景下还是很有需求的。

2 应用场景

SVG交互本质还是基于SVG SMIL animation,配合SVG的click事件,实现非常简单的交互。

虽然实现的效果很有限,但还是有很多发挥空间的,比如以下应用场景:

  • 【汽车宣传】点击车子后,车子移动,经过某个位置显示某个特性或地点名称文案。
  • 【心理测试】点击某个选项后,出现选择结果。
  • 【拆红包】一层一层拆掉红包,显示最里面内容。
  • 【密码解锁】点击指定的几个数字后,显示解锁内容。
  • 【猜灯谜】点击后显示内容,类似翻牌。

下面开始讲解本期Demo的制作全过程。

3 素材制作

3.1 背景图片

使用PS等软件设计SVG的背景图,建议宽度为640px~750px,也可以更高,但文件大小也会增加。 本例制作了 640px x 800px 的jpg背景图:

详细教你微信公众号正文页SVG交互开发技巧

3.2 SVG素材

可以去阿里巴巴矢量图库(www.iconfont.cn/)网站下载。也可以自行使用AI制作。 但需要注意控制好SVG的图片尺寸。SVG的图片的尺寸即点击区域,所以控制好图片中空余的留白区域。

本Demo从阿里矢量库中下载了爆竹SVG,下载后用AI打开,缩小图片的尺寸:

详细教你微信公众号正文页SVG交互开发技巧

3.3 导出SVG

由于微信编辑器不允许嵌入