在一般的業務網站建設開發環境下, 所有的動效是否全部由程式實現, 這是需要按照不同的情況設計實現手段進行判斷的, 一個很小的特殊效果讓前端日以繼夜地堆程式碼是一種價效比極低的方法。很多情況下, 對於不需要太多互動操作的動態效果, 實際上是前端提供一個畫布區域設計師透過逐幀動畫的設計其實現效果, 會更有效地提升產品開發效率。這裡給大家提供三個價效比相當高的方法：
(1)GIF 動畫 大家對 GF 圖片應用並不陌生, 今天主要跟大家普及 GIF 的壓縮技巧。我們在做多使用者走訪的時候發現, 很多 B 類多使用者辦公條件都不具備高速的頻寬, 所以我們必須考慮到 GIF 的體量。拿我們在父親節做的一個情感化的小動效來說, 在 PS 無壓縮的情況下是 67k, 我們可以透過對幀速率進行壓縮, 每兩幀抽減一幀, 為保持迴圈週期不變, 新的每幀持續時間需要設定成原來的兩倍, 這樣壓縮之後體量就會減少為原來的 1/2, 但是效果比起來, 有一點點卡頓的感覺, 效果沒有原來的流暢了。 這裡給大家推薦另外一種網站建設方法, 扁平化的動效設計可以對顏色和損耗做適當的壓縮, 並且刪掉迴圈中重複或者是非常相近的幀, 注意刪掉某一幀之後, 要把它替代裝的時間補全, 保證迴圈週期不變, 這樣也可以有效地壓縮 GF 體量, 但是需要注意一點的是顏色壓縮只活用於無漸變的動效。 GIF 的應用範圍比較小, 由於它比較難以控制播放, 所以基本上都是用在像 LOGO 區這樣不需要太多操作的區域。 (2)webM 視訊 壓縮方式對比 webM 是一個視訊格式, 並且是一個可以控制播放的容器, 它的體量是 GI 的 1/3, 相容響應式的設計, 優點是減少網站建設設計成本, 全面相容瀏覽器, 硬體要求低嘗試在 B 類營銷場景中插入動態背景視訊, 原視訊 367MB 壓縮為 GIF 的 6.9MB, 轉換為 webM 的 1.8MB, 體量完全符合多使用者要求, 並且影象的損失也在可控範圍內; 在產品區域的應用, 由於可控播放的優點, 未來我們的產品完全可以 360 度地展現。 (3)PNG 序列 最後來看一下 PNG 序列, 對於遊戲類可以進行預載入的網頁應用, 在開發時間較短的, 可以使用 PNG 序列來展現應用想要呈現的效果, 透過時間點和動效週期的精, 可以讓多使用者有非常流暢的互動體驗。比如, 我們在拳擊體感遊戲 “啪啪快打” 專案中嘗試用 PNG 序列來實現一個體感遊戲, 多使用者可以透過手機連線電腦, 透過手勢控制來進行打鬥的操作。具體的動效設計用雪碧圖來實現。 這些都是我們 web 端無法比擬的，我們在做網站建設網頁動效設計的時候必須考慮頻寬，主流兩個作業系統使用的最小時間單位都是毫秒，所以我們的楨間隔單位按照毫秒取整。