從 After Effects 過渡到 CSS 過渡和關鍵幀

網站看起來越來越像移動應用程序。 用戶也越來越期待獲得更像應用程序的體驗。 從推送通知到離線模式，本機 Web 應用程序正在實現。

一旦網絡應用程序像原生應用程序一樣運行，設計交互也將改變以解決用例 - 即動畫的普遍性。 從 Uber 到 Lyft，從 Snapchat 到 Instagram，動畫推動了我們所有喜愛的應用程序中的交互。

作為 Web 開發人員，我們需要一個良好的基礎來創建兼具性能和可維護性的動畫，這對於原生 Web 應用程序環境至關重要。 我們需要能夠從 After Effects 轉到 CSS 過渡、動畫和關鍵幀。

什麼是後效？

After Effects 是 Adob​​e 的一種行業標準產品，供圖形和動畫設計師用於對動畫進行鍵控、合成和跟踪。 它是許多設計師使用的事實上的工具，通過將動畫層導出到易於可視化的示例視頻中來與團隊交流想法，並附有動畫開始和結束時間的參考表。

演示視頻和參考表一起為開發團隊提供瞭如何實現動畫的良好基準。 視頻用於查看整體畫面，而參考表提供了製作或破壞動畫交互的微小細節。

我們可以用 After Effects 做的事情

我們可以使用 After Effects 創建的內容僅受我們想像力的限制。 它可以為圖像或視頻提供無窮無盡的後期製作效果。 在網絡的範圍內，它提供了一個分享想法的平台。

考慮上面的紅球。 使用 After Effects 為球設置動畫，使其緩慢滾動到中間，暫停一秒鐘，然後緩慢加速以退出視口。 移動、縮放、旋轉甚至顏色變化的經典網絡動畫在 After Effects 中很容易完成，並作為要實施的動畫的即時生成的需求文檔（或視頻或 GIF）。

入門所需的工具

隨著 JavaScript、HTML5、CSS3 和許多其他語言成為網站接收流量的大多數主要用戶代理的標準，使用這些工具批髮變得越來越可行。 以下是實現動畫時要牢記的一些關鍵技術。

CSS 過渡

CSS 過渡提供了一種控制 CSS 屬性更改應用於元素的速度的方法。 可以使用自定義規則在定義的加速曲線上逐漸應用樣式，而不是立即應用樣式（沒有過渡）。 例如，在一段時間內將背景顏色從黑色更改為白色。

 transition-property: background-color; transition-duration: 3s;

在元素上使用此規則後，背景顏色將需要三秒鐘才能改變，從黑色逐漸變為白色，經過灰色陰影。 這可以通過添加transition-timing-function來進一步定制，以計算中間值，以及transition-delay，以延遲動畫的開始。

CSS 過渡適用於簡單的交互，例如更改背景顏色或將元素移動到新位置。

使用 CSS 動畫

CSS 動畫使用航點對動畫之間的中間步驟提供更精細的控制。 航點（或關鍵幀）是動畫期間的固定時間點，當我們將某些樣式應用於元素時。 然後我們使用定義的關鍵幀來佈置動畫應該是什麼樣子。

假設我們想要一個元素作為反彈動畫。 元素需要上移，移回原來的位置，再上移一點，再移回原來的位置。 使用關鍵幀，我們可以將彈性效果分解為動畫所需時間的百分比。

 @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-25px); } 60% { transform: translateY(-15px); } } .element { animation-name: bounce; animation-duration: 3s; }

與 CSS 過渡一樣，開發人員可以配置很多選項。 我們可以使用animation-iteration-count使動畫無限重複，值為infinite ，甚至可以使用屬性animation-direction控制動畫流動的方向。 大量的 CSS 動畫屬性為我們提供了細粒度的控制，以使動畫與設計相匹配。

CSS 動畫對於簡短的重複動畫很有用，例如展開、旋轉和反彈。

使用 JavaScript

JavaScript 有多種用途，從 Raspberry Pi 服務器到客戶端代碼，但其核心用途之一仍然是更改元素上的類名。 更改類名是管理元素狀態的一種簡單而有效的方法。

一個示例是簡單添加一個active類，該類指示最初隱藏的組件開始製作動畫。 考慮下面的球。 我們使用 JavaScript 添加一個使用 CSS 過渡屬性觸發動畫的類。

該動畫的第一部分可以使用 HTML、CSS 和 JavaScript 的簡單組合來複製。

HTML：

 <div class="ball"></div>

CSS：

 .ball { width: 100px; height: 100px; color: red; transform: scale(0.25); transition: all 1s ease-in; } .ball.active { transform: scale(1.25); }

JavaScript：

 setTimeout(function() { document.querySelector('.ball').addClass('active'); }, 500);

當超時（ 500ms ）到期時，會在球的div中添加一個active類，這會改變transform屬性，然後觸發transition屬性，它正在觀察球元素上的transform屬性。 使用 JavaScript 更改 CSS 類不僅可以幫助我們管理組件的狀態，還可以讓我們進一步控制 CSS 動畫和過渡之外的動畫。

使用 JavaScript 控制動畫有利於管理狀態，根據用戶輸入或應用程序狀態等動態因素觸發事件。

從 Idea 到 After Effects 再到 CSS 和 JavaScript

想像一下，我們有一項任務，我們必須為頁面上的元素設置動畫。 讓我們把這個元素變成一個紅球。 球必須圍繞頁面旋轉，以及放大和縮小。

After Effects 允許我們創建動畫觸發時交互效果的模型。 下面的運動球就是一個例子。 請注意紅球是如何首先略微放大，然後開始圍繞圓形循環加速並減速回到原來的位置。 只有這樣，球才會縮小到原來的大小。

考慮在移動或停止之前球增長或縮小的位置上方的比例變化。 這是設計師在 After Effects 中精心設計的一個小功能，需要清楚地傳達給開發人員，以免錯過細節。

這就是為什麼在從 After Effects 到開發人員之前需要做一些準備工作的原因。 我們不能簡單地創建動畫動畫的視頻文件，與開發人員共享它並收工。

清楚地傳達我們的想法的一種方法是創建一個電子表格，詳細說明動畫所需的步驟。 根據動畫的複雜程度，它可能是票證上的簡單塗鴉、包含列表的文本文件或完整的電子表格。

傳達有關動畫信息的另一種方法是將其嵌入視頻本身。 您可以在 After Effects 中直接執行此操作，添加重要信息，例如縮放程度、步驟數和其他正在發生的信息，以便為實施者提供上下文。 這使我們能夠將演示視頻用作普遍的事實來源。

這個從 After Effects 導出的視頻文件充當了設計師和開發人員之間的一種合同形式。 有了共同的理解，我們可以使用討論的工具來實現它——即 CSS 類、JavaScript 事件、CSS 轉換、CSS 動畫和 JavaScript 動畫。

1.分解動畫

尋找模式並註意時間。

首先要做的是為每個元素（或元素組）繪製動畫的時間線。 我們需要了解動畫在哪里相交，以便同步它們周圍的時間和動畫生命週期。 計劃是複雜動畫的關鍵，因此我們可以以可維護的方式逐步構建我們的解決方案，以滿足未來的需求。

根據以上信息，我們將其分解為以下步驟：

1. 初始化組件並等待觸發。
2. 觸發後，按比例放大並擴大陰影。
3. 之後，以ease-in-out的方式繞一圈移動。
4. 然後，縮小尺寸並減少陰影。

大綱的好處是我們了解哪些組件必須存在於動畫元素之外——例如，投影必須獨立於球。 類似於概述一篇文章，分解動畫可以組織我們對我們必須做的工作的想法。 大綱展示了動畫背後的思考過程，並雙重作為我們工作的文檔。

2. 與利益相關者協商

我們可以簡化一些領域嗎？ 動畫的哪些部分是必須的？ 我們可以同步時間嗎？

一旦我們調查了完成任務所需的工作，我們就會討價還價。 與設計師和產品所有者討價還價是每個開發人員的責任。 實施者完全了解關鍵的容易實現的目標，什麼可以做，什麼不切實際。

動畫很棘手，因為從動畫中刪除看似微小的細節可能會改變用戶體驗。 舉一個基於開發的示例，更改動畫的行為方式類似於更改我們可能從 API 調用收到的響應負載：某些事情可以更改，但某些部分必須存在。

這是一個個案情況，基於我們與設計師的關係，以及與產品所有者的關係，並給出了發佈時間表。 不建議要求刪除某些動畫，因為這超出了我們的專業領域。

討價還價的一個好方法是同步時間或簡化瀏覽器本機可能無法執行的動畫，並避免使用 JavaScript 的動畫，因為它們難以維護並且可能導致性能不穩定。 我們可以而且應該要求這些讓步。

3. 計劃攻擊

知道每個元素的開始和結束狀態應該是什麼。 看看每個轉換時間應該發生在哪裡。 在 CSS 類中利用 BEM 清晰地應用動畫。 理解為什麼 JavaScript 應該被限制為支持 CSS 的原因。

讓我們檢查一下前面描述的動畫。 五個州突然出現在我們面前：

1. 初始狀態，帶有紅色球和一些陰影；
2. 具有較長陰影的放大版球；
3. 球繞一圈運動；
4. 球的縮小，連同它的投影；
5. 返回初始狀態，等待觸發。

對於所有五個州，我們應該看看之前的風格是什麼，之後應該是什麼。 這將為我們提供有關實現它所需的動畫工具類型的信息。

為此，我們從基本案例樣式開始。 如果元素突然出現，這可能什麼都不是，或者它可能是以前的樣式，在鍊式動畫的情況下。

通過在狀態之間進行很少的樣式更改來保持簡單。 一旦我們確定了開始和結束狀態，我們需要將它們標記為 CSS 類，以便它們可以輕鬆地應用於元素。 這使我們可以靈活地使用 JavaScript 來處理基於從元素可能依賴的 AJAX 調用接收的數據的類應用程序。

BEM CSS 非常適合我們的命名策略，因為我們將如何使用修飾符來表示正在進行的動畫的狀態。 如果動畫足夠通用，BEM 也是維護跨代碼庫工作的 DRY（“不要重複自己”）CSS 類的好方法。 我們將從塊和元素標記開始，然後隨著動畫的進行而在修改器中分層。

這是一個示例模板類旅程：

 // State 1 <div class="ball"></div> // State 2 <div class="ball ball--scale-up"></div> // State 3 <div class="ball ball--scale-up ball--circling"></div> // State 4 <div class="ball ball--scale-up ball--circling ball--scale-down"></div> // State 5 <div class="ball"></div>

我們從具有類 ball 的容器元素開始，它代表我們正在製作動畫的紅球。 隨著動畫在體驗中迭代，我們的 BEM 類名也是如此，從放大到繞圈移動。 這是一種在應用樣式時跟踪元素應該是什麼樣子的方法。

四、穩步實施

有了手頭的大綱和可以使用的工具，我們應該逐個州地分析項目。

我們可以迭代地處理每個狀態作為一個單獨的項目，根據需要在前一個狀態的基礎上構建。 明確定義每個狀態後，我們可以更專注於使代碼乾燥且易於閱讀，而不是實現細節。 而且，當然，添加測試來覆蓋我們的邏輯會很好。

初始狀態

我們從一個簡單的紅色球開始，帶有輕微的陰影。

 .ball { background-color: #D24D57; width: 25px; height: 25px; margin: 5px; display: inline-block; border-radius: 50%; box-shadow: 0 8px 6px -6px #6C7A89; }

擴大

放大有兩個部分：元素的大小及其投影。 我們使用一個名為scale的關鍵幀，該關鍵幀由 DRY-ness 的放大和縮小共享來處理此動畫。

 @keyframes ball-scale { from { transform: scale(1); box-shadow: 0 8px 6px -6px #6C7A89; } to { transform: scale(1.25); box-shadow: 0 10px 6px -6px #6C7A89; } } .ball--scale-up { animation: ball-scale 1s ease-out forwards; }

循環（應用放大動畫後）

我們使用一個名為circular的關鍵幀，並移動它的transform-origin屬性以將元素從頭開始移動一個圓圈。 請記住，只有在放大動畫完成時才會發生盤旋。

 @keyframes ball-circular { from { box-shadow: 0 10px 6px -6px #6C7A89; transform-origin: 50% -450%; transform: scale(1.25) rotate(0deg) translateY(-100%) rotate(0deg); } to { box-shadow: 0 10px 6px -6px #6C7A89; transform-origin: 50% -450%; transform: scale(1.25) rotate(360deg) translateY(-100%) rotate(-360deg); } } .ball--circling { animation: ball-circular 2s ease-in-out forwards; }

縮小（應用循環和放大動畫後）

為了縮小，我們重用關鍵幀比例，使用animation-direction: reverse來做與放大類相反的事情。 這使我們回到了原來的狀態。

 .ball--scale-down { animation: ball-scale 1s ease-in forwards; animation-direction: reverse; }

工作演示

如果我們將所有這些類組合成一個序列，我們將在 After Effects 中完成渲染的 CSS 表示。

點擊球開始。

請參閱 CodePen 上 Chris Ng (@chrisrng) 的鋼筆動畫球。

結論

本文介紹的工具幾乎不是最前沿的，但它們通常在大多數主流瀏覽器中都得到支持，這使得它們在今天仍然可用。

以前，實現動畫很困難，因為它意味著使用 jQuery Animate 等外部工具來做一些簡單的事情，比如在頁面上移動元素。 今天，CSS 過渡和動畫可以利用 GPU 本地高效地完成。

動畫始終是開發人員、設計師和產品所有者之間的拉鋸戰。 訣竅是找到中間立場，讓所有利益相關者都對產品的質量感到滿意。 希望本指南能幫助您完成這一轉變。