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