各位?E2.COOL?的會(huì)員，編輯器內(nèi) 1000+ 的 SVG 組件你們都用過嗎？自 2016 年?SVG 動(dòng)畫白名單發(fā)布以來，公眾號(hào)一直為其應(yīng)用的主陣地。但于今年，微博的頭條文章內(nèi)亦開通了 SVG 技術(shù)權(quán)限，由于技術(shù)限制的不同，應(yīng)用層面的展示也與公眾號(hào)推文不盡相同，在 E2 官方進(jìn)行安全測(cè)試后，我們推薦以下幾款組件作為初步上手的應(yīng)用，不妨一起來看看吧！

上色伸長(zhǎng)

伴隨著物體的下落，畫布逐漸擦出伸長(zhǎng)，實(shí)現(xiàn)了畫板上色的效果。讓原本單調(diào)的圖文重新煥發(fā)生機(jī)，視覺效果極佳，趣味性十足。這是一款套件式組合應(yīng)用效果，用戶可自主在編輯器內(nèi)進(jìn)行搭建。

上方 SVG 動(dòng)畫的具體搭建方法如下：

其布局重點(diǎn)在于：

1）采用「二分欄（自定義比例）」組件，分別在兩個(gè)嵌套區(qū)內(nèi)放置去色效果和上色伸長(zhǎng)效果。此處請(qǐng)注意自定義參數(shù)的填寫，如上圖所示。

2）在「點(diǎn)擊伸長(zhǎng)」組件后添加「無縫圖」上傳固定掉落的元素素材，并通過自定義參數(shù)調(diào)節(jié)其上移距離，建議設(shè)定位置時(shí)避免元素與觸發(fā)區(qū)重合。

橫向視差滑動(dòng)

這是一款品牌方常用且極具優(yōu)雅體驗(yàn)的立體排版效果，橫向滑動(dòng)時(shí)不同元素差速入場(chǎng)，營(yíng)造出強(qiáng)烈的景深效果，無論是作為新品發(fā)布或是長(zhǎng)漫的體現(xiàn)，都是高級(jí)交互模型的第一選擇，故十分推薦作為頭條文章中的應(yīng)用。

在?E2.COOL?的組件搜索功能內(nèi)查找「橫向視差滑動(dòng)」即可體驗(yàn)！該組件的具體教學(xué)可以點(diǎn)擊閱讀《黑科技編輯器｜橫向視差滑動(dòng)教程》。

E2 爆炸圖

長(zhǎng)按后畫面元素在 Y 軸方向上移動(dòng)分散，松手后恢復(fù)初始狀態(tài)。該組件效果僅在微博頭條文章中可見，不支持在微信公眾號(hào)平臺(tái)預(yù)覽哦！

在?E2.COOL?的組件搜索功能內(nèi)查找「E2 爆炸圖」即可體驗(yàn)！該組件的發(fā)布效果具體可移步《微博 SVG 實(shí)例-爆炸圖（E2 編輯器測(cè)試）》查看。

錯(cuò)層滑動(dòng)

不得不說，此款組件模型十分經(jīng)典且又經(jīng)久不衰，用戶總能將其玩出新的花樣。利用前景的合理遮擋實(shí)現(xiàn)元素的穿插掉落，簡(jiǎn)單的搭建方式卻能夠?qū)崿F(xiàn)令人眼前一亮的效果。

滑屏（拖拽）入場(chǎng)

如何實(shí)現(xiàn)在下滑觸屏的過程中，元素自動(dòng)入場(chǎng)？這里推薦滑屏類的組件應(yīng)用，由觸屏觸發(fā)動(dòng)畫效果，在下滑的過程中不斷引導(dǎo)用戶閱讀，達(dá)到一種耳目一新的視覺體驗(yàn)。

在?E2.COOL?的組件搜索功能內(nèi)查找「滑屏（拖拽）入場(chǎng)」即可體驗(yàn)！

無限往返伸縮器

除了單次執(zhí)行的動(dòng)畫效果外，亦可實(shí)現(xiàn)無限次的動(dòng)畫觸發(fā)。該組件在品牌宣傳中的應(yīng)用場(chǎng)景廣泛，無限次的伸長(zhǎng)和收縮實(shí)現(xiàn)了信息的分層釋放和折疊，有效減少了讀者的閱讀壓力。

在?E2.COOL?的組件搜索功能內(nèi)查找「無限往返伸縮器」即可體驗(yàn)！

所有自動(dòng)運(yùn)行的動(dòng)畫組件

在包括「多圖展示」、「自動(dòng)動(dòng)畫」等專區(qū)中，無需任何觸控，自動(dòng)進(jìn)行播放的動(dòng)畫均可以在微博 SVG 中應(yīng)用，推薦點(diǎn)擊閱讀《以SVG展示商品？26款輪播/滑動(dòng)模板任你選擇。》進(jìn)行具體的實(shí)踐，如操作過程中有任何組件失效或故障問題，歡迎咨詢平臺(tái)客服，微博 SVG 的實(shí)際運(yùn)行效果應(yīng)以微博官方的頭條文章呈現(xiàn)效果為準(zhǔn)。