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

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

??點(diǎn)擊查看原文

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

??點(diǎn)擊查看原文

“那做這個(gè)是不是很復(fù)雜呀？”

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

點(diǎn)擊獲取135插件下載方法

*注意：圖片下載僅作為教學(xué)使用，禁止非授權(quán)商用。

當(dāng)我們獲取素材后，就可以制作這個(gè)切換場景的效果了。

在135編輯器左側(cè)找到【SVG編輯器】，點(diǎn)擊進(jìn)入

或是直接在瀏覽器輸入網(wǎng)址：

http://qwer.com.cn/svgeditor/

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

當(dāng)然如果你想要制作橫向場景替換，同樣在搜索框中搜索：點(diǎn)擊三層橫向位移-中間層不動(dòng)頂層底層移動(dòng)。或組件ID：678。

我們在使用組件前，一點(diǎn)要看一看素材要求避免反復(fù)返工。

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

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

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

所以根據(jù)素材我們可以這樣劃分

我們按照要求上傳圖片

上傳好后，我們設(shè)置出發(fā)熱區(qū)、動(dòng)畫時(shí)間以及切換方向。

制作完后，如果是完整內(nèi)容可以直接選擇【同步】到微信公眾號(hào)后臺(tái)，若還需要在添加其他內(nèi)容可以選擇導(dǎo)出到135編輯器。

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

以上就是今天教學(xué)的全部內(nèi)容

怎么樣是不是很簡單

眼睛看會(huì)了記得動(dòng)手做做哦

本篇內(nèi)容效果展示素材均來自GQ實(shí)驗(yàn)室

素材僅做教學(xué)使用

侵聯(lián)刪