【公眾號排版必學】SVG滑動上色效果教程
掌握2025年新媒體運營新技能！本文詳細介紹了如何制作滑動上色效果，一種讓大牌青睞的SVG互動效果。從素材分析到效果制作，再到實際案例展示，135編輯器帶你一步步學習如何通過點擊換圖豎向移出+底圖固定豎向上滑組件（ID：538）實現(xiàn)動態(tài)上色效果，增強用戶互動體驗。立即閱讀，為你的內(nèi)容創(chuàng)作增添創(chuàng)意和心意！
本周二三兒在135平臺賬號上發(fā)了一篇2024新媒體人年終回顧（傳送門在這里）原以為大家會被我感人肺腑，幽默風趣的自嘲文案打動，結(jié)果不愧是咱們新媒體人，一生都在問「效果」怎么做，教程多久出。
單純從視覺效果看本文主要是一個上滑效果，在滑動過程中會出現(xiàn)「上色」特效，以此強調(diào)或標注某些重要信息。若再細分一點，是點擊「點擊換圖豎向移出+底圖固定豎向上滑」，恰好這也是我們此次使用的效果名稱，組件ID：538。
我們想要制作一個效果，先要了解效果背后的邏輯。點擊換圖移出好理解，我們需要制作一張點擊前的封面圖、點擊后的封面圖就能實現(xiàn)換圖效果，至于「移出」屬于程序端，不需要我們考慮。
點擊前封面圖
點擊后封面圖
之后就是滑動部分，從視覺直觀上看我們滑動的是內(nèi)容層也就是我們需要呈現(xiàn)的部分，上色部分的色塊是固定的也就是我們的背景部分。故上色區(qū)域是背景圖，變化的內(nèi)容是滑動圖。
固定背景圖
滑動內(nèi)容圖
背景上色演示
對于需要上色的部分，我們需要給單獨摳除，形成透明底色。當滑動到背景上色區(qū)域時，就會被預設的背景色著色以實現(xiàn)「上色」效果。
在135編輯器左側(cè)找到「SVG編輯器」入口，進入SVG編輯器，選擇「互動效果」在搜索框中搜索點擊換圖豎向移出+底圖固定雙層豎滑或組件ID：538.
老規(guī)矩我們在制作素材的時候一定要看清楚素材要求，避免到時候內(nèi)容出現(xiàn)差錯，減少不必要的返工。
本效果組件要求：所有素材寬高需要一致。
制作好素材后，我們按照對應的板塊上傳點擊前后的封面圖、固定背景圖、滑動內(nèi)容圖即可。
下面我們將為大家展示其他品牌制作上色效果的推文，給大家再打開一點新思路。
01.檸季手打檸檬茶
檸季手打檸檬茶
檸季也是一篇點擊換圖向上切換的效果，但不同的是它在里面嵌套了輪播效果用于商品展示。不過需要注意的是在單層滑動布局中，對素材尺寸要求比較嚴苛，同時在部分手機機型（系統(tǒng)版本中）在滑到各板塊連接處可能會出現(xiàn)卡頓現(xiàn)象。
組件：單層豎滑
ID：361
組件：點擊換圖豎向移出+底圖固定雙層豎滑
ID：538
組件：橫向停頓圖片輪播
ID：166
02.全國人大
全國人大
全國人大這一篇回歸滑動上色本質(zhì)，沒有額外使用點擊換圖或是嵌套其他效果組件，符合賬號屬性，簡約、大氣。本篇邏輯就是背景上色層固定，內(nèi)容層滑動。這篇難度更多在于設計上的巧思，如銜接過渡如何自然、小動效制作等。
組件：底圖固定雙層豎滑
ID：201
03.紅動粵東創(chuàng)意工作室
紅動粵東創(chuàng)意工作室
本篇和全國人大的底層邏輯相同，不過本篇底圖固定背景層是花了心思的，不像以往上色是一個純色背景，而是帶有一些顏色透明變化的背景，在滑動過程中更富有層次感。
固定背景圖
組件：底圖固定雙層豎滑
ID：201
以上就是三兒帶給大家
滑動上色創(chuàng)意排版的教程
以及同類排版創(chuàng)意思路
相信大家對這個效果
有了新的理解
快動手試試吧
創(chuàng)作一篇更富創(chuàng)意和心意的作品
立即登錄
