朋友們大家好，我是三兒。

最近不少朋友看到了許多大牌愛(ài)上了一個(gè)新交互。

就像這樣??

以及三兒之前做過(guò)類(lèi)似的效果【如果offer長(zhǎng)這樣，桂林仔也會(huì)愛(ài)上班】

本質(zhì)上是讓用戶(hù)有多個(gè)選項(xiàng)選擇其中某個(gè)結(jié)果，最后根據(jù)用戶(hù)的選項(xiàng)生成一個(gè)獨(dú)一無(wú)二的結(jié)果。

是不是有點(diǎn)炫酷，你是不是也想要制作同款？那就跟著三兒一起開(kāi)啟今日的學(xué)習(xí)之旅吧??

-進(jìn)入SVG編輯器-

在編輯器左側(cè)找到【SVG編輯器】

點(diǎn)擊進(jìn)入SVG編輯器選中【互動(dòng)效果】后在搜索框中輸入【多項(xiàng)點(diǎn)擊選擇】或是輸入組件ID

我們這里就以多項(xiàng)點(diǎn)擊選擇-點(diǎn)擊展開(kāi)生成結(jié)果為例。

點(diǎn)擊組件進(jìn)入編輯頁(yè)面，這個(gè)時(shí)候咱們先別著急上傳素材，先看看素材要求再上傳。

是不是看的有些云里霧里的？

我們做一個(gè)簡(jiǎn)單的拆分：多項(xiàng)點(diǎn)擊選擇-點(diǎn)擊展開(kāi)生成結(jié)果由這幾個(gè)部分組成。

一：選擇題板塊：內(nèi)容圖與點(diǎn)擊選擇后的圖寬高尺寸一致，各個(gè)選擇題內(nèi)容圖寬需要一致，高可以不同；

二：選項(xiàng)關(guān)聯(lián)結(jié)果圖與結(jié)果背景圖的寬高需要一致

三：關(guān)聯(lián)結(jié)果圖中的元素需要按照最終在結(jié)果背景圖上的位置擺放下載。

簡(jiǎn)單點(diǎn)講就是你先把生成結(jié)果的位置擺好，然后去除背景只保留你的結(jié)果圖。

四：封面圖與結(jié)果背景的寬度一致

我們先上傳自己的選擇題板塊

上傳選擇生成圖，我這里是選擇哪個(gè)選項(xiàng)就會(huì)出現(xiàn)?，因?yàn)槲乙还灿?個(gè)選項(xiàng)所以會(huì)出現(xiàn)四個(gè)?。

設(shè)置點(diǎn)擊觸發(fā)區(qū)，以及觸發(fā)效果。

上傳結(jié)果關(guān)聯(lián)圖

最后記得上傳結(jié)果封面圖與結(jié)果背景圖

我們這里只做了其中一個(gè)選項(xiàng)的結(jié)果生成，大家重復(fù)上述素材上傳即可。

在完成所有內(nèi)容編輯后就可以選擇導(dǎo)出到編輯器或是微信公眾號(hào)后臺(tái)了。

怎么樣是不是已經(jīng)學(xué)會(huì)了

如果你不想有【展開(kāi)】這一步

可以直接選擇

【多項(xiàng)點(diǎn)擊選擇+生成結(jié)果展示】

大家可以根據(jù)自己的喜好來(lái)

這個(gè)效果在三兒看來(lái)

最麻煩的是厘清圖片素材尺寸關(guān)系

一定要確認(rèn)好再開(kāi)始作圖

要不然很可能是

竹籃打水一場(chǎng)空

（這都是血淋淋的教訓(xùn)）

相信聰明的你已經(jīng)學(xué)會(huì)了

那么眼睛看會(huì)了

記得動(dòng)手做一做哦

春日暖陽(yáng)

三兒也有一份薄禮相送

快去掃碼領(lǐng)取吧