楔子
某天一个朋友问我： “知道这个效果是怎么实现的么？”
说完甩给我一个预览链接
--> mp.weixin.qq.com/s/JaBjmGeuv… <--
看完惊奇了 微信公众号文章可以实现这种交互效果的吗？
好奇的我查看了一下源代码
通篇充斥着大量自带样式的svg标签 这是啥？
原理
本着不懂就搜的好习惯 借助搜索引擎大致明白了实现原理
基于微信公众号富文本编辑器的漏洞 把编辑好的svg内容插入到编辑器中
当然，代码的插入只是效果实现的基础。 剩下的交互效果就需要咱们自己来实现了
这里需要具备svg 及 svg动画 的知识储备； 附上svg api文档 有需要的同学可以自行学习
--> developer.mozilla.org/zh-CN/docs/… <--
实现
由于篇幅有限 这里我就上边的示例 粗略的聊聊它的代码实现 我们先进一段代码
<svg
preserveAspectRatio="xMidYMin meet"
width="500"
height="400"
viewBox="0 0 343 486"
xmlns="http://www.w3.org/2000/svg"
style="..."
>
<animate
attributeName="height"
begin="click+7s"
calcMode="spline"
keySplines="0.42 0 0.58 1; 0.42 0 0.58 1"
dur="4s"
keyTimes="0;0.1;1"
fill="freeze"
values="486;1300;2946;"
>
</animate>
</svg>
我们先看下svg 标签
- width height 设置svg在网页上的显示宽高
- viewBox 设置的是可视区域大小 可理解为画布大小 值为 x y width height；
- preserveAspectRatio 设置svg viewBox 与 视图的缩放关系
- xMidYMin 设置svg与视图 x y 的缩放方式 值有三个 Min Mid Max 对应 最小 中点 最大 对齐；
- meet 设置svg的缩放方式 值有 meet 和 slice 具体效果可参看 demo
- style 设置svg的样式 背景图片啥的
接下来是核心标签 animate
示例中所有的交互动画都是通过此元素来实现的
- attributeName 设置动画的属性
- begin 设置动画 开始指令和 时间 click+7s 即点击事件完成后延迟7秒 开始动画
- dur 设置动画持续时间
- values 设置动画关键帧的变化值
- calcMode 设置动画的过度曲线
- discrete 关键帧之间没有过度
- linear 线性过度
- spline 插值根据由三次Bézier样条曲线定义的时间函数从values列表中的一个值插入到下一个值。样条曲线的点在keyTimes属性中定义，每个区间的控制点在keySplines属性中定义。
- paced 插值可在整个动画中产生均匀的变化速度
- fill 设置动画结束后状态 freeze 结束后保持冻结状态 remove 动画结束就移除
借由上面两个标签 便可实现改变背景图片、宽高；实现变形、位移等交互行为，再组合gif图片、微信音频文件就可以完成一些比较有意思的业务场景了
示例中的交互实现方式
整个页面分位两大部分
第一部分是进入页面的首屏 第二部分为页面撑开后的主体内容部分
包裹他们的父级设置overflow:hidden 第一部分设置float:left 这样就成功把第二部分先隐藏掉了
点击第一部分svg 在7秒钟内轮播了 倒计时 睁眼效果 然后宽度变为0 高度变为第二部分的高度 撑开父级容器 第二部分内容成功显示 实现了两部分内容的切换效果
之后就是第二部分的 点击切换图片效果
局限
- 一个svg只能设置一个交互行为 在复杂交互上显得乏力
- 在代码编排上需要花较多心思 代码层级会比较冗杂繁琐
- 调试不易 本地开发和实际终端效果可能会有出入 需要频繁预览调试
- 只能通过animate 来设置交互 不允许js的插入
总结
总的来说 微信公众号加入svg效果真的挺好的 正所谓静不如动嘛 让用户有参与感 呈现出的效果有趣又好玩 这对于营销推广类内容来说 是非常加分的； 加入一点灵感的小火花 就能让你的公众号文章脱颖而出 大放异彩哟~~
