公眾號SVG動畫效果交互實現(xiàn)方法(SVG九宮格制作)
最近公眾號SVG動畫效果,黑科技排版真是超級熱門,連騰訊“爸爸”都忍不住推送了這種公眾號SVG交互文章,下面135編輯器就教大家公眾號SVG動畫效果交互實現(xiàn)方法,還有特好玩的SVG九宮格制作。
那這種公眾號SVG的交互文章應(yīng)該怎么排版呢?不會代碼也能做出這種文章嗎?今天小編就給大家介紹一款不需要代碼的公眾號SVG黑科技排版神器。讓你輕松搞定這種交互形式的排版!
效果示范↑
臨近中秋節(jié),我們今天就來介紹這樣一個九宮格的點擊效果怎么制作吧!首先我們打開135編輯器,登錄之后跟著我的步驟一步步來操作。
1、將菜單欄切換成【專業(yè)版】
2、在基礎(chǔ)布局,找到一行三個基礎(chǔ)布局,點擊樣式,放置在135編輯器編輯區(qū)內(nèi)。九宮格其實就是由三個一行三列的基礎(chǔ)布局組合而來的。這里我們先編輯其中一個,后面兩行直接復(fù)制粘貼出來就可以了。
雙擊第一個空白處,然后點擊一個公眾號SVG布局,放置其中。然后在菜單欄中選擇【SVG布局動畫】。
制作這個效果前,我們先對公眾號SVG動畫設(shè)置版面有個初步了解。大家可以點擊下面圖片,詳細(xì)查看。
要制作點擊答題這個效果,需要設(shè)置兩個頁面。一個是點擊前的,一個是點擊后的。
頁面一是點擊前的顯示效果,我們將文字、顏色、文字大小做一個調(diào)整。如下圖:
橫向、縱向百分比設(shè)置:定位文字方位
文字內(nèi)容:輸入后支持單行顯示
文字粗細(xì):默認(rèn)0,數(shù)值越大文字越粗
文字大?。耗J(rèn)18,數(shù)值越大,文字越大
文字顏色:與135編輯器一致
背景:可設(shè)置背景顏色
然后設(shè)置動畫效果,這里我們可以選擇向上移出,1秒
動畫觸發(fā):
點擊是需要讀者點擊后,才出現(xiàn)下一頁畫面效果。
自動是打開文章時,自動開始進(jìn)行播放。
動畫類型:
無動畫:無任何效果
字幕:類似彈幕效果可以設(shè)置上下左右四個方向
快閃:快速切換閃動
淡入:逐漸顯示
淡出:逐漸消失
移入移出:當(dāng)前畫面向上下左右四個方向移出或者移入
展開:只允許最后一屏設(shè)置展開效果,畫面向下展開
時間設(shè)置:
動畫時長:動畫能持續(xù)多久時間,時間設(shè)置得越久,動作就越緩慢
動畫延遲:讀者觸發(fā)了這個動畫效果后,多久開始執(zhí)行這個效果。時間設(shè)置得越久,等待得越久。
設(shè)置好頁面一之后,我們點擊頁面右側(cè)的加號,復(fù)制當(dāng)前頁。
在第二頁,我們要把答案輸入進(jìn)去。動畫類型選擇無動畫即可。
設(shè)置完畢后,點擊右上角的【預(yù)覽】查看整體效果。預(yù)覽無誤后,點擊完成即可。
接下來這個步驟比較重要。我們將第一個布局復(fù)制下來,然后雙擊旁邊的格子將內(nèi)容粘貼上去。一排三個都做好后,將第一排整體復(fù)制下來,再在下方粘貼一排。多余的空格刪掉就可以了。
粘貼完畢后,九宮格雛形就有了。然后把里面的文字內(nèi)容在動畫面板里一一調(diào)整好。
此外,你也可以對九宮格做更多操作,例如添加邊框。或者將文字內(nèi)容替換成圖片等。
只要你腦洞夠大,你就能夠用135編輯器排版出各種好玩的效果,今天介紹的公眾號SVG動畫效果只是其中一種,如果你感興趣,接下來小編還會陸續(xù)為大家介紹更多135編輯器SVG排版的小技巧,歡迎大家來學(xué)習(xí)呀!
立即登錄
- 雙十二電商活動宣傳排版素材(電商商品促銷推廣模版樣式)
- 乞巧節(jié)微信公眾號推文排版素材(愛情浪漫活動推廣文案)
- 二十四節(jié)氣立秋圖文排版素材(金黃色系立秋推文文案模版)
- 八一建軍節(jié)紀(jì)念日推文排版樣式(光輝歷程文案宣傳模版)