遊戲陪玩系統原始碼的開發中會涉及大量的圖片和動畫，而這些圖片和動畫在前端展示就會影響到前端的效能，為了實現效能優化，我們在遊戲陪玩系統原始碼開發時就需要對圖片和動畫進行優化。

圖片優化

減少HTTP請求數量

使用CSS畫圖(動畫)代替簡單的圖片
合併遊戲陪玩系統原始碼中的小圖示(CSS Sprites)
將小圖示內嵌到HTML中(Base64格式的圖片)

減少請求資源的大小

使用圖示字型代替簡單的圖示
壓縮圖片
選擇合適的圖片大小
選擇合適的圖片型別

圖片型別

jpg

有失真壓縮，壓縮率高，不支援透明
適用於色彩豐富、漸變色且不需要透明圖片的遊戲陪玩系統原始碼場景

png

png-8 256色+支援透明
png-24 2^24色+不支援透明
png-32 2^24色+支援透明
適用於大部分需要透明圖片的遊戲陪玩系統原始碼場景

webp

與png、jpg相比，相同的視覺體驗下，影像更小
支援有失真壓縮、無失真壓縮、透明和動畫
理論上完全可以替代png、jpg、 gif 圖片格式
存在一定的相容性問題

動畫優化

優先使用CSS3過渡和動畫
在遊戲陪玩系統原始碼開發時，優先使用translate3d做運動
必須使用JavaScript做動畫時，使用requestAnimationFrame

<!DOCTYPE html><html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>動畫優化</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .mask {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 1;
        /* transition: opacity 0.5s; */
      }
    </style>
  </head>
  <body>
    <div id="mask" class="mask"></div>
    <script>
   		 // 使用Js搭配CSS3完成元素消失的動畫
        const $mask = document.getElementById('mask');
        $mask.addEventListener(
            'click',
            function () {
                $mask.style.opacity = 0;
            },
            false
        );
        $mask.addEventListener(
            'transitionend',
            function () {
                $mask.style.display = 'none';
            },
            false
        );
    </script>
  </body></html>

使用JS requestAnimationFrame 來實現

window.requestAnimationFrame() 需要傳入一個回撥函式作為引數，該回撥函式會在瀏覽器下一次重繪之前執行一次。

$mask.addEventListener(
    "click",
    function () {
        // setTimeout(fadeOut, 20);
        requestAnimationFrame(fadeOut);
    },
    false);let opacity = 1;function fadeOut() {
    opacity -= 0.05;
    if (opacity <= 0) {
        opacity = 0;
        $mask.style.display = "none";
    } else {
        requestAnimationFrame(fadeOut);
    }
    $mask.style.opacity = opacity;}

以上便是“遊戲陪玩系統原始碼開發，如何實現圖片和動畫的優化？”的全部內容，既然圖片和動畫對遊戲陪玩系統原始碼的效能影響那麼大，那麼圖片和動畫的優化勢在必行。

本文轉載自網路，轉載僅為分享乾貨知識，如有侵權歡迎聯絡雲豹科技進行刪除處理
原文連結：

遊戲陪玩系統原始碼開發，如何實現圖片和動畫的優化？

圖片優化

動畫優化

相關文章