宝藏模版
往期推荐（点击阅读）：
🤑618排版必备SVG模版🤑
http://mp.weixin.qq.com/s?__biz=Mzk0NDIyMjU0OQ==&mid=2247505052&idx=1&sn=40d88344ea787fbfcdfe7d4597a02faa&chksm=c3256ca6f452e5b041deaba9838b1159bdec451d455d2ba9cd60e8db194a95cae7af58b08b2b&scene=21#wechat_redirect
🤠属于爸爸们的SVG模版🤠http://mp.weixin.qq.com/s?__biz=Mzk0NDIyMjU0OQ==&mid=2247505196&idx=1&sn=b3e267edfa44b86de7331e476f538d20&chksm=c3256d16f452e4008624efa170c4b6d2949be8dde287af4375eeaece0642305428230183e926&scene=21#wechat_redirect
各位黑科技编辑器会员，编辑器内 900+ 的 SVG 组件你们都用过吗？临近兔年元宵，各色具备解谜特性的交互 SVG 必将大放异彩，那么本期就具体来看看哪些组件值得应用吧！
宫格分栏+滑动模块
以玛莎拉蒂的《元宵节“拼”一把！》为例，将宫格与滑动结合，形成类似拼图的互动情景，能将产品图或海报以更具互动感的方式呈现给用户。
其搭建结构也非常简单。如一个九宫格的拼图效果，只需在「九宫格」组件各个嵌套区内放入「无限图片滑动」即可：
抽签特效+弹出式海报等
以定制（by 意符文化）案例宝马的《放开那个元宵》为典型，如果将某个或某几个抽签画面留空，露出下层的弹出式海报，则会形成另一种有趣的解谜式互动——长按画面，只有停留在特定序列才能点击弹出海报。
那么这种结构是如何实现的？结合「零高容器」，我们将下层互动（如弹出式海报）与抽签结构叠加即可：
至于留空的签，建议选择最后或相对接近最后的一个或几个签不传，避免交互层面存在误触问题。当然，宝马中国的原作属于定制案例，有更高频的序列帧刷新和更细节的画面分层设计。
这里重点在于启发各位读者们的思路——此处的弹出式海报，也可以替换为其他类型的互动。不妨大胆设想比如结合「任意动画接伸长」进行伸长接续，或者叠加「切换图片+播放音频」等形成更多自己的独创 SVG 设计。
GIF 控制器
如果品牌设计师已经制作了精妙的元宵动画，那么通过对 GIF 图的控制播放就足以形成优质的交互体验，如喜茶《元宵笑「盐」开，买一送一》中的灯谜翻转效果：
在 E2.COOL 的组件搜索功能内查找「GIF控制器」即可体验！一般来说，建议在 PS 中导出该 GIF 时设置为「仅一次播放」喔！
双面翻转
你也可以选择通过纯 SVG 代码执行的翻转去模拟猜灯谜的互动效果，以定制（by 交互实验室）案例荣耀的《正月十五，当元宵灯谜遇上谐音梗》为典型，它通过「放大消失」+「双面翻转」的效果组合形成了解谜的递进感。
我们同样通过「零高容器」的叠加能力模拟上述效果。由于双面翻转后需要画面可被点击前往无图标小程序，因此第二个零高容器应筛选成「穿透」式。小程序附着在最底层的背景图即可：
视差滑动
如果我们以月亮为切入点，同样可以打造曼妙的阅读氛围。这里尤其推荐参考 Vogue 的《古驰宇宙向你发来邀请》佳作，它基于 E2.COOL 黑科技 SVG 编辑器排版而成，通过视差滑动形成了裸眼 3D 般的互动感官：
标签抽拉
知名交互设计师 @GL 先生设计「标签抽拉」组件在元宵节中也可以作为猜灯谜的应用形式。以福特汽车的《元宵灯谜，「禽」您来猜》为例，它以多个谜题的谜底组合为线索，让产品广告有机融合到了节日活动中：
在编辑器组件搜索功能内查找「标签抽拉」即可体验！该组件为 UGC 原创组件，任何会员均可单独购买使用喔！
三折页立体广告
由知名新媒体艺术研究机构 JZ Creative Studio 独家授权至平台的「三折页立体广告」或许是在形态上最符合花灯的多图展示动画：
在编辑器组件搜索功能内查找「三折页立体广告」即可体验！其中的每张图片都可另外附加超链接，具备真正的 3D 视角轮播感官，结合适当的浮层设计就能形成花灯轮播的效果。
为确保画面变形的可控性，建议设计正方形的花灯图，然后结合你的实际花灯设计样式，利用「占位」组件完成轮播装置的定位：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
