朋友們大家好，我是三兒。

最近有朋友刷GQ推文，看到一篇很有意思，點擊后中心人物沒有改變，但周遭場景發生改變，很適合做【反差】，請看VCR??

??點擊查看原文

或許這個效果深受大家喜愛，不到半個月GQ又以該效果出了一篇推文策劃，獲得持續好評??

??點擊查看原文

“那做這個是不是很復雜呀？”

其實并沒有，我們需要厘清邏輯，本質上是一個點擊上/下切換，有固定的內容不變也就是我們俗稱的固定層，前后內容的變化，如果覺得有些抽象，我們可以利用135插件下載文章圖片，看到圖片素材后自然一目了然。

點擊獲取135插件下載方法

*注意：圖片下載僅作為教學使用，禁止非授權商用。

當我們獲取素材后，就可以制作這個切換場景的效果了。

在135編輯器左側找到【SVG編輯器】，點擊進入

或是直接在瀏覽器輸入網址：

http://m.seey.com.cn/svgeditor/

在SVG編輯器頁面選擇【互動效果】在搜索框中搜索：點擊三層豎向位移-中間層不動頂層底層移動，或組件ID：679。

當然如果你想要制作橫向場景替換，同樣在搜索框中搜索：點擊三層橫向位移-中間層不動頂層底層移動?；蚪M件ID：678。

我們在使用組件前，一點要看一看素材要求避免反復返工。

單擊效果組件，放置在編輯器頁面。

根據我們素材判斷，我們【辦公椅】是中間固定圖。

【掙錢速度X0】是頂層圖，由于前一景是鏤空的會直接透出底層圖，所以我們還需要添加一層背景作為遮擋，如果不添加背景就會是這樣的??

所以根據素材我們可以這樣劃分

我們按照要求上傳圖片

上傳好后，我們設置出發熱區、動畫時間以及切換方向。

制作完后，如果是完整內容可以直接選擇【同步】到微信公眾號后臺，若還需要在添加其他內容可以選擇導出到135編輯器。

最后讓我們淺淺看下效果叭??

以上就是今天教學的全部內容

怎么樣是不是很簡單

眼睛看會了記得動手做做哦

本篇內容效果展示素材均來自GQ實驗室

素材僅做教學使用

侵聯刪