公眾號(hào)SVG動(dòng)畫效果交互實(shí)現(xiàn)方法(SVG九宮格制作)

最近公眾號(hào)SVG動(dòng)畫效果,黑科技排版真是超級(jí)熱門,連騰訊“爸爸”都忍不住推送了這種公眾號(hào)SVG交互文章,下面135編輯器就教大家公眾號(hào)SVG動(dòng)畫效果交互實(shí)現(xiàn)方法,還有特好玩的SVG九宮格制作。

image.png


一、公眾號(hào)SVG交互文章排版


那這種公眾號(hào)SVG的交互文章應(yīng)該怎么排版呢?不會(huì)代碼也能做出這種文章嗎?今天小編就給大家介紹一款不需要代碼的公眾號(hào)SVG黑科技排版神器。讓你輕松搞定這種交互形式的排版!


效果示范↑


臨近中秋節(jié),我們今天就來(lái)介紹這樣一個(gè)九宮格的點(diǎn)擊效果怎么制作吧!首先我們打開135編輯器,登錄之后跟著我的步驟一步步來(lái)操作。


二、公眾號(hào)SVG準(zhǔn)備工作


1、將菜單欄切換成【專業(yè)版】



2、在基礎(chǔ)布局,找到一行三個(gè)基礎(chǔ)布局,點(diǎn)擊樣式,放置在135編輯器編輯區(qū)內(nèi)。九宮格其實(shí)就是由三個(gè)一行三列的基礎(chǔ)布局組合而來(lái)的。這里我們先編輯其中一個(gè),后面兩行直接復(fù)制粘貼出來(lái)就可以了。



雙擊第一個(gè)空白處,然后點(diǎn)擊一個(gè)公眾號(hào)SVG布局,放置其中。然后在菜單欄中選擇【SVG布局動(dòng)畫】。




三、SVG制作九宮格答題樣式


制作這個(gè)效果前,我們先對(duì)公眾號(hào)SVG動(dòng)畫設(shè)置版面有個(gè)初步了解。大家可以點(diǎn)擊下面圖片,詳細(xì)查看。



要制作點(diǎn)擊答題這個(gè)效果,需要設(shè)置兩個(gè)頁(yè)面。一個(gè)是點(diǎn)擊前的,一個(gè)是點(diǎn)擊后的。



頁(yè)面一是點(diǎn)擊前的顯示效果,我們將文字、顏色、文字大小做一個(gè)調(diào)整。如下圖:


橫向、縱向百分比設(shè)置:定位文字方位

文字內(nèi)容:輸入后支持單行顯示

文字粗細(xì):默認(rèn)0,數(shù)值越大文字越粗

文字大?。耗J(rèn)18,數(shù)值越大,文字越大

文字顏色:與135編輯器一致

背景:可設(shè)置背景顏色



然后設(shè)置動(dòng)畫效果,這里我們可以選擇向上移出,1秒


動(dòng)畫觸發(fā):

點(diǎn)擊是需要讀者點(diǎn)擊后,才出現(xiàn)下一頁(yè)畫面效果。

自動(dòng)是打開文章時(shí),自動(dòng)開始進(jìn)行播放。


動(dòng)畫類型:

無(wú)動(dòng)畫:無(wú)任何效果

字幕:類似彈幕效果可以設(shè)置上下左右四個(gè)方向

快閃:快速切換閃動(dòng)

淡入:逐漸顯示

淡出:逐漸消失

移入移出:當(dāng)前畫面向上下左右四個(gè)方向移出或者移入

展開:只允許最后一屏設(shè)置展開效果,畫面向下展開


時(shí)間設(shè)置:

動(dòng)畫時(shí)長(zhǎng):動(dòng)畫能持續(xù)多久時(shí)間,時(shí)間設(shè)置得越久,動(dòng)作就越緩慢

動(dòng)畫延遲:讀者觸發(fā)了這個(gè)動(dòng)畫效果后,多久開始執(zhí)行這個(gè)效果。時(shí)間設(shè)置得越久,等待得越久。





設(shè)置好頁(yè)面一之后,我們點(diǎn)擊頁(yè)面右側(cè)的加號(hào),復(fù)制當(dāng)前頁(yè)。




在第二頁(yè),我們要把答案輸入進(jìn)去。動(dòng)畫類型選擇無(wú)動(dòng)畫即可。



設(shè)置完畢后,點(diǎn)擊右上角的【預(yù)覽】查看整體效果。預(yù)覽無(wú)誤后,點(diǎn)擊完成即可。



接下來(lái)這個(gè)步驟比較重要。我們將第一個(gè)布局復(fù)制下來(lái),然后雙擊旁邊的格子將內(nèi)容粘貼上去。一排三個(gè)都做好后,將第一排整體復(fù)制下來(lái),再在下方粘貼一排。多余的空格刪掉就可以了。



粘貼完畢后,九宮格雛形就有了。然后把里面的文字內(nèi)容在動(dòng)畫面板里一一調(diào)整好。


此外,你也可以對(duì)九宮格做更多操作,例如添加邊框。或者將文字內(nèi)容替換成圖片等。



只要你腦洞夠大,你就能夠用135編輯器排版出各種好玩的效果,今天介紹的公眾號(hào)SVG動(dòng)畫效果只是其中一種,如果你感興趣,接下來(lái)小編還會(huì)陸續(xù)為大家介紹更多135編輯器SVG排版的小技巧,歡迎大家來(lái)學(xué)習(xí)呀!


- END -


點(diǎn)擊135編輯器獲取更多資訊


文章申明:本文章轉(zhuǎn)載自互聯(lián)網(wǎng)公開渠道,如有侵權(quán)請(qǐng)聯(lián)系我們刪除
文章評(píng)價(jià)
登錄后可以評(píng)論
立即登錄
小伍資深編輯
共638篇文章
最近文章
更多
  • 雙十二電商活動(dòng)宣傳排版素材(電商商品促銷推廣模版樣式)
  • 乞巧節(jié)微信公眾號(hào)推文排版素材(愛(ài)情浪漫活動(dòng)推廣文案)
  • 二十四節(jié)氣立秋圖文排版素材(金黃色系立秋推文文案模版)
  • 八一建軍節(jié)紀(jì)念日推文排版樣式(光輝歷程文案宣傳模版)
比格設(shè)計(jì)
熱門工具
135編輯器
領(lǐng)先的在線圖文編輯平臺(tái)原創(chuàng)樣式素材,一鍵套用
筆格設(shè)計(jì)
受歡迎的在線作圖網(wǎng)站,新媒體配圖、手機(jī)海報(bào)應(yīng)有盡有
筆格PPT
輸入主題,AI一鍵生成PPT;上傳本地文件秒變PPT
管小助
企業(yè)營(yíng)銷、私域流量運(yùn)營(yíng)——站式營(yíng)銷管理平臺(tái)
推薦文章
用戶運(yùn)營(yíng)平臺(tái)產(chǎn)品設(shè)計(jì)指南
淺談?dòng)脩暨\(yùn)營(yíng)中的用戶分層
內(nèi)容運(yùn)營(yíng):戴上寫作的六頂思考帽
5000字方法論:4個(gè)細(xì)節(jié),決定私域能不能賺錢
一個(gè)案例說(shuō)明白用戶分析怎么用
22條視頻,漲粉12.6萬(wàn),一個(gè)女孩子在抖音靠洗車也能月入過(guò)萬(wàn)!
高價(jià)值社群的5大核心關(guān)鍵
抖音賬號(hào)內(nèi)容自檢清單!
決定離職后,3天拿到offer的總結(jié)與反思!
【135早資訊】:教育部將徹查教材插圖問(wèn)題;抖音6月1日起將對(duì)本地生活商家收取服務(wù)費(fèi)
熱門素材樣式
運(yùn)營(yíng)導(dǎo)航
運(yùn)營(yíng)工具
分享到