首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onJuly 25, 2019

详细教你微信公众号正文页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

由于微信编辑器不允许嵌入 <style><script> 标签，所以通过AI导出SVG的时候要进行一下设置：

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

把Styling选择为Presentation Attributes，这样导出的SVG就不含有 <style> ，而且元素的样式也会通过标签属性进行设置，而不使用style内联css。

4 构建SVG

4.1 SVG基本结构

<svg style="display: inline-block;width: 100%;background-image:url(bg.jpg);background-size: 100%,100%;background-repeat: no-repeat;" 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 style="display: inline-block;width: 100%;background-image:url(bg.jpg);background-size: 100%,100%;background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg">
+    <text x="200" y="540" fill="#fff" style="font-size: 30px">点击爆竹放飞梦想</text>
  </svg>

通过调整x、y把位置调好，fill为文字颜色，style设置字号。

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

4.3 加入文字动效

现在实现文字的闪烁效果。这里需要使用 <animate> 和 <g> 标签。

<svg style="display: inline-block;width: 100%;background-image:url(bg.jpg);background-size: 100%,100%;background-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" repeatCount="indefinite"></animate>
      <text x="200" y="540" fill="#fff" style="font-size: 30px">点击爆竹放飞梦想</text>
+    </g>
  </svg>

介绍下 <animate> ：

attributeName ，为动画控制的属性，这里为opacity透明度。

begin ，为动画开始时间，可以理解为延迟时间。0s表示立即开始动画。也可以是分号分隔的一组值，例如beigin="3s;5s"，表示的是3s之后动画开始，6s时候动画再重新开始（如果之前动画没走完，会立即停止从头开始）。

dur ，为动画时间，dur越小，动画越快。

values ，表示attributeName指定属性的值变化,可以是一个值，也可以是用分号分隔的多个值，这里的"1;0;1"表示“不透明->透明->不透明”，即闪烁效果。

repeatCount ，表示动画重复次数，indefinite=无数次

<g> 标签很简单，就是把包起来的元素打成组合，这样animate就只针对 <g> 内的元素执行动画了。

效果如下：

详细教你微信公众号正文页SVG交互开发技巧 4.4 从SVG提取爆竹代码

打开AI生成的SVG文件，只取爆竹的矢量路径代码：

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

4.5 加入爆竹

加入爆竹代码，使用 进行包裹，然后通过调节 的translate调节位置。

<svg style="display: inline-block;width: 100%;background-image:url(bg.jpg);background-size: 100%,100%;background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg">
      <g>
        文字代码（略）
      </g>
+      <g style="transform: translate(140px, 580px);">
+        <path 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,0,0,3.45,3.45h0a3.45,3.45,0,0,0,3.45-3.45h0c0-3.88,1.1-5.78,2.62-8.41A27.61,27.61,0,0,0,44,127.58v-3.45H37.1Z" transform="translate(-16.4 0)" fill="#c83741" />
+        <path d="M50.9,124.13v72.42A3.45,3.45,0,0,0,54.34,200h0a3.45,3.45,0,0,0,3.45-3.45h0V124.13H50.9Z" transform="translate(-16.4 0)" fill="#963737" />
+        <path d="M26.76,37.91v86.22a3.45,3.45,0,0,0,3.45,3.45H57.8a3.45,3.45,0,0,0,3.45-3.45V37.91Z" transform="translate(-16.4 0)" fill="#ff4b4b" />
+        <path d="M26.76,37.91H61.24V51.71H26.76Z" transform="translate(-16.4 0)" fill="#c83741" />
+        <path d="M17.08,36.27A365.1,365.1,0,0,0,40.89,1.75a3.64,3.64,0,0,1,6.23,0,365,365,0,0,0,23.8,34.51,3.14,3.14,0,0,1-2.46,5.09H19.55A3.14,3.14,0,0,1,17.08,36.27Z" transform="translate(-16.4 0)" fill="#ff4b4b" />
+        <path d="M61.24,58.6,26.76,68.95V55.15L61.24,44.81Zm0,27.59L26.76,96.54V82.74L61.24,72.4Zm0,27.59L26.76,124.13V110.33L61.24,100Z" transform="translate(-16.4 0)" fill="#ffcf65" />
+        <path d="M61.24,51.7v-6.9l-23,6.9Z" transform="translate(-16.4 0)" fill="#ffb450" />
+      </g>
  </svg>

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

4.6 制作愿望牌SVG

通过AI制作愿望牌SVG，记得通过Command+Shift+O，把文字转化为矢量。然后按照3.3章节导出SVG。

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

4.7 加入愿望牌

愿望牌是在爆竹升天后显示的，实际上是盖在了爆竹前面，爆竹并没有消失。所以愿望牌的代码应该写在爆竹代码的后面。从SVG提取愿望牌代码参照4.4章节，并调节位置，加入后的代码如下：

<svg style="display: inline-block;width: 100%;background-image:url(bg.jpg);background-size: 100%,100%;background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg">
      <g>
        文字代码（略）
      </g>
      <g style="transform: translate(140px, 580px);">
        爆竹矢量代码（略）
      </g>
+      <g style="transform: translate(120px, 560px);">
+        愿望牌矢量代码（略）
+      </g>
  </svg>

效果如下，愿望牌完全挡住了爆竹：

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

4.8 设置愿望牌初始属性

由于愿望牌初始状态未不可见，所以将opacity设为0。

<svg style="display: inline-block;width: 100%;background-image:url(bg.jpg);background-size: 100%,100%;background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg">
      <g>
        文字代码（略）
      </g>
      <g style="transform: translate(140px, 580px);">
        爆竹矢量代码（略）
      </g>
M      <g style="transform: translate(120px, 560px);opacity: 0;">
        愿望牌矢量代码（略）
      </g>
  </svg>

5 SVG点击交互

5.1 爆竹升天

我们要实现的是通过“一次点击”，爆竹上天，然后愿望牌出现。爆竹和愿望牌要打成组。

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

<svg style="display: inline-block;width: 100%;background-image:url(bg.jpg);background-size: 100%,100%;background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg">
      <g>
        文字代码（略）
      </g>
+      <g>
+        <animateTransform attributeName="transform" type="translate" values="0 0;0 -350" repeatCount="1" fill="freeze" begin="click" dur="0.5s" restart="never"></animateTransform>
        <g style="transform: translate(140px, 580px);">
          爆竹矢量代码（略）
        </g>
        <g style="transform: translate(120px, 560px);opacity: 0;">
          愿望牌矢量代码（略）
        </g>
+      </g>
  </svg>

关键属性讲解：

type ， attributeName="transform"的值，可以是 translate、scale、rotate、skewX、skewY。

fill ，动画间隙的填充方式。支持参数有：freeze、remove。remove是默认值，表示动画结束直接回到开始的地方。freeze表示动画维持结束后的状态。

restart ，支持的参数有always、whenNotActive、never。always是默认值，表示每点一次重新执行动画；whenNotActive表示动画正在进行的时候不能重启动画；never表示动画仅执行一次。

begin ，延迟时间，上面已讲过，这里补充下click，表示点击后立即触发， click+2表示点击后2秒触发。

现在我们已经实现了点击爆竹后升天的效果，但是愿望牌还处于不可见状态。这里就用到“click+时间”的玩法。

5.2 愿望牌显示

在愿望牌的 内加入，由于爆竹升天动画是0.5s，所以click+0.5正好是爆竹动画结束后显示愿望牌。

<svg style="display: inline-block;width: 100%;background-image:url(bg.jpg);background-size: 100%,100%;background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg">
      <g>
        文字代码（略）
      </g>
      <g>
        <animateTransform attributeName="transform" type="translate" values="0 0;0 -350" repeatCount="1" fill="freeze" begin="click" dur="0.5s" restart="never"></animateTransform>
        <g style="transform: translate(140px, 580px);">
          爆竹矢量代码（略）
        </g>
        <g style="transform: translate(120px, 560px);opacity: 0;">
+          <animate attributeName="opacity" begin="click+0.5" dur="0.1s" values="0;1" fill="freeze" restart="never"></animate>
          愿望牌矢量代码（略）
        </g>
      </g>
  </svg>

※注：请注意设置begin=click的元素和设置begin=click+0.5的元素的层级关系。首先，click元素和click+0.5元素要处于同一个 <g> 内；其次，click+0.5元素层级要比click元素的层级更深，所以能够正确的对应同一个click事件。

5.3 完成剩余爆竹

剩下两个爆竹，只需按照以上步骤，替换愿望牌的图片，然后调整元素位置即可，不再赘述。

6 导入微信公众号

6.1 上传背景图素材

以上代码中的背景图我们用的是本地的路径，需要上传至微信后台，获取线上地址。 进入微信公众平台，点击左边的素材管理->图片->上传:

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

上传成功后，打开图片，获取图片的线上地址：

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

6.2 导入微信文章正文

新建图文消息，先输入好标题、作者，上传好封面图。 然后在正文区域输入两行文字（微信要求正文必须含有文字）。

打开chrome调试工具，定位到第二行文字：

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

在第二行文字代码处，右击鼠标选择Edit as HTML:

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

替换为我们的SVG代码：

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

然后随便点击下其他元素的代码，有时可能会自动撤销，如果出现这种情况，再重新粘贴一次就行。

完成后，就可以发布预览啦。

6.3 注意事项

微信编辑器有很多默认的“潜规则”，可能会拒绝我们嵌入的代码，如果被拒，我们嵌入的代码将会被删除或者替换成其他的标签。这里列出我摸索出来的“潜规则”。

  • 标签里的background的url()里，地址不能加引号，单引号双引号都不行，否则会被微信编辑器过滤掉。
  • 标签里不能有id
  • 不能有<style><script><a>标签。

后续有新的发现会继续更新。

6.4 奇葩BUG及技巧经验

微信Android客户端的公众号正文页里点击元素，进行移动动画后，元素可能会出现奇怪的边框。需要给涉及到的元素的 <g> 设置style="outline:none"，包括 <g> 内的所有子 <g> 。

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

SVG图片的圆心

在用AI设计SVG的时候，最好把元素的圆心设置在SVG的中点，否则在实现rotate动画时，圆心偏离将导致元素旋转出现问题。虽然可以通过from和to的后面两个参数调节圆心位置，但是非常难手动找到精确的位置。

<animateTransform attributeName="transform" type="rotate" from="0 41.5 43" to="360 41.5 43" dur="3s" repeatCount="indefinite">

6.5 参考文献

张鑫旭的博客《超级强大的SVG SMIL animation动画详解》

https://www.zhangxinxu.com/wordpress/2014/08/so-powerful-svg-smil-animation/

SVG参考

https://www.runoob.com/svg/svg-reference.html

6.6 完整HTML代码

请前往我的github查看: https://github.com/Yuezi32/weixin_svg_demo

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

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

- Author -

Mr_兔子先生

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery 1.5 源码解读 面向中高阶JSER
Apr 05 Javascript
jquery ajax属性async(同步异步)示例
Nov 05 Javascript
JQuery中extend使用介绍
Mar 13 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
Mar 06 Javascript
jQuery实现简单滚动动画效果
Apr 07 Javascript
vue,angular,avalon这三种MVVM框架优缺点
Apr 27 Javascript
AngularJs解决跨域问题案例详解(简单方法)
May 19 Javascript
Node.js的特点详解
Feb 03 Javascript
浅谈React深度编程之受控组件与非受控组件
Dec 26 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
May 24 Javascript
vue中get请求如何传递数组参数的方法示例
Nov 08 Javascript
uni-app 自定义底部导航栏的实现
Dec 11 Javascript
微信小程序绘制图片发送朋友圈
Jul 25 #Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
Jul 25 #Javascript
微信小程序实现动态列表项的顺序加载动画
Jul 25 #Javascript
JS查找孩子节点简单示例
Jul 25 #Javascript
微信小程序自定义单项选择器样式
Jul 25 #Javascript
vue实现多组关键词对应高亮显示功能
Jul 25 #Javascript
微信小程序实现原生步骤条
Jul 25 #Javascript
德生2P3(1) python小游戏(5) 贪吃蛇(2) update(2) 计算机视觉(2) SnakeGame(1) 索尼ICF-36(1) 全局锁(1) 备份(2) 索引(8)
You might like
PHP用mysql数据库存储session的代码
2010/03/05 PHP
php中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
jQuery 性能优化手册 推荐
2010/02/23 Javascript
JavaScript window.location对象
2014/11/14 Javascript
node.js中的fs.exists方法使用说明
2014/12/17 Javascript
javascript函数式编程实例分析
2015/04/25 Javascript
AngularJS身份验证的方法
2016/02/17 Javascript
BootStrap扔进Django里的方法详解
2016/05/13 Javascript
简单谈谈Vue 模板各类数据绑定
2016/09/25 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
2017/03/21 jQuery
微信小程序动态的加载数据实例代码
2017/04/14 Javascript
jquery 实现拖动文件上传加载进度条功能
2018/03/18 jQuery
vue v-model实现自定义样式多选与单选功能
2018/07/05 Javascript
vue 之 css module的使用方法
2018/12/04 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
2020/02/11 Javascript
基于vue--key值的特殊用处详解
2020/07/31 Javascript
python对字典进行排序实例
2014/09/25 Python
Python中decorator使用实例
2015/04/14 Python
Linux 发邮件磁盘空间监控(python)
2016/04/23 Python
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
python 获取当天每个准点时间戳的实例
2018/05/22 Python
如何安装多版本python python2和python3共存以及pip共存
2018/09/18 Python
python中dir()与__dict__属性的区别浅析
2018/12/10 Python
python实现定时压缩指定文件夹发送邮件
2020/12/22 Python
对python中UDP,socket的使用详解
2019/08/22 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
python爬虫模拟浏览器访问-User-Agent过程解析
2019/12/28 Python
Giuseppe Zanotti美国官方网站：将鞋履视为高级时装般精心制作
2018/02/06 全球购物
C#软件工程师英语面试题
2015/06/07 面试题
计划生育宣传标语
2014/06/21 职场文书
2014党委书记四风对照检查材料思想汇报
2014/09/21 职场文书
2014年导购员工作总结
2014/11/18 职场文书
在校生证明
2015/06/17 职场文书
《七律·长征》教学反思
2016/02/16 职场文书
Linux系统下安装PHP7.3版本
2021/06/26 PHP
Python pandas求方差和标准差的方法实例
2021/08/04 Python