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

近期有朋友提問(wèn)，想要在推文中實(shí)現(xiàn)PPT動(dòng)畫圖片左右移入的效果。

這讓三兒想到了之前GQ實(shí)驗(yàn)室（現(xiàn)更名為智族Lab）曾做過(guò)的一篇文章。

點(diǎn)我查看原文

這個(gè)效果135能實(shí)現(xiàn)嗎？先說(shuō)結(jié)論，135編輯器可以完成滑動(dòng)自動(dòng)觸發(fā)圖片移入的效果，可以復(fù)刻智族Lab的效果。

注：本文素材來(lái)源均來(lái)自智族Lab，僅做教學(xué)使用。

在135編輯器頁(yè)面左側(cè)找到「SVG編輯器」，進(jìn)入SVG編輯頁(yè)面。

在SVG編輯器左側(cè)選擇「互動(dòng)效果」，在搜索框中搜索組件：觸摸圖片小元素依次橫向移入畫面或組件ID：914

點(diǎn)擊組件進(jìn)入SVG編輯區(qū)域中，我們上傳背景圖。

移入元素圖的位置，我們可以先在設(shè)計(jì)階段排布放好，然后去掉背景圖單獨(dú)下載，就像這樣??

細(xì)心的朋友應(yīng)該發(fā)現(xiàn)，移入小元素的圖片都是透明底的PNG圖，這樣移入才不會(huì)對(duì)本身的背景圖有遮擋。

上傳好背景圖后，我們可以繼續(xù)上傳元素圖。

上傳好元素圖后，我們可以針對(duì)不同的小元素設(shè)置移入方向、動(dòng)畫時(shí)長(zhǎng)等內(nèi)容。

這樣我們就完成了小元素移入背景畫面的效果了，大家可以觸摸下方的圖看一看。

如果大家對(duì)常規(guī)元素移入覺(jué)得不夠有吸引力，不妨試試觸摸圖片小元素依次縮小橫向移入畫面，組件ID：915

操作步驟點(diǎn)擊圖片小元素依次橫向移入畫面效果一致，這里就給大家看看呈現(xiàn)效果吧，觸摸下方的圖即可查看??

如果我們是在SVG編輯器里完成了一篇完整的文章，可以直接通過(guò)「同步」將內(nèi)容同步到微信公眾號(hào)后臺(tái)，當(dāng)然這個(gè)的前提是你需要向135編輯器授權(quán)你的賬號(hào)信息。

在135編輯器頁(yè)面右上角用戶名稱中，將鼠標(biāo)放置在用戶名上可彈出下拉菜單找到「授權(quán)公眾號(hào)」由賬號(hào)管理員掃碼授權(quán)。

如果你暫時(shí)無(wú)法擁有授權(quán)，也可以通過(guò)135插件的形式將內(nèi)容同步到公眾號(hào)后臺(tái)，僅僅需要在你的谷歌瀏覽器中安裝135插件。

點(diǎn)我下載插件

如果你還需要將效果放到135編輯器中，那么可以使用「導(dǎo)出」將效果復(fù)制到135編輯器中。

以上就是本期

SVG教學(xué)的全部?jī)?nèi)容

大家還有什么想要學(xué)的效果案例

可以在評(píng)論區(qū)留言

三兒會(huì)定期做教學(xué)內(nèi)容噢