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

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

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

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

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

本次效果相較于之前教學(xué)的效果有一點(diǎn)不同，這次新增了一個(gè)小元素，我們?cè)谥谱餍Ч麜r(shí)，一定要先看素材要求，避免因素材問(wèn)題導(dǎo)致無(wú)法實(shí)現(xiàn)效果。

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

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

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

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

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

透明底的小元素

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

添加好圖后，我們可以設(shè)置展開(kāi)動(dòng)畫(huà) 時(shí)長(zhǎng)以及小元素移入時(shí)長(zhǎng)。   

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

如果公眾號(hào)沒(méi)有綁定但下載了135插件，也可以通過(guò)插件同步到后臺(tái)中去。

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

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

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

怎么樣是不是很簡(jiǎn)單

只要我們遵守素材要求

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

就能完成一篇出色的作品

眼睛看會(huì)了

不如動(dòng)立馬動(dòng)手試試吧