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