详细教你微信微信官方账号文字页面SVG互动开发技巧

时间：2021-08-21 来源：互联网编辑：宝哥软件园浏览：次

现在很多微信官方账号直接在正文页面使用SVG互动动画，增加文章的阅读互动体验，而不是跳H5。结合这一需求，本期分享的内容是如何开发交互式SVG并嵌入微信微信官方账号的主页面。设计师和前端开发的同学可以过来学习。我学会了在这一带接私活，并很快赚到小千千。

先看最后的SVG交互效果：

(体验微信官方账号正文页面的实际效果，请扫描本文底部代码关注微信官方账号)

1为什么微信官方账号需要互动SVG

技术需要有落地的应用场景才有效。为什么很多微信官方账号开始SVG互动，放弃H5？

主要有两个原因：

H5生产成本高，需要一定的开发周期和服务器支持。从主页面跳转到H5页面是额外的一步，容易造成用户流失。当然，对于复杂的交互或更多的功能，H5需要独立开发。

虽然SVG只能实现简单的交互，但它不仅可以增加交互体验，还可以分散用户对内容的注意力，这在很多场景下仍然有很大的需求。

2个应用场景

SVG交互的本质还是基于SVG SMIL动画，配合SVG点击事件实现非常简单的交互。

虽然实现效果非常有限，但仍有很大的发挥空间，比如以下应用场景：

【汽车宣传】点击汽车后，汽车移动并经过某个位置，显示某个特征或地名的副本。【心理测试】点击一个选项后，会出现选择结果。【拆红包】逐层拆红包，显示最里面的内容。【密码解锁】点击几个指定数字后，会显示解锁内容。【猜灯谜】点击后显示内容，类似翻牌。下面开始解释本期Demo制作的全过程。

3材料生产

3.1背景图片

使用PS等软件设计SVG的背景图片，建议宽度为640px~750px，可以更高，但文件大小也会增加。在这个例子中，产生了640 px800 px的jpg背景图像：

3.2 SVG材料

你可以从阿里巴巴矢量图库(www.iconfont.cn/)网站下载。也可以用AI自己做。但是要注意控制SVG的画面大小。SVG图片的大小是点击区域，所以控制图片中的空白区域。

本演示从阿里矢量库中下载了鞭炮SVG，然后用AI打开缩小图片大小：

3.3导出支持向量机

由于微信编辑器不允许嵌入stylescript标签，所以通过AI导出SVG时需要做以下设置：

选择样式作为表示属性，这样导出的SVG就不包含样式，元素的样式将由标签属性设置，而不是使用样式内联css。

4构建SVG

4.1静止无功发生器的基本结构

svg style='display:内联块；宽度： 100%；背景-image : URL(BG . jpg)；背景尺寸： 100%，100%；背景-repeat : no-repeat；'版本=' 1.1 ' viewbox=' 0 0 640 800 ' xmlns=' http://www.w3.org/2000/SVG'/SVG这里的样式都是基于CSS的CSS，所以就不详细描述了。

主要说说viewBox属性：

viewBox='x，y，宽度，高度' x，y控制SVG中所有元素的位移(不影响SVG的背景图像)。

宽度和高度不是SVG的实际宽度和高度，而是SVG中的“分辨率”。宽度和高度越大，SVG中的元素越小；相反，元素越大(不影响SVG的背景图像)。

viewBox的x和y应该设置为0，宽度和高度应该设置为背景图像的大小。

4.2输入单词

首先使用文本添加文本：

svg style='display:内联块；宽度： 100%；背景-image : URL(BG . jpg)；背景尺寸： 100%，100%；背景-repeat : no-repeat；'version=' 1.1 ' viewbox=' 0 0 640 800 ' xmlns=' http://www.w3.org/2000/text/SVG ' textx=' 200 ' y=' 540 ' fill=' # fff ' style=' font-size : 30px '

4.3添加文本动画

现在实现文字的闪烁效果。这里需要动画和g标签。

svg style='display:内联块；宽度： 100%；背景-image : URL(BG . jpg)；背景尺寸： 100%，100%；背景-repeat : no-repeat；'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 '重复计数='不定'/animatetextx=' 200 ' y=' 540 ' fill=' # fff ' style=' font-size : 30px '点击鞭炮放飞梦想/text /g /svg介绍animate:

属性名称是由动画控制的属性，这里是不透明度透明度。

开始，动画的开始时间，可以理解为延迟时间。0s表示立即开始动画。它也可以是一组用分号分隔的值，例如beigin=' 3s“5s”表示3s后动画开始，6s时动画再次开始(如果之前动画没有完成，会立即停止从头开始)。

Dur是动画时间，dur越小，动画越快。

值，指示属性名称指定的属性的值变化，可以是一个值或多个值，用分号分隔，其中“1；0;‘1’表示“不透明-透明-不透明”，即闪烁效果。

重复计数，表示动画重复的次数，无限=无数次

g标签非常简单，就是把包装好的元素组合起来，这样animate只对g中的元素执行动画。

效果如下：

4.4从SVG中提取鞭炮代码

打开AI生成的SVG文件，只取鞭炮的矢量路径码：

4.5添加鞭炮

添加鞭炮代码，用包装，然后通过调整后的翻译调整位置。

svg style='display:内联块；宽度： 100%；背景-image : URL(BG . jpg)；背景尺寸： 100%，100%；背景-repeat : no-repeat；'版本=' 1.1 ' viewbox=' 0 0 640 800 ' xmlns=' http://www.w3.org/2000/SVG ' g文字代码(省略)/g g g样式=' transform 3360 translate (140 px，580 px)；'路径d='M37.1，124.13v3.45a20.83，20.83，0，0，1-3.36，12.28，21.27，21.27，0，0，0-3.54，11.86，3.45，3.45，0，3.45，3.45，0，0，3.45-3.3

4.6制作愿望卡SVG

通过AI制作愿望卡SVG，记得通过Command Shift O把单词转换成向量.然后根据第3.3节导出SVG。

4.7加入愿望卡

愿望卡是鞭炮升天后展示的，但实际上它被覆盖在鞭炮前面，鞭炮并没有消失。所以愿望卡代码应该写在鞭炮代码后面。参考第4.4节，从SVG中提取愿望卡代码，并调整位置。添加的代码如下：

svg style='display:内联块；宽度： 100%；背景-image : URL(BG . jpg)；背景尺寸： 100%，100%；背景-repeat : no-repeat；'版本=' 1.1 ' viewbox=' 0 0 640 800 ' xmlns=' http://www.w3.org/2000/SVG ' g文字代码(省略)/g g g样式=' transform 3360 translate (140 px，580 px)；'鞭炮矢量代码(省略)/g g style=' transform : translate(120 px，560 px)；'心愿卡矢量码(略)/g /svg效果如下，心愿卡完全挡住了鞭炮：

4.8设置愿望卡的初始属性

不透明度设置为0，因为愿望卡的初始状态不是不可见的。

svg style='display:内联块；宽度： 100%；背景-image : URL(BG . jpg)；背景尺寸： 100%，100%；背景-repeat : no-repeat；'版本=' 1.1 ' viewbox=' 0 0 640 800 ' xmlns=' http://www.w3.org/2000/SVG ' g文字代码(省略)/g g g样式=' transform 3360 translate (140 px，580 px)；'鞭炮矢量码(略)/GM g style=' transform : translate(120 px，560 px)；opa city 3360；0 '心愿卡矢量码(略)/g /svg5 SVG点击互动

5.1鞭炮升天

我们想实现的是通过“一键点击”，鞭炮上天，然后愿望卡出现。鞭炮和愿望卡应该分组。

接下来，使用实现单击来触发动画。

类型的值，attributeName='transform '，可以是平移，缩放，旋转，倾斜，倾斜。

填充，动画间隙的填充方法。支持的参数是冻结和删除。Remove是默认值，这意味着动画结束并回到开头。冻结表示动画保持后的状态。

重新启动，支持的参数总是，当不活动和从不。始终是默认值，这意味着动画每一点重新执行一次；WhenNotActive表示动画在播放过程中无法重新启动；从不意味着动画只执行一次。

开始，延迟时间，如上所述，这里增加了点击，表示点击后立即触发，点击2表示点击后2秒触发。

现在我们已经达到了点击鞭炮后上天的效果，但是愿望卡还是看不见。这里我们用“点击时间”的游戏。

5.2愿望卡显示

在愿望卡中，点击0.5只是在鞭炮动画完成后显示愿望卡，因为鞭炮动画是0.5s.

svg style='display:内联块；宽度： 100%；背景-image : URL(BG . jpg)；背景尺寸： 100%，100%；背景-repeat : no-repeat；'version=' 1.1 ' viewbox=' 0 0 640 800 ' xmlns=' http://www.w3.org/2000/SVG ' g文字代码(省略)/g g animate transform attributename=' transform ' type=' translate ' values=' 0 0 0；0-350 ' repeat count=' 1 ' fill=' freeze ' begin=' click ' dur=' 0.5s ' restart=' never '/animate transform g style=' transform : translate(140 px，580 px)；'鞭炮矢量码(略)/g g style=' transform : translate(120 px，560 px)；opa city 3360；0 '动画属性名称='不透明度' begin='click 0.5' dur='0.1s '值=' 0；1 ' fill=' freeze ' restart=' never '/动物愿望卡矢量码(略)/g /g /svg注意：请注意begin=click的元素和begin=click的元素之间的层次关系0.5。首先，单击元素和单击0.5元素应该在同一个g中；其次，click 0.5元素的级别比click元素更深，因此可以正确对应同一个click事件。

5.3完成剩余鞭炮

只剩下两个鞭炮了，就按照上面的步骤，把愿望卡的图片换掉，然后调整元素位置，我们就不重复了。

6导入微信微信官方账号

6.1上传背景材料

上面代码中的背景图片我们用的是本地路径，需要上传到微信后台才能得到在线地址。进入微信公众平台，点击左侧【材料管理】-【图片】-【上传：】