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

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

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

>點擊欣賞原文<

先說結(jié)論：可以做！

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

在編輯器左側(cè)找到SVG編輯器，點擊進入SVG編輯器。

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

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

提煉一下：

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

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

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

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

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

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

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

02.添加滑動板塊

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

03.上傳滑動圖

給大家理一下：

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

滑動結(jié)果圖：是最后點擊呈現(xiàn)的部分；

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

04.添加滑動板塊

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

第二個滑動板塊的背景圖、滑動圖、滑動結(jié)果圖與第一個滑動板塊一致，這里不再重復(fù)，有幾個滑動內(nèi)容添加幾個滑動板塊即可。

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

05.導(dǎo)入到編輯器或同步到公眾號后臺

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

以上就是關(guān)于

今天效果組件的全部教學(xué)啦

內(nèi)容有點干

大家可以收藏本文

多次學(xué)習(xí)

朋友們眼睛看會了

記得要動手操作哦

大家還想要get什么效果

記得在評論區(qū)留言

三兒都給你安排上

如果你記得今天的內(nèi)容對你有幫助的

別忘了給我一鍵三連

求求啦這對我真的很重要