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