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

上周三兒在135平臺上發布了一條，點擊漸進換色的內容，引來「哇」聲一片?點擊查看

點擊預設的觸發小圖標，小圖標緩緩下落隨著圖片的下落本是黑白的圖片像是被重新粉刷了一樣，變得五彩斑斕還搭配上了文案。

怎么樣效果還不錯吧，這個效果不少大牌也愛使用，特侖蘇在今年的立秋推文中也使用了此效果?案例查看

那么問題來了，這個效果制作起來麻煩嗎？別擔心，接下來就是三兒的教學時間。

本次效果相較于之前教學的效果有一點不同，這次新增了一個小元素，我們在制作效果時，一定要先看素材要求，避免因素材問題導致無法實現效果。

在變化前的圖，我們有元素是黑白的，這個我們可以在筆格設計里處理，選中「元素」-「濾鏡」-「黑白」

我們需要制作初始背景、變換后的背景↓

在我們處理好素材后，就可以進行效果制作了。

在編輯器找到「SVG互動效果」，點擊進入SVG編輯器頁面，選擇「互動效果」在搜索框中搜索「點擊元素下移同時展開全文漸進式換內容-自定義觸發」或是組件ID：861

我們先添加點擊小元素，注意小元素的圖需要使用透明底的png圖。

透明底的小元素

然后我們按順序上傳初始圖及背景圖，注意：初始圖和變化后的第一張圖需要是同一張圖。

添加好圖后，我們可以設置展開動畫 時長以及小元素移入時長。   

我們制作完效果后，如果你微信公眾號綁定了135編輯器，我們可以直接使用同步功能，將制作好的內容同步到微信公眾號后臺中。

如果公眾號沒有綁定但下載了135插件，也可以通過插件同步到后臺中去。

若是想要復制到135編輯器中，也可以選擇「導出」復制到135編輯器中。

這樣我們就完成了這篇效果的制作。

以上就是本期svg教學的全部內容了

怎么樣是不是很簡單

只要我們遵守素材要求

發揮自己的想象力

就能完成一篇出色的作品

眼睛看會了

不如動立馬動手試試吧