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

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

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

>點(diǎn)擊欣賞原文<

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

接下來(lái)讓我們一同來(lái)見(jiàn)證奇跡。

在編輯器左側(cè)找到SVG編輯器，點(diǎn)擊進(jìn)入SVG編輯器。

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

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

提煉一下：

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

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

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

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

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

別著急，跟著三兒動(dòng)手做一遍，你就明白了！

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

02.添加滑動(dòng)板塊

03.上傳背景圖（背景圖尺寸與滑動(dòng)圖尺寸一致）

03.上傳滑動(dòng)圖

給大家理一下：

滑動(dòng)圖：是用戶(hù)在選擇滑動(dòng)的部分與背景圖尺寸一致；

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

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

04.添加滑動(dòng)板塊

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

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

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

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

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

以上就是關(guān)于

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

內(nèi)容有點(diǎn)干

大家可以收藏本文

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

朋友們眼睛看會(huì)了

記得要?jiǎng)邮植僮髋?/span>

大家還想要get什么效果

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

三兒都給你安排上

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

別忘了給我一鍵三連

求求啦這對(duì)我真的很重要