公眾號一鍵換景教程 | GQ同款互動效果制作指南
掌握GQ推文中的一鍵換景互動效果，本教程將帶你輕松創建點擊切換場景的動態效果。從SVG編輯器的使用到素材上傳，每一步都詳盡解說，讓你快速上手，打造專業級的視覺反差效果。
朋友們大家好，我是三兒。
最近有朋友刷GQ推文，看到一篇很有意思，點擊后中心人物沒有改變，但周遭場景發生改變，很適合做【反差】，請看VCR??
??點擊查看原文
或許這個效果深受大家喜愛，不到半個月GQ又以該效果出了一篇推文策劃，獲得持續好評??
??點擊查看原文
“那做這個是不是很復雜呀？”
其實并沒有，我們需要厘清邏輯，本質上是一個點擊上/下切換，有固定的內容不變也就是我們俗稱的固定層，前后內容的變化，如果覺得有些抽象，我們可以利用135插件下載文章圖片，看到圖片素材后自然一目了然。
*注意：圖片下載僅作為教學使用，禁止非授權商用。
當我們獲取素材后，就可以制作這個切換場景的效果了。
在135編輯器左側找到【SVG編輯器】，點擊進入
或是直接在瀏覽器輸入網址：
http://www.vrlw.com.cn/svgeditor/
在SVG編輯器頁面選擇【互動效果】在搜索框中搜索：點擊三層豎向位移-中間層不動頂層底層移動，或組件ID：679。
當然如果你想要制作橫向場景替換，同樣在搜索框中搜索：點擊三層橫向位移-中間層不動頂層底層移動。或組件ID：678。
我們在使用組件前，一點要看一看素材要求避免反復返工。
單擊效果組件，放置在編輯器頁面。
根據我們素材判斷，我們【辦公椅】是中間固定圖。
【掙錢速度X0】是頂層圖，由于前一景是鏤空的會直接透出底層圖，所以我們還需要添加一層背景作為遮擋，如果不添加背景就會是這樣的??
所以根據素材我們可以這樣劃分
中間圖
背景圖
切換前
切換后
我們按照要求上傳圖片
上傳好后，我們設置出發熱區、動畫時間以及切換方向。
制作完后，如果是完整內容可以直接選擇【同步】到微信公眾號后臺，若還需要在添加其他內容可以選擇導出到135編輯器。
最后讓我們淺淺看下效果叭??
以上就是今天教學的全部內容
怎么樣是不是很簡單
眼睛看會了記得動手做做哦
本篇內容效果展示素材均來自GQ實驗室
素材僅做教學使用
侵聯刪
立即登錄
