推薦適合元宵的SVG模版
寶藏模版
往期推薦（點(diǎn)擊閱讀）：
??推薦幾個(gè)敲級(jí)可愛(ài)的SVG模版??
各位?E2.COOL?的會(huì)員，編輯器內(nèi) 900+ 的 SVG 組件你們都用過(guò)嗎？臨近兔年元宵，各色具備解謎特性的交互 SVG 必將大放異彩，那么本期就具體來(lái)看看哪些組件值得應(yīng)用吧！
宮格分欄+滑動(dòng)模塊
以瑪莎拉蒂的《元宵節(jié)“拼”一把！》為例，將宮格與滑動(dòng)結(jié)合，形成類似拼圖的互動(dòng)情景，能將產(chǎn)品圖或海報(bào)以更具互動(dòng)感的方式呈現(xiàn)給用戶。
其搭建結(jié)構(gòu)也非常簡(jiǎn)單。如一個(gè)九宮格的拼圖效果，只需在「九宮格」組件各個(gè)嵌套區(qū)內(nèi)放入「無(wú)限圖片滑動(dòng)」即可：
抽簽特效+彈出式海報(bào)等
以定制（by 意符文化）案例寶馬的《放開(kāi)那個(gè)元宵》為典型，如果將某個(gè)或某幾個(gè)抽簽畫面留空，露出下層的彈出式海報(bào)，則會(huì)形成另一種有趣的解謎式互動(dòng)——長(zhǎng)按畫面，只有停留在特定序列才能點(diǎn)擊彈出海報(bào)。
那么這種結(jié)構(gòu)是如何實(shí)現(xiàn)的？結(jié)合「零高容器」，我們將下層互動(dòng)（如彈出式海報(bào)）與抽簽結(jié)構(gòu)疊加即可：
至于留空的簽，建議選擇最后或相對(duì)接近最后的一個(gè)或幾個(gè)簽不傳，避免交互層面存在誤觸問(wèn)題。當(dāng)然，寶馬中國(guó)的原作屬于定制案例，有更高頻的序列幀刷新和更細(xì)節(jié)的畫面分層設(shè)計(jì)。
這里重點(diǎn)在于啟發(fā)各位讀者們的思路——此處的彈出式海報(bào)，也可以替換為其他類型的互動(dòng)。不妨大膽設(shè)想比如結(jié)合「任意動(dòng)畫接伸長(zhǎng)」進(jìn)行伸長(zhǎng)接續(xù)，或者疊加「切換圖片+播放音頻」等形成更多自己的獨(dú)創(chuàng) SVG 設(shè)計(jì)。
GIF 控制器
如果品牌設(shè)計(jì)師已經(jīng)制作了精妙的元宵動(dòng)畫，那么通過(guò)對(duì) GIF 圖的控制播放就足以形成優(yōu)質(zhì)的交互體驗(yàn)，如喜茶《元宵笑「鹽」開(kāi)，買一送一》中的燈謎翻轉(zhuǎn)效果：
在?E2.COOL?的組件搜索功能內(nèi)查找「GIF控制器」即可體驗(yàn)！一般來(lái)說(shuō)，建議在 PS 中導(dǎo)出該 GIF 時(shí)設(shè)置為「僅一次播放」喔！
雙面翻轉(zhuǎn)
你也可以選擇通過(guò)純 SVG 代碼執(zhí)行的翻轉(zhuǎn)去模擬猜燈謎的互動(dòng)效果，以定制（by 交互實(shí)驗(yàn)室）案例榮耀的《正月十五，當(dāng)元宵燈謎遇上諧音?！窞榈湫?，它通過(guò)「放大消失」+「雙面翻轉(zhuǎn)」的效果組合形成了解謎的遞進(jìn)感。
我們同樣通過(guò)「零高容器」的疊加能力模擬上述效果。由于雙面翻轉(zhuǎn)后需要畫面可被點(diǎn)擊前往無(wú)圖標(biāo)小程序，因此第二個(gè)零高容器應(yīng)篩選成「穿透」式。小程序附著在最底層的背景圖即可：
視差滑動(dòng)
如果我們以月亮為切入點(diǎn)，同樣可以打造曼妙的閱讀氛圍。這里尤其推薦參考 Vogue 的《古馳宇宙向你發(fā)來(lái)邀請(qǐng)》佳作，它基于?E2.COOL?黑科技 SVG 編輯器排版而成，通過(guò)視差滑動(dòng)形成了裸眼 3D 般的互動(dòng)感官：
標(biāo)簽抽拉
知名交互設(shè)計(jì)師?@GL?先生設(shè)計(jì)「標(biāo)簽抽拉」組件在元宵節(jié)中也可以作為猜燈謎的應(yīng)用形式。以福特汽車的《元宵燈謎，「禽」您來(lái)猜》為例，它以多個(gè)謎題的謎底組合為線索，讓產(chǎn)品廣告有機(jī)融合到了節(jié)日活動(dòng)中：
在?E2.COOL?的組件搜索功能內(nèi)查找「標(biāo)簽抽拉」即可體驗(yàn)！該組件為 UGC 原創(chuàng)組件，任何會(huì)員均可單獨(dú)購(gòu)買使用喔！
三折頁(yè)立體廣告
由知名新媒體藝術(shù)研究機(jī)構(gòu) JZ Creative Studio?獨(dú)家授權(quán)至平臺(tái)的「三折頁(yè)立體廣告」或許是在形態(tài)上最符合花燈的多圖展示動(dòng)畫：
在?E2.COOL?的組件搜索功能內(nèi)查找「三折頁(yè)立體廣告」即可體驗(yàn)！其中的每張圖片都可另外附加超鏈接，具備真正的 3D 視角輪播感官，結(jié)合適當(dāng)?shù)母釉O(shè)計(jì)就能形成花燈輪播的效果。
為確保畫面變形的可控性，建議設(shè)計(jì)正方形的花燈圖，然后結(jié)合你的實(shí)際花燈設(shè)計(jì)樣式，利用「占位」組件完成輪播裝置的定位：
這里是黑科技編輯器（e2.cool），會(huì)的比別人多一點(diǎn)
