公眾號(hào)SVG互動(dòng)創(chuàng)意排版效果教學(xué)
前段時(shí)間人民網(wǎng)公眾號(hào)推了一個(gè)特別有意思公眾號(hào)SVG互動(dòng)創(chuàng)意的文章，文章一開(kāi)始展現(xiàn)的是一副卷軸，用文字引導(dǎo)讀者，點(diǎn)擊一下，卷軸再徐徐打開(kāi)。極具美感和創(chuàng)意，一時(shí)間刷遍了大家的朋友圈。大家一邊感嘆內(nèi)容精美，一邊也為這種創(chuàng)意文章的形式感到驚喜。
SVG編輯器入口：http://www.lyzs.cc/svgeditor/
那么這種公眾號(hào)互動(dòng)創(chuàng)意排版是如何制作的呢？其實(shí)這是利用SVG代碼制作而成的，在微信公眾號(hào)后臺(tái)是無(wú)法直接實(shí)現(xiàn)這樣的效果，必須要專業(yè)的編程人員來(lái)敲代碼。不過(guò)，最近小編發(fā)現(xiàn)了一個(gè)工具，不用學(xué)習(xí)代碼，也能夠讓你輕松實(shí)現(xiàn)這樣的效果，下面一起跟著小編來(lái)學(xué)習(xí)SVG互動(dòng)排版效果教學(xué)吧。
效果示范↑
點(diǎn)擊后，展開(kāi)畫面
在畫面上，點(diǎn)擊箭頭后，文章會(huì)自動(dòng)打開(kāi)。這種效果我們可以利用135編輯器輕松實(shí)現(xiàn)，接下來(lái)就是詳細(xì)的操作步驟，大家一定要仔細(xì)看好了！
1、首先登錄135編輯器，將菜單欄切換成【專業(yè)版】
2、在基礎(chǔ)布局，找到SVG布局，點(diǎn)擊樣式，放置在135編輯器編輯區(qū)內(nèi)。
3、在編輯區(qū)內(nèi)點(diǎn)擊樣式，在彈出的菜單欄中點(diǎn)擊【SVG布局動(dòng)畫】
注意：在制作這個(gè)效果前，你先準(zhǔn)備好點(diǎn)擊后展開(kāi)的文章內(nèi)容。并保存在【我的文章】里。
制作這個(gè)效果前，我們先對(duì)SVG動(dòng)畫設(shè)置版面有個(gè)初步了解。大家可以點(diǎn)擊下面圖片，詳細(xì)查看。
要制作這個(gè)效果，第一頁(yè)我們把類型設(shè)置為圖片，上傳點(diǎn)擊前的圖片。
由于這張圖比例和SVG默認(rèn)的比例是不同的，導(dǎo)致兩邊有多余的白色，我們可以條則會(huì)那個(gè)一下寬高比，使之看起來(lái)差不多即可。圖片區(qū)域，選擇覆蓋。
圖片區(qū)域：
包含是指圖片如果無(wú)法剛好鋪滿畫布，則留出一定空白。
覆蓋是指圖片如果無(wú)法剛好鋪滿畫布，則會(huì)自動(dòng)裁去超出的部分。
然后設(shè)置動(dòng)畫效果為展開(kāi)。
點(diǎn)擊預(yù)覽/編輯圖文-編輯圖文
在這里會(huì)調(diào)用出一個(gè)系統(tǒng)編輯器，我們要將事先準(zhǔn)備好的文章打開(kāi)。
完成編輯后，你可以調(diào)整動(dòng)畫時(shí)長(zhǎng)，也就是展開(kāi)這篇文章所需要的時(shí)間。數(shù)值越大，動(dòng)作越慢。
設(shè)置完畢后，點(diǎn)擊右上角的【預(yù)覽】查看整體效果。預(yù)覽無(wú)誤后，點(diǎn)擊完成即可。如果需要發(fā)送到手機(jī)上預(yù)覽，可以用編輯器的【手機(jī)預(yù)覽】功能。
- END -
立即登錄
- 雙十二電商活動(dòng)宣傳排版素材（電商商品促銷推廣模版樣式）
- 乞巧節(jié)微信公眾號(hào)推文排版素材（愛(ài)情浪漫活動(dòng)推廣文案）
- 二十四節(jié)氣立秋圖文排版素材（金黃色系立秋推文文案模版）
- 八一建軍節(jié)紀(jì)念日推文排版樣式（光輝歷程文案宣傳模版）
