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

之前三兒發(fā)了一篇??[小心新媒體人，他們都很“裝”]

不少朋友紛紛留言詢問(wèn)，前面模擬微信聊天打字的效果是怎么實(shí)現(xiàn)的。

*此案例僅有點(diǎn)擊換圖效果展示，無(wú)展開效果

其實(shí)這個(gè)效果并不難，我們拆開看他就是一個(gè)單純的多次點(diǎn)擊換圖（自定義觸發(fā)）+一個(gè)展開的組合效果。

我們?cè)赟VG編輯器中，搜索關(guān)鍵詞[多次點(diǎn)擊換圖]，你會(huì)發(fā)現(xiàn)有很多相關(guān)效果。

原文我們是用的一個(gè)多次點(diǎn)擊換圖展開（自定義觸發(fā)），那么開啟我們今日的學(xué)習(xí)之路。

在135編輯器左側(cè)，找到SVG編輯器的入口。

選中[互動(dòng)效果]在搜索框中搜索多次點(diǎn)擊換圖展開（自定義觸發(fā)）或組件ID：112

選中組件到編輯器，我們上傳前面需要點(diǎn)擊換圖的部分也就是我們偽微信聊天圖

??左滑查看聊天素材圖

上傳完所有圖片后，我們?cè)?strong>手動(dòng)調(diào)整觸發(fā)區(qū)

設(shè)置自動(dòng)觸發(fā)區(qū)的好處就在于只有點(diǎn)擊預(yù)設(shè)置的區(qū)域，才會(huì)實(shí)現(xiàn)換圖，實(shí)現(xiàn)“打字”的效果。

在我們完成所有圖片的觸發(fā)熱區(qū)設(shè)置后，就可以開始制作展開后的內(nèi)容板塊。

Waring：展開后并不是什么效果都能添加，譬如再添加一次展開。目前所有能添加的效果都已進(jìn)行展示，大家可以按照分類進(jìn)行查找，能找到就能添加。

我們展開的內(nèi)容是一個(gè)點(diǎn)擊換圖，直接在搜索框輸入點(diǎn)擊換圖或組件ID：6

我們上傳點(diǎn)擊前后的變化圖，設(shè)置觸發(fā)熱區(qū)即可。

做完最后別忘了點(diǎn)擊[完成]

你可以選擇[導(dǎo)出]，將內(nèi)容復(fù)制到135編輯器或微信公眾號(hào)

也可以選擇同步，直接同步到微信公眾號(hào)后臺(tái)，如果沒(méi)有授權(quán)公眾號(hào)也可以安裝插件直接同步。

打個(gè)總結(jié)：關(guān)于多次點(diǎn)擊換圖，你不僅可以模仿微信聊天，也可以實(shí)現(xiàn)輸入密碼等效果，可玩性還是很高的，大家快動(dòng)手試試吧。

對(duì)了還有一件大事忘了告訴你

最近135編輯器有雙旦活動(dòng)

超多福利好禮

等你來(lái)拿

快來(lái)掃碼看看吧

??

（廣告）