計育韜：（答疑）為何明明代碼正確，SVG動畫卻有白線/縫隙？
SVG 動畫作為如今公眾號生態端最炙手可熱的動畫形式，自 2016 年我和微信團隊共同實驗并頒布技術規則以來，已經累積在業內生成了數百億 PV 的圖形頁面。盡管如此，在行業代碼儲備業已完備的情況下，「玄學現象」仍然屢見不鮮，亟需更多專業研究人士思索。
而有一個運營人比較典型容易遇到的問題是：為何我的代碼或編輯器操作明明正確，可 SVG 動畫仍然能看到固定的縫隙或時隱時現的縫隙？
新手應多檢查圖片自身問題
接觸 SVG 時間較短的運營人和設計師，本身行業技能一般也相對較弱，出圖切片容易在邊界有透明像素或漏出白色、黑色邊界線等，這類過于基礎的制圖質量問題應當作為優先排查對象。
切換到深色模式檢查
是線？還是縫？這是兩個概念，新手運營人往往沒有進行相關性質判斷的習慣。請將手機調整到深色模式，觀察原「白線」/「縫隙」是否變色——不變色則說明白線來自圖像自身，變色則說明這里存在結構縫隙或圖像透明縫隙。
時隱時現的縫隙從何而來
如自動輪播，尤其帶有一定緩動（easing）效果的 SVG 動畫，如果你反復確認了圖像和代碼沒有問題，卻在圖像邊界觀察到若隱若現的縫隙，其原因是：
設備硬件能力不足，如刷新率低等，導致 SVG 圖形渲染時出現定位精確性偏差，而產生了肉眼可見的縫隙。
過分高頻的對草稿圖文的反復預覽行為，導致本機微信中對應緩存過多，以及預覽草稿被逐步限流訪問，實際使得 SVG 動畫播放卡頓，進而產生了肉眼可見的縫隙。
而第二條往往是更普遍的原因。具體深究，是因為 SVG 本意為 Scalable Vector Graphics（可縮放矢量圖），而當下主流的公眾號圖文內 SVG 主要通過將位圖以 background-image 參數綁定在特定 viewbox 的 SVG 內。SVG 的運行在數學上是沒有所謂「卡頓」的，因為 SVG 動畫不存在「幀」的概念，都是由「補間動畫」實現——即 SVG 的 XML 代碼告知計算機動畫運行的幾個關鍵時間點，如起點、終點以及中間部分關鍵轉折點等，由計算機自動補齊它的運行軌跡。
這種動畫的優勢在于體積小巧，當硬件條件充分情況下自然絲般順滑。但同樣的，當設備本身出現卡頓，尤其出現未達到明確跳幀，但存在卡頓的情況時，就容易發生時隱時現縫隙的問題了。
而這種情況下，主要優化方法是：
1）縮小對應 SVG 動畫涉及位圖素材的尺寸，由此緩釋硬件渲染相關動畫的壓力。具體優化圖片方式可以點擊閱讀《JZCreative：計育韜：公眾號圖像素材高清晰度應用指南》。
2）通過「背景圖片」或者說「零高圖片」在該自動畫面底部墊一張背景色，避免畫面存在「空」像素的渲染切換流程。由此這個縫隙的出現本身也會降低頻次，提升 SVG 動畫順暢感。
同時也不必過于糾結這一現象，因為對一個新用戶來說，圖文都是首次打開，不存在運營人情形下的多次反復預覽導致緩存溢出的問題。
固定存在的縫隙從何而來
排除設計基本功問題帶來的設計圖中透明縫隙的問題，固定縫隙一般源自：
應當采用相同尺寸應用的素材，沒有統一尺寸，導致運行過程中前后的不一致性。
margin-top 值設置錯誤形成錯位或留空，這在很多編輯器中則反映為自定義參數的設置錯誤。
余量錯誤，如圖文中期的某個伸長，最終展開量設置過多，也會導致伸長后的尾部存在縫隙。
參數質因數分解性差，也就是采用了一些難以被質因數分解的比較莫名其妙的寬度設計，具體請點擊閱讀《JZCreative：計育韜：新媒體圖像設計參數質因數分解與屏幕物理像素的適配意義》。
設備適配性問題，有時候微信 APP 本身沒有適配好手機系統也會出現一些固定縫隙，比如微信 APP 自身一直對 Pro Max 類最大尺寸 IPhone 極其較新操作系統適配能力弱，類似 flex 布局等容易出現縫隙。
解決方法上，一方面是修正本身存在的設計、排版錯誤，另一方面也還是建議利用好「背景圖片」或者說「零高圖片」思路，墊掉存在的對應縫隙。
固定存在的線從何而來
排除前面提到的本質為縫隙的情況，一般所謂的線是無法用 SVG 代碼天然生成的，往往是圖片設計自身存在的特定問題，但也可能有如下情況：
兩個有半透明的畫面疊加，交接處產生線的感官。尤其是無縫結構需要 -1px 錯位以滿足部分特殊安卓無縫的要求，因而如采用半透明內容銜接很容易出現相關問題，請更換設計方法。
漏出的結構或優先級過高的結構。有的線觀察后會明顯發現是某個圖像的局部，這通常會因為前景之間存在空隙而漏出，或者該圖像優先級過高，超越了下方接續結構并優先顯示。所以遇到這樣的問題時，請修正前景的設計畫面，或對該結構采用自然優先級部署。
總之，固定的線往往基礎視覺設計本身而出現，無需過多浪費時間在代碼結構上。
-END-
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）