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

上周三兒在135平臺上發(fā)布了一條，點擊漸進(jìn)換色的內(nèi)容，引來「哇」聲一片?點擊查看

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

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

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

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

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

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

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

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

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

透明底的小元素

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

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

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

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

若是想要復(fù)制到135編輯器中，也可以選擇「導(dǎo)出」復(fù)制到135編輯器中。

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

以上就是本期svg教學(xué)的全部內(nèi)容了

怎么樣是不是很簡單

只要我們遵守素材要求

發(fā)揮自己的想象力

就能完成一篇出色的作品

眼睛看會了

不如動立馬動手試試吧