如何像蘋果公眾號的動圖一樣清晰？5種方法教你搞定！
公眾號做久了，誰還沒有在圖文中插入過動圖？
盡管公眾號可以上傳的圖片大小限制不斷放開，由 2M 到 5M 再到現在的 10M，但我們上傳的動圖還是糊的一塌糊涂。
同樣是動效，為什么蘋果以及其他大品牌的總是那么清晰？一句話解釋的話，那是因為它們的很多動效不僅僅是一張動圖那么簡單。
看來一句話是解釋不清楚了，想要各種動效保持高清，我們得分情況來看。
一多層圖片（按圖層拆分）
來自「Apple」公眾號：
點此查看原文
雖然公眾號上傳圖片的限制放大到了 10M，但為了用戶的閱讀體驗，老沙還是建議盡量把圖片大小控制在 6M 以內，不然用戶在網速較慢的情況下打開圖文半天看不到內容，很可能轉身就走。
很多小伙伴也明白這個道理，會通過縮小尺寸、抽幀等方法壓縮圖片，但清晰度總是不盡人意。
其實一張動圖太大并且在壓縮后之所以不能保持清晰，很重要的一個原因是圖片中的顏色太豐富。
如果一張動圖中只有一小部分動，那我們就可以將動的部分拆分出來，拆解成幾張小動圖和靜態圖，然后分別上傳到公眾號中重新組合在一起。
前面蘋果的例子就由下方兩張圖片組合成的：
根據拆解的層數和尺寸，我們可以選擇使用 iPaiban Pro 黑科技編輯器中的以下組件進行制作。
組件：無縫圖(自上傳圖標,自定義位置)
編號：10291（組件）
組件：雙層圖片
編號：10319（組件）
組件：三層圖片
編號：10323（組件）
組件：三層圖片(第二層自定義大小及位置)
編號：10777（組件）
組件：多層圖片
編號：10325（組件）
其中「雙層圖片」「三層圖片」和「多層圖片」組件，每一層圖片的尺寸需保持一致，「無縫圖(自上傳圖標,自定義位置)」和「三層圖片(第二層自定義大小及位置)」組件中的第二層圖片可任意調整位置和大小。
二串聯播放GIF（按時間拆分）
來自「騰訊」公眾號：
▲點擊查看原文
如果是視頻轉換或直接錄制的動圖呢？不能按層拆分我們還可以按時間拆分。
比如一段時長 6s 的動圖，我們可以拆分成每 2s 一段，然后使用 iPaiban Pro 黑科技編輯器中的下方組件進行串聯組合。
組件：自動-串聯播放GIF動圖
編號：10466（組件）
需要注意的是，這種只適合動圖單次播放的情況，一般放在圖文開頭。
像前面騰訊圖文中的開頭動畫，就是由多個GIF串聯組合成的：
三序列幀
來自「Apple」公眾號：
▲點擊查看原文
動圖和視頻說到底是由一張張連續的靜態圖片組成的，如果我們想要一個極致高清的動態效果，可以使用 iPaiban Pro 黑科技編輯器中的下方組件進行制作。
組件：序列幀動效
編號：10375（組件）
選擇組件后，上傳多張連續動作靜態圖，即可生成高清的動態效果。
四靜態圖+SVG動效
來自「Apple」公眾號：
很多規律性的簡單動效，其實不是動圖而是代碼控制靜態圖實現的。
像上面的宮格彈跳動效，我們使用 iPaiban Pro 黑科技編輯器的下方組件即可制作。
組件：宮格式彈跳切換圖片(向上、基礎版)
編號：10318（組件）
除此之外浮動、旋轉、輪播、洗牌、漸變切換等動效我們使用編輯器都可以制作，在「組件」-「自動」分類中可找到相關組件。
五矢量素材+SVG動效
來自「TUDOR帝舵」公眾號：
▲點擊查看原文
很多像線條軌跡移動這樣覆蓋全文的動效，則是由矢量素材利用代碼實現，這類動效因為較為復雜，目前只能是定制。
大致原理是先讓設計師通過 Ai 繪制矢量圖形，然后轉成 SVG 代碼，工程師再技術控制讓人物、物品動起來，沿著繪制的軌跡移動。
最后，我們再回到開頭的問題：同樣是動效，為什么蘋果以及其他大品牌的總是那么清晰？
還是那句話，它們的很多動效不僅僅是一張動圖那么簡單。明白了其中的原理，我們利用 iPaiban Pro 黑科技編輯器或者定制就可以做到。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）