SVG創(chuàng)意推文—『點擊開窗』教程
最近這段時間，各大官媒齊齊出手，朝著SVG創(chuàng)意推文進軍。
嘿，胖友們大家好呀，我是三兒。
好久不見，胖友們有沒有想我呀！最近這段時間，各大官媒齊齊出手，朝著SVG創(chuàng)意推文進軍。之前人民日報推了一篇《點亮武漢》在當時引起了不小的轟動，三兒也連忙出了一篇教程。
前兩天，新華社又推了一篇『點擊開窗』的推文，用戶可以點擊打開窗戶，看到各地的美景。
為了讓胖友們更直觀的感受推文的效果，三兒將這些圖做成了動圖，胖友們可以通過滑動來查看哦！
<左右滑動查看更多>
怎么樣，是不是超級好玩，那么今天，三兒就來教你們?nèi)绾沃谱鬟@種點擊滑動的效果吧！
話不多說，教程來咯~
點擊開門樣式
ID:98647
【樣式作用】：點擊窗戶，樣式兩側(cè)內(nèi)容會自動滑開，顯示出底部的內(nèi)容，可以搭配無縫樣式制作出更多有趣味性的推文。
【使用說明】：新版的SVG樣式均可以在『動畫』按鈕中完成所有的設置。
【這些樣式也可以用這個教程哦】樣式ID：98646
??點擊有驚喜哦??
圖片切換樣式ID:98647
由于編輯器升級了專業(yè)版，簡化了部分svg樣式的操作流程，使得修改svg樣式大部分參數(shù)無需再通過html代碼實現(xiàn)。本點擊樣式所有參數(shù)都可通過動畫設置調(diào)整。
將編輯器切換到專業(yè)版模式，點擊樣式區(qū)域彈出對話框，在【全局樣式】中點擊動畫按鈕，開始修改SVG樣式參數(shù)。
這里需要注意的是：不是所有樣式都有動畫選項哦，只有SVG樣式會有動畫顯示！
2.切換完成后，我們就可以對樣式進行修改了，在左側(cè)搜索樣式ID『98647』，將樣式插入至編輯器中。
這里需要注意的是：編輯時請不要點擊圖片區(qū)域，以防觸發(fā)動畫保存失效。
3.接下來我們要準備三張圖片，兩張開門的圖片以及需要展示的背景圖，這里需要注意的是，滑動的兩張圖合在一起時需要和底部的圖片寬高一致。
▲滑動圖片和底圖展示
如果胖友們想直接使用我們樣式里的滑動圖片，那么需要注意的是，將底部圖片修改為樣式素材中底圖的尺寸即可。
胖友們可以在這里查看底圖的尺寸哦!
4.點擊選中樣式（在樣式周圍出現(xiàn)紅框時，才算選中哦！），在彈出的菜單欄中，選擇『動畫』按鈕，進入動畫設置界面。
這里需要注意的是：只有SVG樣式才會有動畫按鈕哦，普通的樣式是沒有動畫按鈕的！
5.在動畫設置界面，我們就可以對樣式的內(nèi)容進行設置了，胖友們可以對頂部的文字，背景圖片，以及左右兩側(cè)滑動圖片進行更換。
在更換左右兩側(cè)圖片時，我們需要注意的是，在上傳圖片界面需要選擇『自由』進行上傳，才會讓圖片更好的適配哦！
6.設置完所有內(nèi)容以后，胖友們可以在右側(cè)的預覽框中進行測試，也可以返回編輯器界面，點擊右側(cè)菜單欄中的『手機預覽』進行測試。
注意事項：
這里需要注意的是，由于微信后臺限制，所以排版完成后的推文需要使用保存同步功能，如果使用復制粘貼會導致樣式失效哦！
現(xiàn)在SVG推文這么火，還不趕緊學會了給用戶們露一手？
想學習更多的SVG樣式嗎？想制作出更好玩的互動排版嗎？
那還等啥，趕快去評論區(qū)留言，說出你最喜歡用的SVG樣式，我們將在評論區(qū)抽出10位胖友，送出巖植主編的《SVG變形記》課程哦！
好啦，今天的教程就到這里啦
胖友們學會了嗎？
如果你還有關(guān)于其它樣式的疑問
都可以留言告訴三兒哦
點擊http://qwer.com.cn/users/invite/ddb12a17ce400c35fe041d275a578351，注冊135編輯器，即可獲得7天VIP會員
立即登錄
