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

最近不少朋友看到了許多大牌愛上了一個新交互。

就像這樣??

以及三兒之前做過類似的效果【如果offer長這樣，桂林仔也會愛上班】

本質上是讓用戶有多個選項選擇其中某個結果，最后根據(jù)用戶的選項生成一個獨一無二的結果。

是不是有點炫酷，你是不是也想要制作同款？那就跟著三兒一起開啟今日的學習之旅吧??

-進入SVG編輯器-

在編輯器左側找到【SVG編輯器】

點擊進入SVG編輯器選中【互動效果】后在搜索框中輸入【多項點擊選擇】或是輸入組件ID

我們這里就以多項點擊選擇-點擊展開生成結果為例。

點擊組件進入編輯頁面，這個時候咱們先別著急上傳素材，先看看素材要求再上傳。

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

我們做一個簡單的拆分：多項點擊選擇-點擊展開生成結果由這幾個部分組成。

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

二：選項關聯(lián)結果圖與結果背景圖的寬高需要一致

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

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

四：封面圖與結果背景的寬度一致

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

上傳選擇生成圖，我這里是選擇哪個選項就會出現(xiàn)?，因為我一共有4個選項所以會出現(xiàn)四個?。

設置點擊觸發(fā)區(qū)，以及觸發(fā)效果。

上傳結果關聯(lián)圖

最后記得上傳結果封面圖與結果背景圖

我們這里只做了其中一個選項的結果生成，大家重復上述素材上傳即可。

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

怎么樣是不是已經(jīng)學會了

如果你不想有【展開】這一步

可以直接選擇

【多項點擊選擇+生成結果展示】

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

這個效果在三兒看來

最麻煩的是厘清圖片素材尺寸關系

一定要確認好再開始作圖

要不然很可能是

竹籃打水一場空

（這都是血淋淋的教訓）

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

那么眼睛看會了

記得動手做一做哦

春日暖陽

三兒也有一份薄禮相送

快去掃碼領取吧