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

时间 2019-11-05

标签详细微信公众号正文 svg 交互开发繁體版

原文原文链接

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

先看下最终SVG交互效果：css

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

1 为何公众号须要交互SVG

技术要有落地的应用场景才能发挥实效。为何不少公众号开始作SVG交互而放弃H5呢？前端

主要缘由有两点：git

H5制做成本高，须要必定的开发周期和服务器支撑。
从正文页跳转H5页面多了一个步骤，容易形成用户流失。

固然，对于须要复杂交互，或者更多功能的话，仍是须要单独开发H5。github

SVG虽然只能实现简单的交互，但既能增长交互体验又不会太分散用户对内容的关注点，在不少场景下仍是颇有需求的。chrome

2 应用场景

SVG交互本质仍是基于SVG SMIL animation，配合SVG的click事件，实现很是简单的交互。bash

虽然实现的效果颇有限，但仍是有不少发挥空间的，好比如下应用场景：服务器

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

下面开始讲解本期Demo的制做全过程。微信

3 素材制做

3.1 背景图片

使用PS等软件设计SVG的背景图，建议宽度为640px~750px，也能够更高，但文件大小也会增长。本例制做了 640px x 800px 的jpg背景图：微信公众平台

3.2 SVG素材

能够去阿里巴巴矢量图库(www.iconfont.cn/)网站下载。也能够自行使用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 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设置字号。

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>内的元素执行动画了。

效果以下：

4.4 从SVG提取爆竹代码

打开AI生成的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>
复制代码

4.6 制做愿望牌SVG

经过AI制做愿望牌SVG，记得经过Command+Shift+O，把文字转化为矢量。而后按照3.3章节导出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>
复制代码

效果以下，愿望牌彻底挡住了爆竹：

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 上传背景图素材

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

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

6.2 导入微信文章正文

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

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

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

替换为咱们的SVG代码：

而后随便点击下其余元素的代码，有时可能会自动撤销，若是出现这种状况，再从新粘贴一次就行。

完成后，就能够发布预览啦。

6.3 注意事项

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

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

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

6.4 奇葩BUG及技巧经验

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

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动画详解》

www.zhangxinxu.com/wordpress/2…

SVG参考

www.runoob.com/svg/svg-ref…

6.6 完整HTML代码

请前往个人github查看: github.com/Yuezi32/wei…

以上就是本期的分享内容，感谢观看。及时获取最新精彩文章，欢迎关注个人我的公众号^_^