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

雲豹科技程式設計師 發表於 2021-12-01

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

圖片優化

減少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;}

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

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


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69996194/viewspace-2845217/,如需轉載,請註明出處,否則將追究法律責任。

相關文章