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

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

Javascript 相关文章推荐
Prototype Date对象 学习
Jul 12 Javascript
jQuery的deferred对象使用详解
Aug 20 Javascript
在Linux上用forever实现Node.js项目自启动
Jul 09 Javascript
jQuery实现布局高宽自适应的简单实例
May 28 Javascript
实现easyui的datagrid导出为excel的示例代码
Nov 10 Javascript
快速入门Vue
Dec 19 Javascript
浅谈vue-router 路由传参的方法
Dec 27 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
Mar 08 Javascript
JavaScript之解构赋值的理解
Jan 30 Javascript
JavaScript生成一个不重复的ID的方法示例
Sep 16 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
Nov 07 Javascript
openlayers4实现点动态扩散
Aug 17 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
You might like
用PHP制作静态网站的模板框架
2006/10/09 PHP
使用sockets:从新闻组中获取文章(三)
2006/10/09 PHP
php实现的zip文件内容比较类
2014/09/24 PHP
THINKPHP内容分页代码分享
2015/01/14 PHP
PHP抓取及分析网页的方法详解
2016/04/26 PHP
Yii2单元测试用法示例
2016/11/12 PHP
thinkPHP js文件中U方法不被解析问题的解决方法
2016/12/05 PHP
php实现的三个常用加密解密功能函数示例
2017/11/06 PHP
ThinkPHP5.0框架控制器继承基类和自定义类示例
2018/05/25 PHP
javascript 最常用的10个自定义函数[推荐]
2009/12/26 Javascript
javascript数组去重3种方法的性能测试与比较
2013/03/26 Javascript
js动态创建、删除表格示例代码
2013/08/07 Javascript
JS通过相同的name进行表格求和代码
2013/08/18 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
2015/04/01 Javascript
javascript原型继承工作原理和实例详解
2016/04/07 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
2016/09/04 Javascript
原生js实现查询天气小应用
2016/12/09 Javascript
Vue 使用中的小技巧
2018/04/26 Javascript
JavaScript设计模式之工厂模式简单实例教程
2018/07/03 Javascript
JS实现贪吃蛇游戏
2019/11/15 Javascript
详解Python中的静态方法与类成员方法
2017/02/28 Python
python实现Decorator模式实例代码
2018/02/09 Python
将TensorFlow的模型网络导出为单个文件的方法
2018/04/23 Python
python实现顺序表的简单代码
2018/09/28 Python
Python字符串逆序输出的实例讲解
2019/02/16 Python
Python socket模块ftp传输文件过程解析
2019/11/05 Python
pandas之分组groupby()的使用整理与总结
2020/06/18 Python
IE10 Error.stack 让脚本调试更加方便快捷
2013/04/22 HTML / CSS
时尚、社区、科技:SEVENSTORE
2019/04/26 全球购物
高中毕业生自我鉴定
2013/11/03 职场文书
安全生产先进个人材料
2014/02/06 职场文书
习总书记三严三实学习心得体会
2014/10/13 职场文书
工作经历证明书范文
2014/11/02 职场文书
护士求职自荐信
2015/03/25 职场文书
2016年3月份红领巾广播稿
2015/12/21 职场文书
党章学习心得体会2016
2016/01/14 职场文书