最近有不少朋友，拿著創意天花板，SVG交互頂流GQ實驗室的一篇文章問我。

“三兒，我們可以做嗎？”

我們先來看看這篇文章，它是一個多次選擇+點擊首圖消失生成選擇結果圖的效果。

>點擊欣賞原文<

先說結論：可以做！

接下來讓我們一同來見證奇跡。

在編輯器左側找到SVG編輯器，點擊進入SVG編輯器。

選擇互動效果，在搜索框中輸入組件ID：543，就能找到[橫向多選擇滑動+生成結果展示]組件。

注意！注意！在上傳圖片素材前，我們需要仔仔細細查看素材要求，不少朋友之間略過這一步導致最后的效果無法呈現。

提煉一下：

1.每組滑動板塊中背景圖和滑動圖寬高尺寸一致；

2.每個組之間的寬度需要一致，高度不需要；

3.每個滑動圖匹配的結果圖和結果封面圖，結果背景圖需要寬高一致；

4.滑動結果圖中元素需要按最終結果背景圖顯示的位置擺放，不要和滑動圖共用一張圖。

“文字太多，看得腦袋暈”

別著急，跟著三兒動手做一遍，你就明白了！

01.先上傳結果封面圖和結果背景圖（素材寬度尺寸一致）

02.添加滑動板塊

03.上傳背景圖（背景圖尺寸與滑動圖尺寸一致）

03.上傳滑動圖

給大家理一下：

滑動圖：是用戶在選擇滑動的部分與背景圖尺寸一致；

滑動結果圖：是最后點擊呈現的部分；

故滑動結果圖的寬高需要和結果封面圖以及結果背景圖一致，且滑動結果圖中元素需要按最終結果背景圖顯示的位置擺放。

04.添加滑動板塊

剛剛咱們完成的僅僅是第一個滑動板塊的內容，接下來我們依葫蘆畫瓢，再添加第二個滑動板塊。

第二個滑動板塊的背景圖、滑動圖、滑動結果圖與第一個滑動板塊一致，這里不再重復，有幾個滑動內容添加幾個滑動板塊即可。

為了防止大家搞不清楚各個板塊圖片尺寸關系，三兒這里做了一個圖例。

05.導入到編輯器或同步到公眾號后臺

如果你的公眾號沒有授權135編輯器也想要同步到后臺，可以安裝135插件后，免授權同步。

以上就是關于

今天效果組件的全部教學啦

內容有點干

大家可以收藏本文

多次學習

朋友們眼睛看會了

記得要動手操作哦

大家還想要get什么效果

記得在評論區留言

三兒都給你安排上

如果你記得今天的內容對你有幫助的

別忘了給我一鍵三連

求求啦這對我真的很重要