公眾號SVG效果教程:實現(xiàn)智族Lab風(fēng)格圖片滑動移入效果
學(xué)習(xí)如何在新媒體內(nèi)容中添加專業(yè)級的圖片動畫效果。本文詳細(xì)介紹了使用135編輯器的SVG編輯器功能,通過互動效果組件實現(xiàn)圖片滑動自動觸發(fā)移入效果,包括觸摸圖片小元素依次橫向移入和縮小橫向移入效果。掌握這些技巧,讓你的推文更具吸引力。
朋友們大家好,我是三兒。
近期有朋友提問,想要在推文中實現(xiàn)PPT動畫圖片左右移入的效果。
這讓三兒想到了之前GQ實驗室(現(xiàn)更名為智族Lab)曾做過的一篇文章。
這個效果135能實現(xiàn)嗎?先說結(jié)論,135編輯器可以完成滑動自動觸發(fā)圖片移入的效果,可以復(fù)刻智族Lab的效果。
注:本文素材來源均來自智族Lab,僅做教學(xué)使用。
在135編輯器頁面左側(cè)找到「SVG編輯器」,進(jìn)入SVG編輯頁面。
在SVG編輯器左側(cè)選擇「互動效果」,在搜索框中搜索組件:觸摸圖片小元素依次橫向移入畫面或組件ID:914
點(diǎn)擊組件進(jìn)入SVG編輯區(qū)域中,我們上傳背景圖。
移入元素圖的位置,我們可以先在設(shè)計階段排布放好,然后去掉背景圖單獨(dú)下載,就像這樣??
細(xì)心的朋友應(yīng)該發(fā)現(xiàn),移入小元素的圖片都是透明底的PNG圖,這樣移入才不會對本身的背景圖有遮擋。
上傳好背景圖后,我們可以繼續(xù)上傳元素圖。
上傳好元素圖后,我們可以針對不同的小元素設(shè)置移入方向、動畫時長等內(nèi)容。
這樣我們就完成了小元素移入背景畫面的效果了,大家可以觸摸下方的圖看一看。
如果大家對常規(guī)元素移入覺得不夠有吸引力,不妨試試觸摸圖片小元素依次縮小橫向移入畫面,組件ID:915
操作步驟點(diǎn)擊圖片小元素依次橫向移入畫面效果一致,這里就給大家看看呈現(xiàn)效果吧,觸摸下方的圖即可查看??
如果我們是在SVG編輯器里完成了一篇完整的文章,可以直接通過「同步」將內(nèi)容同步到微信公眾號后臺,當(dāng)然這個的前提是你需要向135編輯器授權(quán)你的賬號信息。
在135編輯器頁面右上角用戶名稱中,將鼠標(biāo)放置在用戶名上可彈出下拉菜單找到「授權(quán)公眾號」由賬號管理員掃碼授權(quán)。
如果你暫時無法擁有授權(quán),也可以通過135插件的形式將內(nèi)容同步到公眾號后臺,僅僅需要在你的谷歌瀏覽器中安裝135插件。
如果你還需要將效果放到135編輯器中,那么可以使用「導(dǎo)出」將效果復(fù)制到135編輯器中。
以上就是本期
SVG教學(xué)的全部內(nèi)容
大家還有什么想要學(xué)的效果案例
可以在評論區(qū)留言
三兒會定期做教學(xué)內(nèi)容噢
立即登錄