frax by frame動畫教程，帶有CSS和JavaScript

本教程探討了使用HTML，CSS和JavaScript製作平滑，性能和可維護的逐幀動畫的各種方法。 我們將構建一個眨眼的眼動動畫，逐步完善我們的方法，以在瀏覽器和設備之間取得最佳的結果。

密鑰概念：

使用CSS和JavaScript的
• 逐幀動畫技術提供多種方法，每種方法都具有權衡。
SVG的可擴展性和響應性使其優於GIF，尤其是對於復雜或互動動畫。 基於精靈的動畫和CSS密鑰幀最小化http請求並改善渲染。
css變換屬性，尤其是使用硬件加速度（
• ），通過減少重新塗片和反射來優化性能。
• 選擇正確的技術取決於可伸縮性，響應性，性能和可維護性需求。 translate3d
• 什麼是frage-frame動畫？ Adobe定義的
逐幀動畫涉及在每個幀中更改階段內容。 它是每個幀都是唯一的複雜動畫的理想選擇。 本質上，一系列圖像產生了運動的幻想。

>本教程使用SVG圖像以實現其可擴展性。 稍後將討論PNG，JPEG和GIF等替代方案。我們將使用jQuery並假設配置了AutoPrefixer。 方法：

更改圖像源：這種簡單的方法涉及動態更改>元素的

屬性。

用於更順暢的動畫，但是圖像預加載對於防止初始jank至關重要。 預加載是通過將圖像作為背景圖像附加隱藏的div來實現的。

1. pros：聲明性，圖像保留在適當的位置。 src> <img alt="frax by frame動畫教程，帶有CSS和JavaScript" >requestAnimationFrame cons：

   多個HTTP請求可以減慢初始頁面加載，由於重新塗漆而在移動設備上的Janky Animation的潛力。
   更改圖像不透明度：
   • 此方法通過更改圖像不透明度而不是源來避免重新粉刷。 所有圖像均已預加載，改善了性能，但仍需要多個圖像負載。 > 與方法1相比，
   PROS：
   提高了渲染性能
2. cons：仍然需要多個圖像加載，可能會影響初始頁面加載。
   更改精靈位置：
   • 這使用CSS Sprite紙 - 一個包含所有動畫幀的單個圖像。 CSS動畫更改以創建動畫。
     • pros：單個http請求，無需javascript。
     • cons：重新粉刷可能會導致jank在移動中引起jank，由於子像素渲染而引起的圖像搖擺的潛力。

   • 使用轉換：移動精靈，這是通過使用transform: translateX而不是background-position來優化方法3的。 這可以最大程度地減少重新粉刷和倒流。 對於不支持動畫中不支持百分比值的較舊的IE版本需要後備。 translateX用於硬件加速度。 transform: translate3d(0, 0, 0)

     • pros：單個HTTP請求，由於最小化的重新塗片而在移動設備上流暢的動畫。
     • cons： IE後退。 >

內聯SVG：>

性能比較：

性能測試（例如，使用jsperf）表明Sprite-Transform方法（方法4）通常提供最佳的渲染性能。

替代方案：

> 如果可伸縮性並不關鍵，則

gif：
• 適合使用，但缺乏對動畫流的控制，並且可能很大。 > > canvas：
>非常適合在小屏幕上具有多個動畫對象的性能，但需要帆布API知識並且缺乏DOM事件支持。 >
• 結論：

最好的方法取決於項目要求。優先考慮SVG以進行可伸縮性，將轉換屬性用於性能，並考慮精神符號以獲得最佳初始負載時間。 選擇最能平衡性能，可維護性和開發人員熟悉的方法。

（由於未以易於使用的格式提供圖像URL，因此未包含圖像URL。用您的實際圖像URL替換佔位符。

以上是frax by frame動畫教程，帶有CSS和JavaScript的詳細內容。更多資訊請關注PHP中文網其他相關文章！