後Flash時代的網絡動畫

在這個競爭激烈的環境中，企業都在瘋狂地尋找方法來吸引和留住人們的注意力。 在我們的日常生活中，街上的動畫廣告、手機上的視頻，更不用說我們的社交媒體，源源不斷的視覺刺激向我們湧來，創造了一種持續不斷的運動感，正在爭奪我們的注意力。

對我們環境中的運動的瞬間反應是出於生存的需要，並由被認為具有潛在威脅或有害的環境刺激觸發； 人們特別注意移動的東西。 當我們從眼角捕捉到快速移動的東西時，大腦會在瞬間提醒我們，因為我們的潛意識大腦在有意識的大腦有時間處理信息之前就已經對危險做出了反應。

廣告商知道這一點，這就是為什麼我們在公交車站和地鐵站台上投放動畫街頭廣告、在社交媒體流中彈出視頻廣告以及帶有全動態視頻的電子廣告牌的原因。 該技術是一種一兩拳效果，旨在傳遞營銷信息。 首先，通過吸引我們的注意力，其次，使用視頻和動畫來傳達信息。

如果一張靜態圖值一千字，那麼一部動畫值多少錢？

這就是網絡動畫的用武之地。網頁設計師希望抓住並吸引我們的注意力，並可能會增加意想不到的愉悅感。 Web 動畫可用於可視化複雜過程或想法中的各個步驟，說明簡單的營銷信息，或者在人們滾動時以自然流暢的方式移動網頁上的內容——再次，以引起對某事的注意。

網絡動畫是如何開始的，GIF 的興起

在萬維網的早期，事情相當靜態和無聊。 網頁主要基於印刷界的圖形設計和佈局。 然而，一些設計師齊心協力——儘管存在技術和帶寬挑戰——將早期形式的網絡動畫包括在內，以使它們更具活力和吸引力。 1995 年，杰弗裡·澤爾德曼 (Jeffrey Zeldman) 的《永遠的蝙蝠俠》(Batman Forever) 是網站上最早添加的 GIF 動畫之一。蝙蝠俠飛向他們，以動畫形式向訪客致意。

Batman Forever 促銷網站是當時最受歡迎的網站之一。 它啟發了其他網頁設計師和開發人員將 GIF 網頁動畫作為一種古怪、引人注目的元素融入他們的網站。

快進 20 年，動畫 GIF 現在無處不在。 他們在 Twitter、Messenger、iMessage、WhatsApp、Skype、Instagram 和 Facebook 上。 GIF 適用於短循環動畫、圖像序列，甚至短視頻循環。 一個不幸的缺點是 GIF 文件格式不具有可變透明度並且不支持 Alpha 通道。 因此，所有像素要么完全不透明，要么完全透明。

GIF 動畫是網頁設計復興的開端，但並不理想。 尤其是在撥號上網和網速較慢的早期，GIF 會佔用大量帶寬。 結果是一個低分辨率的像素化序列。 設計師必須將 GIF 壓縮到盡可能小的尺寸的缺點是有限的 8 位調色板，這導致了很多抖動。 隨著高速互聯網在 21 世紀變得越來越普遍，這種情況發生了變化，因此，網絡動畫變得更好看，擁有數百萬種顏色，並且隨著更高的幀速率變得更流暢。

Flash Web 動畫的黎明

1996 年，隨著 Flash 的推出，Web 動畫大爆發，Macromedia 宣布了他們的 Web 插件和隨附的基於幀的動畫工具：Macromedia Flash（在他們收購了矢量動畫程序 FutureSplash Animator 之後）。 Flash 在將新功能引入網絡方面發揮了主導作用。 從音頻和動畫到交互性和視頻，Flash 幫助推動了互聯網的發展。

在包括交互在內的整個網站上構建簡單、精簡、基於矢量的網絡動畫的機會，創造了可以稱為網頁設計的“巴洛克”時期，其中（太多）動畫元素擠滿了景觀。 儘管如此，Flash 還是讓我們得以一窺動態網頁設計的可能性，讓設計師可以自由地進行實驗，並開啟了一段網頁設計快速發展的時期。

Flash 動畫是輕量級的並且相對容易製作。 它們只有幾千字節的大小，以 SWF 文件格式和帶有清晰矢量圖形的聲音文件分發。 創建網絡動畫成為一個簡化的過程，並沒有增加網頁加載時間。 但儘管如此，仍然存在一個明顯的缺點——它需要一個瀏覽器插件才能運行。

此外，Flash 中的複雜交互由 ActionScript (AS) 實現，這是一種類似於 JavaScript 的面向對象的編程語言。 ActionScript 最初設計用於控制簡單的 2D 矢量動畫，但隨後演變為複雜的工具。

不幸的是，Flash 動畫並非旨在響應，在所有設備上都無法正常運行，最終從所有流行的移動設備中刪除。 雖然文件大小相對較小，但 Flash 沒有得到很好的優化，最終佔用了 CPU，這在移動設備上也是一個問題。 在史蒂夫喬布斯決定不在 Apple 移動設備上支持 Flash 之後，Flash 時代結束了。

Flash 是在 PC 時代為 PC 和鼠標創建的。 但移動時代是關於低功耗設備、觸摸界面和開放網絡標準的——這些都是 Flash 的不足之處。

史蒂夫喬布斯

今天的網絡動畫

如今，隨著 Flash 的淘汰，我們對網絡動畫有不同的需求。 工具必須靈活輕便。 網頁設計師必須為不同的設備（台式機、平板電腦和移動設備）創建響應性和適應性強的內容，同時考慮到各種屏幕尺寸、瀏覽器、縱橫比、像素密度等。 我們的網絡動畫傑作必須在 5 英寸、720 像素的手機、9.7 英寸 QXGA 平板電腦和 32 英寸 Retina 6K 顯示器上運行。

技術已經成熟到一個地步，即使動力不足的移動設備也有足夠的帶寬和處理能力來處理要求非常高的網絡動畫和高分辨率視頻內容。 這並不意味著網站應該超級“繁忙”。 與往常一樣，它是關於在動畫、動態交互和靜態元素之間取得適當的平衡。 我們今天可以實現很多花哨的網絡動畫這一事實並不意味著我們應該這樣做。

網頁設計師/動畫師還必須考慮跨平台支持。 十年前，設計師不必確保他們的作品在如此廣泛的設備上看起來不錯。 必須考慮不同的縱橫比、縱向和橫向以及各種像素密度和觀看距離。 這個難題給網頁設計師帶來了一系列新的挑戰和潛在的陷阱。 用戶測試會消耗寶貴的時間，在眾多平台上可能會出現更多問題，並且網絡動畫必須比以往更加詳細。

HTML5、CSS3、JavaScript 和 SVG（可縮放圖形）似乎是 Web 動畫的最佳解決方案。 使用這些現代網絡技術和語言將有助於解決上述大部分問題，但不是全部。 但謹慎行事總是一個好主意，尤其是在未知領域，並且必須進行廣泛的 QA 和測試。

為什麼使用網絡動畫？

網絡動畫可以比靜態網頁更長時間地吸引和吸引人們的注意力，並且更清晰有效地傳達想法或概念。 優秀的網絡動畫傳達了每一個動作背後的故事。 這一切都是為了讓動畫充滿意義和“靈魂”（lat. anima）。

網絡動畫應該流暢、有意義，並支持訪問者的旅程。 網頁設計師/動畫師需要了解動畫如何融入用戶體驗，嘗試預測可能的用戶流，然後以有意義的方式支持它。

網頁設計師不能從純粹的技術角度來看待網頁動畫； 他們需要從用戶的角度來看待它。

動畫的基本要素之一是時間安排。 適當的時機賦予動畫以物理和情感意義。 體驗應該是無縫的和合乎邏輯的。 如果動畫不流暢（有時間問題），人們可能會將其視為錯誤並失去進一步探索網站的動力。

動畫師需要使用適當的時間來提供預期的效果。 動畫中應該使用多少個關鍵幀？ 動畫中的什麼樣的動態變化是由於訪客互動，互動後反應有多快？ 動畫是否異想天開、嚴肅、有趣？

從邏輯上看，我們可以將網絡動畫分為兩種基本類型：

• 靜態的、非交互式的網絡動畫，例如 GIF 動畫。
• 具有用戶參與度和交互性的動態網絡動畫，會隨著用戶輸入而變化。

動態動畫的最佳示例是遊戲，用戶可以在其中操縱屏幕上的內容。 另一個簡單的示例是在網站訪問者滾動瀏覽視差滾動網站時更改某些元素的位置。 動畫不是被動的，它會根據用戶操作而變化。

動態網頁動畫通常用於在網站上呈現動畫信息圖表，因此人們在滾動頁面時會更加關注特定區域——這是一種突出相關信息的有效方式。

網絡動畫的優缺點

以下是網絡動畫技術的一些優缺點，包括不再使用的遺留解決方案。

一般而言，網絡動畫的優缺點如何？ 執行良好的網絡動畫仍然會顯得格格不入，因此在繼續將動畫集成到網站設計中之前，詢問一些關鍵問題（以及測驗客戶和其他團隊成員）總是一個好主意。

首先，我們需要檢查動畫將如何影響用戶體驗。 它會改善網站的用戶體驗嗎？ 設計師應該：

• 檢查現有的網站設計（如果有）
• 檢查目標受眾和他們使用的硬件平台
• 檢查站點加載時間和 CPU 負載
• 探索其他選擇
• 關注可用性

在網站上使用網絡動畫來簡單地跟隨趨勢並不是一個好主意。

使用網絡動畫的決定應被視為任何其他設計決定； 網頁設計師必須權衡利弊，並確保不影響用戶體驗。 他們還應該與開發人員一起確定代碼要求，並確保他們不會被低效的代碼卡住，這些代碼可能需要在未來進行調整。

現代網絡動畫技術在過去 20 年中已經顯著成熟——性能、可用​​帶寬和渲染質量都有所提高。 但是，設計師應該謹慎行事，只有在有意義地增強用戶體驗的情況下才向網站添加動畫。

進一步閱讀 Toptal 設計博客：

• 如何創建自定義加載動畫以降低跳出率
• 立即使用 Sketch 和 Looper 創建令人費解的插圖
• 使用原理和草圖的 UI 動畫分步指南
• 標誌動畫靈感，使您的品牌更具相關性
• 創建動畫產品說明視頻的分步指南