玩轉(zhuǎn)夏日推文！SVG“抽拉卡片”效果這么用超吸睛 | 教程
夏日推文必備的SVG“抽拉卡片”效果來襲！從寶詩龍、廣州柏悅酒店到135平臺玩法全解析，更有制作教程、應(yīng)用場景、素材規(guī)范一網(wǎng)打盡，輕松讓推文互動感翻倍！
救命！這屆打工人被太陽"烤"到變形
每天通勤像行走的羊肉串
急需冰闊落+開盲盒雙倍快樂續(xù)命！
想要快速降溫
除了空調(diào)
還有抽到「?？ā沟目鞓?/span>
能讓人感到?jīng)鏊?/span>
說到抽卡
最近不少品牌愛上了「卡片抽拉」交互
交互強(qiáng)、效果棒
我們一起來看看吧
互斥抽拉卡片，我們可以在哪些場景下使用呢？
一.作品（產(chǎn)品）介紹：如美術(shù)作品、商品細(xì)節(jié)、人物介紹等。
二.年度總結(jié)：每張卡片上是每季度（每月）重點(diǎn)工作成效展示。
三.趣味卡片：可以是抽「福卡」和用戶互動
四.文案分享：文案摘抄、詩歌分享也可以用卡片呈現(xiàn)
.....
一.進(jìn)入SVG編輯器
二.搜索組件
在SVG編輯器左側(cè)選擇「SVG效果」在搜索框中搜索：點(diǎn)擊豎向抽取圖片（無限） ID：1029
三.點(diǎn)擊組件進(jìn)入編輯區(qū)
單擊組件添加進(jìn)編輯區(qū)中
四.確認(rèn)素材要求
在制作效果前，我們需要先確認(rèn)上傳素材符合效果素材要求，避免出現(xiàn)素材不符合組件要求導(dǎo)致效果失效的情況。
本篇效果要求為：
01.背景圖與頂層圖寬高一致
02.抽取卡片尺寸可以不與背景圖一致但建議一致
03.建議抽取卡片數(shù)量少于6張
04.由于整個卡片皆為觸發(fā)區(qū)，卡片四周制作時應(yīng)減少透明鏤空區(qū)域
五.素材圖展示
頂層圖
1080*1720
背景圖
1080*1720
卡片1
1080*1720
卡片2
1080*1720
卡片3
1080*1720
六.按要求上傳素材圖
按照「背景圖」「頂層圖」「彈出圖」分別上傳對應(yīng)的素材圖。同時發(fā)現(xiàn)卡片底部露出區(qū)域過多，我們想要頂層圖遮擋卡片部分內(nèi)容，這時候需要手動調(diào)整彈出卡片的位置。
未調(diào)整卡片位置
調(diào)整居中距離為50%，效果還是很明顯的吧。除此之外我們還可以調(diào)整卡片的旋轉(zhuǎn)角度、彈出動畫時長等。
七.導(dǎo)出與同步
制作完成后，我們可以同步到公眾號后臺（需要先給135授權(quán)公眾號）或是使用插件同步后臺（無需授權(quán)公眾號）
如果我們只是在SVG編輯器里制作的部分效果，還需要在135編輯器中繼續(xù)完成，可使用「導(dǎo)出」將內(nèi)容導(dǎo)出到135編輯器后繼續(xù)完成內(nèi)容。
以上就是我們本期
無限抽拉卡片的全部教程
相信聰明的你已經(jīng)學(xué)會了吧
大家還有什么想看想學(xué)的
記得在評論區(qū)告訴我哦
立即登錄
