微信公众号文字页SVG交互开发指南

terry 2年前 (2023-09-23) 阅读数 63 #移动小程序

作者：兔爷

很多人公众号公众号公众号直接在文字页使用SVG交互动画来增加交互阅读体验，而不是增加阅读体验。结合这个需求，本期分享的内容是交互式SVG的开发及其在微信文本页面的嵌入公众号。设计师和前端开发的同学可以参考一下。学习后，我可以从事这一领域的私人工作，很快就能赚到一些钱。

我们先看一下最终的SVG交互效果：

1为什么需要公众号交互式SVG

技术必须有实际的应用场景才能有效。为什么很多人开始公众号 SVG交互而离开H5？

主要有两个原因：

H5制作成本较高，需要一定的开发周期和服务器支持。
从文本页面多一步跳转到H5页面，很容易造成用户流失。

当然，如果需要复杂的交互或者多种功能，H5还是需要单独开发。

虽然SVG只能实现简单的交互，但它可以在不分散用户对内容的注意力的情况下增强交互体验。很多场景还是有需要的。

2 应用场景

SVG交互的核心仍然是基于SVG SMIL动画，配合SVG点击事件实现非常简单的交互。

虽然达到的效果很有限，但仍有很大的提升空间，比如以下应用场景：

【汽车推广】点击汽车，汽车会移动并经过某个地点到达显示某个地标或地名副本。
【心理测试】点击选项后，会显示选择结果。
【打开红包】将红包一层层打开，露出里面的内容。
【密码解锁】点击指定数字后，会显示解锁内容。
【寻找灯笼拼图】点击即可显示内容，类似翻卡。

让我们从制作演示的整个过程开始吧。

3素材制作

3.1壁纸

使用PS等软件设计SVG壁纸。建议的宽度为 640-750 像素。它可以更高，但文件大小也会增加。在本例中，我们创建一个 640px x 800px jpg 背景图片：

3.2 SVG 素材

可以从阿里巴巴矢量库（https://www.iconfont.cn/）下载。在人工智能的帮助下，你可以自己制作。但需要注意控制SVG图像的大小。 SVG图像的大小是点击区域，因此它控制图像的空白白色区域。

本教程从阿里巴巴矢量库下载鞭炮SVG。下载完后用AI打开，缩小图片大小：

3.3 导出SVG

因为微信编辑器不允许嵌入 SVG tag 通过人工智能你需要提供一些设置：

选择样式作为呈现属性，以便导出的 SVG 不包含元素以及通过标签属性设置的元素样式，而不是使用样式内联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>

这里的样式都是基本的CSS，所以不再赘述。

我们主要讲viewBox属性：

viewBox="x,y,width,height"

x,y控制SVG所有元素的位移（不影响背景图） SVG）。

宽度和高度不是SVG的实际宽度和高度，而是SVG内的“分辨率”。宽度和高度越大，SVG 元素越小，反之亦然（SVG 背景不受影响）。

我们建议将viewBox的x和y值设置为0，宽度和高度设置为背景图像的大小。

4.2 添加文本

首次使用添加文本：

    <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 调整位置，字体大小和样式调整文本颜色和样式。

4.3 添加文字动画

现在实现文字闪烁效果。这里应该使用和标签。

    <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

介绍：

attributeName，即动画控件的属性，这里是不透明度的透明度。

begin是动画的开始时间，也可以理解为延迟时间。 0s 表示立即开始动画。也可以是一组以分号分隔的值，例如begin="3s;5s"，表示动画在3s后开始，在6s后重新开始（如果上一个动画没有完成，则立即停止并重新开始）。

dur，动画时间。 dur 越小，动画速度越快。

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

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

标签很简单，只需要组合动画目标元素即可，所以A 元素中的元素具有动画效果。

效果为：

4.4 从SVG中提取鞭炮代码

打开AI生成的SVG文件，仅包含鞭炮的矢量路径：公众号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);">
+               <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

使用人工智能创建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 设置心愿卡的初始属性

由于心愿卡的初始状态，不可见，因此将不透明度设置为 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鞭炮上天

我们想要实现“一键”鞭炮上天，然后是心愿卡。出现。鞭炮和愿望卡必须以团体形式进行。

然后点击开始动画。

    <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"的值可以是transform、scale、rotate、skewX、skewY。

fill，填补动画空白的方法。支持的参数：冻结、移除。 Remove 是默认值，表示动画结束并直接返回起点。冻结意味着动画即使在结束后仍保持其状态。

重启，支持的参数始终为whenNotActive和never。Always是默认值，表示每次都会重新执行动画； whenNotActive 表示动画进行中时无法重新启动动画； never 表示动画仅执行一次。

begin，延迟时间，上面说了，这里加了click，表示点击后立即激活，click+2表示点击后2秒。

现在我们已经实现了点击鞭炮后升天的效果，但是心愿卡还是看不见。这里我们采用“点击+时间”的玩法。

5.2 愿望卡显示屏

位于愿望卡内部。由于鞭炮升起的动画是0.5秒，所以点击+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>

※注意：注意start=click和start=click+0.5的层级关系。首先，click元素和click+0.5元素必须在同一个区域；其次，click+0.5元素的层级比click元素的层级更深，因此可以完全匹配同一个点击事件。