现在很多公众号都直接在正文页通过SVG交互动画增加文章的阅读交互体验,而不再跳转H5。结合这一需求,本期分享的内容是如何开发交互式SVG,并嵌入微信公众号正文页。设计师和前端开发同学都可以来学习下。学会了可以接这方面的私活了,短平快地赚小钱钱。
先看下最终SVG交互效果:
(体验公众号正文页实际效果,请到本文底部扫码关注公众号)
1 为什么公众号需要交互SVG
技术要有落地的应用场景才能发挥实效。为什么很多公众号开始做SVG交互而放弃H5呢?
主要原因有两点:
H5制作成本高,需要一定的开发周期和服务器支撑。
从正文页跳转H5页面多了一个步骤,容易造成用户流失。
当然,对于需要复杂交互,或者更多功能的话,还是需要单独开发H5。
SVG虽然只能实现简单的交互,但既能增加交互体验又不会太分散用户对内容的关注点,在很多场景下还是很有需求的。
2 应用场景
SVG交互本质还是基于SVG SMIL animation,配合SVG的click事件,实现非常简单的交互。
虽然实现的效果很有限,但还是有很多发挥空间的,比如以下应用场景:
【汽车宣传】点击车子后,车子移动,经过某个位置显示某个特性或地点名称文案。
【心理测试】点击某个选项后,出现选择结果。
【拆红包】一层一层拆掉红包,显示最里面内容。
【密码解锁】点击指定的几个数字后,显示解锁内容。
【猜灯谜】点击后显示内容,类似翻牌。
下面开始讲解本期Demo的制作全过程。
3 素材制作
3.1 背景图片
使用PS等软件设计SVG的背景图,建议宽度为640px~750px,也可以更高,但文件大小也会增加。 本例制作了 640px x 800px 的jpg背景图:
3.2 SVG素材
可以去阿里巴巴矢量图库()网站下载。也可以自行使用AI制作。 但需要注意控制好SVG的图片尺寸。SVG的图片的尺寸即点击区域,所以控制好图片中空余的留白区域。
本Demo从阿里矢量库中下载了爆竹SVG,下载后用AI打开,缩小图片的尺寸:
3.3 导出SVG
由于微信编辑器不允许嵌入 <style><script> 标签,所以通过AI导出SVG的时候要进行一下设置:
把Styling选择为Presentation Attributes,这样导出的SVG就不含有 <style> ,而且元素的样式也会通过标签属性进行设置,而不使用style内联css。
4 构建SVG
4.1 SVG基本结构
<svg version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg"></svg>
这里的style均为基础的CSS,就不再详述了。
主要说下viewBox属性:
viewBox="x, y, width, height"
x、y 控制SVG内所有元素的位移(不影响SVG的背景图)。
width、height 并不是SVG的实际宽高,而是SVG内的“分辨率”。width、height越大,SVG内的元素越小,反之,元素则越大(不影响SVG的背景图)。
建议viewBox的x、y设置为0,width、height设置为背景图的尺寸。
4.2 放入文字
先使用 <text> 加入文字:
<svg version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg"> + <text x="200" y="540" fill="#fff">点击爆竹放飞梦想</text> </svg>
通过调整x、y把位置调好,fill为文字颜色,style设置字号。
4.3 加入文字动效
现在实现文字的闪烁效果。这里需要使用 <animate> 和 <g> 标签。
<svg version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg"> + <g> + <animate attributeName="opacity" begin="0s" dur="1s" values="1;0;1" repeatCount="indefinite"></animate> <text x="200" y="540" fill="#fff">点击爆竹放飞梦想</text> + </g> </svg>
介绍下 <animate> :
attributeName ,为动画控制的属性,这里为opacity透明度。