SVG 動畫作為如今公眾號生態(tài)端最炙手可熱的動畫形式，自 2016 年我和微信團(tuán)隊共同實驗并頒布技術(shù)規(guī)則以來，已經(jīng)累積在業(yè)內(nèi)生成了數(shù)百億 PV 的圖形頁面。盡管如此，在行業(yè)代碼儲備業(yè)已完備的情況下，「玄學(xué)現(xiàn)象」仍然屢見不鮮，亟需更多專業(yè)研究人士思索。

而有一個運營人比較典型容易遇到的問題是：為何我的代碼或編輯器操作明明正確，可 SVG 動畫仍然能看到固定的縫隙或時隱時現(xiàn)的縫隙？

新手應(yīng)多檢查圖片自身問題

接觸 SVG 時間較短的運營人和設(shè)計師，本身行業(yè)技能一般也相對較弱，出圖切片容易在邊界有透明像素或漏出白色、黑色邊界線等，這類過于基礎(chǔ)的制圖質(zhì)量問題應(yīng)當(dāng)作為優(yōu)先排查對象。

切換到深色模式檢查

是線？還是縫？這是兩個概念，新手運營人往往沒有進(jìn)行相關(guān)性質(zhì)判斷的習(xí)慣。請將手機(jī)調(diào)整到深色模式，觀察原「白線」/「縫隙」是否變色——不變色則說明白線來自圖像自身，變色則說明這里存在結(jié)構(gòu)縫隙或圖像透明縫隙。

時隱時現(xiàn)的縫隙從何而來

如自動輪播，尤其帶有一定緩動（easing）效果的 SVG 動畫，如果你反復(fù)確認(rèn)了圖像和代碼沒有問題，卻在圖像邊界觀察到若隱若現(xiàn)的縫隙，其原因是：

• 設(shè)備硬件能力不足，如刷新率低等，導(dǎo)致 SVG 圖形渲染時出現(xiàn)定位精確性偏差，而產(chǎn)生了肉眼可見的縫隙。

• 過分高頻的對草稿圖文的反復(fù)預(yù)覽行為，導(dǎo)致本機(jī)微信中對應(yīng)緩存過多，以及預(yù)覽草稿被逐步限流訪問，實際使得 SVG 動畫播放卡頓，進(jìn)而產(chǎn)生了肉眼可見的縫隙。

而第二條往往是更普遍的原因。具體深究，是因為 SVG 本意為 Scalable Vector Graphics（可縮放矢量圖），而當(dāng)下主流的公眾號圖文內(nèi) SVG 主要通過將位圖以 background-image 參數(shù)綁定在特定 viewbox 的 SVG 內(nèi)。SVG 的運行在數(shù)學(xué)上是沒有所謂「卡頓」的，因為 SVG 動畫不存在「幀」的概念，都是由「補(bǔ)間動畫」實現(xiàn)——即 SVG 的 XML 代碼告知計算機(jī)動畫運行的幾個關(guān)鍵時間點，如起點、終點以及中間部分關(guān)鍵轉(zhuǎn)折點等，由計算機(jī)自動補(bǔ)齊它的運行軌跡。

這種動畫的優(yōu)勢在于體積小巧，當(dāng)硬件條件充分情況下自然絲般順滑。但同樣的，當(dāng)設(shè)備本身出現(xiàn)卡頓，尤其出現(xiàn)未達(dá)到明確跳幀，但存在卡頓的情況時，就容易發(fā)生時隱時現(xiàn)縫隙的問題了。

而這種情況下，主要優(yōu)化方法是：

1）縮小對應(yīng) SVG 動畫涉及位圖素材的尺寸，由此緩釋硬件渲染相關(guān)動畫的壓力。具體優(yōu)化圖片方式可以點擊閱讀《JZCreative：計育韜：公眾號圖像素材高清晰度應(yīng)用指南》。

2）通過「背景圖片」或者說「零高圖片」在該自動畫面底部墊一張背景色，避免畫面存在「空」像素的渲染切換流程。由此這個縫隙的出現(xiàn)本身也會降低頻次，提升 SVG 動畫順暢感。

同時也不必過于糾結(jié)這一現(xiàn)象，因為對一個新用戶來說，圖文都是首次打開，不存在運營人情形下的多次反復(fù)預(yù)覽導(dǎo)致緩存溢出的問題。

固定存在的縫隙從何而來

排除設(shè)計基本功問題帶來的設(shè)計圖中透明縫隙的問題，固定縫隙一般源自：

• 應(yīng)當(dāng)采用相同尺寸應(yīng)用的素材，沒有統(tǒng)一尺寸，導(dǎo)致運行過程中前后的不一致性。

• margin-top 值設(shè)置錯誤形成錯位或留空，這在很多編輯器中則反映為自定義參數(shù)的設(shè)置錯誤。

• 余量錯誤，如圖文中期的某個伸長，最終展開量設(shè)置過多，也會導(dǎo)致伸長后的尾部存在縫隙。

• 參數(shù)質(zhì)因數(shù)分解性差，也就是采用了一些難以被質(zhì)因數(shù)分解的比較莫名其妙的寬度設(shè)計，具體請點擊閱讀《JZCreative：計育韜：新媒體圖像設(shè)計參數(shù)質(zhì)因數(shù)分解與屏幕物理像素的適配意義》。

• 設(shè)備適配性問題，有時候微信 APP 本身沒有適配好手機(jī)系統(tǒng)也會出現(xiàn)一些固定縫隙，比如微信 APP 自身一直對 Pro Max 類最大尺寸 IPhone 極其較新操作系統(tǒng)適配能力弱，類似 flex 布局等容易出現(xiàn)縫隙。

解決方法上，一方面是修正本身存在的設(shè)計、排版錯誤，另一方面也還是建議利用好「背景圖片」或者說「零高圖片」思路，墊掉存在的對應(yīng)縫隙。

固定存在的線從何而來

排除前面提到的本質(zhì)為縫隙的情況，一般所謂的線是無法用 SVG 代碼天然生成的，往往是圖片設(shè)計自身存在的特定問題，但也可能有如下情況：

• 兩個有半透明的畫面疊加，交接處產(chǎn)生線的感官。尤其是無縫結(jié)構(gòu)需要 -1px 錯位以滿足部分特殊安卓無縫的要求，因而如采用半透明內(nèi)容銜接很容易出現(xiàn)相關(guān)問題，請更換設(shè)計方法。

• 漏出的結(jié)構(gòu)或優(yōu)先級過高的結(jié)構(gòu)。有的線觀察后會明顯發(fā)現(xiàn)是某個圖像的局部，這通常會因為前景之間存在空隙而漏出，或者該圖像優(yōu)先級過高，超越了下方接續(xù)結(jié)構(gòu)并優(yōu)先顯示。所以遇到這樣的問題時，請修正前景的設(shè)計畫面，或?qū)υ摻Y(jié)構(gòu)采用自然優(yōu)先級部署。

總之，固定的線往往基礎(chǔ)視覺設(shè)計本身而出現(xiàn)，無需過多浪費時間在代碼結(jié)構(gòu)上。

計育韜

微信官方 SVG AttributeName 白名單開發(fā)者
上海市信息化青年人才協(xié)會會員
上海市知識分子聯(lián)誼會會員
復(fù)旦大學(xué)奇點新媒體研究中心導(dǎo)師

著有：
設(shè)計學(xué)圖書《Prezi 完全解讀：從入門到精通》
傳播學(xué)圖書《硬核運營：技術(shù)流新媒體養(yǎng)成》