最近有不少朋友，拿着创意天花板，SVG交互顶流GQ实验室的一篇文章问我。

“三儿，我们可以做吗？”

我们先来看看这篇文章，它是一个多次选择+点击首图消失生成选择结果图的效果。

>点击欣赏原文<

先说结论：可以做！

接下来让我们一同来见证奇迹。

在编辑器左侧找到SVG编辑器，点击进入SVG编辑器。

选择互动效果，在搜索框中输入组件ID：543，就能找到[横向多选择滑动+生成结果展示]组件。

注意！注意！在上传图片素材前，我们需要仔仔细细查看素材要求，不少朋友之间略过这一步导致最后的效果无法呈现。

提炼一下：

1.每组滑动板块中背景图和滑动图宽高尺寸一致；

2.每个组之间的宽度需要一致，高度不需要；

3.每个滑动图匹配的结果图和结果封面图，结果背景图需要宽高一致；

4.滑动结果图中元素需要按最终结果背景图显示的位置摆放，不要和滑动图共用一张图。

“文字太多，看得脑袋晕”

别着急，跟着三儿动手做一遍，你就明白了！

01.先上传结果封面图和结果背景图（素材宽度尺寸一致）

02.添加滑动板块

03.上传背景图（背景图尺寸与滑动图尺寸一致）

03.上传滑动图

给大家理一下：

滑动图：是用户在选择滑动的部分与背景图尺寸一致；

滑动结果图：是最后点击呈现的部分；

故滑动结果图的宽高需要和结果封面图以及结果背景图一致，且滑动结果图中元素需要按最终结果背景图显示的位置摆放。

04.添加滑动板块

刚刚咱们完成的仅仅是第一个滑动板块的内容，接下来我们依葫芦画瓢，再添加第二个滑动板块。

第二个滑动板块的背景图、滑动图、滑动结果图与第一个滑动板块一致，这里不再重复，有几个滑动内容添加几个滑动板块即可。

为了防止大家搞不清楚各个板块图片尺寸关系，三儿这里做了一个图例。

05.导入到编辑器或同步到公众号后台

如果你的公众号没有授权135编辑器也想要同步到后台，可以安装135插件后，免授权同步。

以上就是关于

今天效果组件的全部教学啦

内容有点干

大家可以收藏本文

多次学习

朋友们眼睛看会了

记得要动手操作哦

大家还想要get什么效果

记得在评论区留言

三儿都给你安排上

如果你记得今天的内容对你有帮助的

别忘了给我一键三连

求求啦这对我真的很重要