公眾號SVG互動效果，選擇生成結(jié)果教程
【炫酷交互制作教程】大牌同款新交互來襲！跟隨三兒輕松打造“多項(xiàng)點(diǎn)擊選擇”效果，實(shí)現(xiàn)獨(dú)一無二的結(jié)果生成。從SVG編輯器到素材上傳，詳細(xì)步驟一一解析，讓你輕松上手。
朋友們大家好，我是三兒。
最近不少朋友看到了許多大牌愛上了一個新交互。
就像這樣??
以及三兒之前做過類似的效果【如果offer長這樣，桂林仔也會愛上班】
本質(zhì)上是讓用戶有多個選項(xiàng)選擇其中某個結(jié)果，最后根據(jù)用戶的選項(xiàng)生成一個獨(dú)一無二的結(jié)果。
是不是有點(diǎn)炫酷，你是不是也想要制作同款？那就跟著三兒一起開啟今日的學(xué)習(xí)之旅吧??
-進(jìn)入SVG編輯器-
在編輯器左側(cè)找到【SVG編輯器】
點(diǎn)擊進(jìn)入SVG編輯器選中【互動效果】后在搜索框中輸入【多項(xiàng)點(diǎn)擊選擇】或是輸入組件ID
我們這里就以多項(xiàng)點(diǎn)擊選擇-點(diǎn)擊展開生成結(jié)果為例。
點(diǎn)擊組件進(jìn)入編輯頁面，這個時候咱們先別著急上傳素材，先看看素材要求再上傳。
是不是看的有些云里霧里的？
我們做一個簡單的拆分：多項(xiàng)點(diǎn)擊選擇-點(diǎn)擊展開生成結(jié)果由這幾個部分組成。
一：選擇題板塊：內(nèi)容圖與點(diǎn)擊選擇后的圖寬高尺寸一致，各個選擇題內(nèi)容圖寬需要一致，高可以不同；
選擇題目板塊
點(diǎn)擊選擇后的顯示
二：選項(xiàng)關(guān)聯(lián)結(jié)果圖與結(jié)果背景圖的寬高需要一致
結(jié)果背景圖
選項(xiàng)關(guān)聯(lián)結(jié)果圖
三：關(guān)聯(lián)結(jié)果圖中的元素需要按照最終在結(jié)果背景圖上的位置擺放下載。
簡單點(diǎn)講就是你先把生成結(jié)果的位置擺好，然后去除背景只保留你的結(jié)果圖。
四：封面圖與結(jié)果背景的寬度一致
結(jié)果封面圖
結(jié)果背景圖
我們先上傳自己的選擇題板塊
上傳選擇生成圖，我這里是選擇哪個選項(xiàng)就會出現(xiàn)?，因?yàn)槲乙还灿?個選項(xiàng)所以會出現(xiàn)四個?。
設(shè)置點(diǎn)擊觸發(fā)區(qū)，以及觸發(fā)效果。
上傳結(jié)果關(guān)聯(lián)圖
最后記得上傳結(jié)果封面圖與結(jié)果背景圖
我們這里只做了其中一個選項(xiàng)的結(jié)果生成，大家重復(fù)上述素材上傳即可。
在完成所有內(nèi)容編輯后就可以選擇導(dǎo)出到編輯器或是微信公眾號后臺了。
怎么樣是不是已經(jīng)學(xué)會了
如果你不想有【展開】這一步
可以直接選擇
【多項(xiàng)點(diǎn)擊選擇+生成結(jié)果展示】
大家可以根據(jù)自己的喜好來
這個效果在三兒看來
最麻煩的是厘清圖片素材尺寸關(guān)系
一定要確認(rèn)好再開始作圖
要不然很可能是
竹籃打水一場空
（這都是血淋淋的教訓(xùn)）
相信聰明的你已經(jīng)學(xué)會了
那么眼睛看會了
記得動手做一做哦
春日暖陽
三兒也有一份薄禮相送
快去掃碼領(lǐng)取吧
立即登錄
