ITPub博客

首页 > 应用开发 > C/C++ > 游戏陪玩系统源码开发,如何实现图片和动画的优化?

游戏陪玩系统源码开发,如何实现图片和动画的优化?

C/C++ 作者:云豹科技程序员 时间:2021-12-01 17:02:48 0 删除 编辑

游戏陪玩系统源码的开发中会涉及大量的图片和动画,而这些图片和动画在前端展示就会影响到前端的性能,为了实现性能优化,我们在游戏陪玩系统源码开发时就需要对图片和动画进行优化。

图片优化

减少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/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2021-03-10

  • 博文量
    308
  • 访问量
    90191