关于前端:从王者荣耀里我学会的前端新手指引

微信搜寻「秋风的笔记」。关注我，前端学习不迷路。

在王者的世界里，不仅仅只有高兴，还能搞学习，让你成为高兴而又富裕常识的人。这其中的功臣，这不得不说的就是它的老手指引。

为什么这么说呢？咱们先来看几张图。

没错，下面的就是王者光荣的老手疏导，手把手教学，还有妲己美好的声音。

整个过程大概 2 分钟 。它应用了多种疏导形式， 蒙层疏导、气泡疏导、视频疏导、操作疏导还有预设工作，能够说在老手疏导方面，真的很 ” 细 ”，用了各种各样的花色。然而它用了仅仅 2 分钟的指引就让你疾速体验到了整个产品的应用形式，让你感触到战胜敌人是如此满足，博得一场游戏是如此简略。你播种了大量的高兴同时产生对它的依赖。

而如果说，没有老手指引，让一个没有素来没有玩过此类游戏的新人，就上手一个 5v5 的战斗，在本人还没弄懂操作，就上手实战，那么新人必定会被打的很惨，受到队友的埋怨不说，很快会输掉一场较量，从而产生挫败感，感觉这个游戏垃圾，更不用说从游戏中体验快感。

所以说老手疏导是一种能让用户在短时间内疾速理解产品特色以及产品应用形式。

它是十分重要也是十分有必要学习的一个性能！这也是本篇文章想要介绍的重点内容。上面就进行原理实战解说

我先介绍一下常见的几种类型老手疏导效果图。

疏导页个别呈现在首次关上 APP 的时候，由 3 - 5 个页面组成。

在产品的整个界面上方用一个彩色半透明蒙层进行遮罩，这种疏导形式能够让用户聚焦理解被圈注的性能点或手势阐明。

在操作按钮旁边弹出一个气泡提示框或者间接弹出弹窗。

用户能够依据动静演示，很快地了解整个产品。

一步一步地疏导你进行操作，激励用户参加其中，边学边用。

预设工作是指在用户进入产品后，主动为用户创立了一些和产品状态相干的示例，而不是留给用户一个空页面。

人将降大任于斯人也，所以最近我就遇到了这样的一个需要。不过我须要实现的也比较简单，只须要实现蒙层疏导。

明天咱们就来实现一下这个性能。先来看一下咱们指标的样子。外围代码大略只须要花 5 分钟就能学会，只需 9 行 js 代码，60 行 css 代码。所以接着往下看吧 ~ 高亮局部会有不一样的播种哦 ~

次要包含三个局部: 蒙层、气泡、高亮。

蒙层和气泡对于很多同学来说，真的是太相熟了。这里就只贴代码了，没有什么过多的能够解说，次要是利用了相对定位。

// 蒙层实现
<style> .guide-mask {
  z-index: 999999;
  background-color: #000;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  opacity: 0.8;
} </style>
<div class="guide-mask"></div>

// 气泡实现
<style> .tooltip-box:before {
  content: "";
  position: absolute;
  right: 100%;
  top: -10px;
  left: 20%;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 13px solid white;
} </style>
<div class='tooltip-box'>
  秋风的技能
</div>

而这个高亮怎么实现呢？如何能让蒙层两头产生一个空白框呢？在我所知的 CSS 属性中并没有相干的属性能够实现这个个性，如果不能这样实现。那意味着我是不是须要本人将这个高亮区块给空进去呢，本人通过拼接的形式来实现。如下所示，这是我第一直觉想到的计划。

这一种办法比拟傻瓜式，然而就是比拟繁琐。

z-index 属性设定了一个定位元素及其后辈元素或 flex 我的项目的 z-order。当元素之间重叠的时候，z-index 较大的元素会笼罩较小的元素在下层进行显示。

因为咱们能够利用 z-index 这个个性，只有将咱们指标元素的 z-index 设置成比咱们的蒙层高就行。

通过图层合成，咱们能够看到，指标的元素那一行 秋风的技能 是处于最高层，而不是和 秋风的笔记 文字处于同一层。因而采取的计划是，咱们没方法让蒙层在两头空进去，然而，咱们能够通过 z-index 让咱们的指标元素置于蒙层之上，而后再在蒙层和指标元素之间退出一个红色的背景框，这样就达到了高亮的成果。如果还看不明确能够看下图。

有了以上的常识就差定位了，咱们通过 getBoundingClientRect 属性来获取指标元素的大小及其绝对于视口的地位。而后通过相对定位来进行布局。以下就是这个实现的次要逻辑（代码比拟毛糙，次要是意思表白

<style> ...
  .guide-helper-layer {
    position: absolute;
    z-index: 9999998;
    background-color: #FFF;
    background-color: rgba(255, 255, 255, .9);
    border-radius: 4px;
  }
  .guide-content {
    position: absolute;
    z-index: 10000000;
    background-color: transparent;
  }
  .guide-mark-relative {
    position: relative;
    z-index: 9999999 !important;
  }
  ... </style>
</head>
<body>
    <h2> 秋风的笔记 </h2>
    <div class="skill guide-mark-relative">
        ...
    </div>
    <div class="guide-mask"></div>
    <div class="guide-helper-layer" style="width: 472px; height:58px; top:55px;left: 36px;">
        <div class='tooltip-box'>
            秋风的技能
        </div>
    </div>
    <script> const guideTarget = document.querySelector('.skill')
        const tooltip = document.querySelector('.tooltip-box')
        var rect = guideTarget.getBoundingClientRect()
        const helperLayer = document.querySelector('.guide-helper-layer')
        helperLayer.style.left = rect.left - 3 + 'px'
        helperLayer.style.top = rect.top - 3 + 'px'
        helperLayer.style.width = rect.width + 3 * 2 + 'px'
        helperLayer.style.height = rect.height + 3 * 2 + 'px'
        tooltip.style.top = rect.height + 3 * 2 + 10 + 5 + 'px' </script>

以上就是实现一个蒙层疏导的实现计划。当然这么精妙的设计也是离不开平凡的开源我的项目，以上就是参考了开源我的项目 introjs 来实现的。

这个计划除了兼容性问题(不兼容低版本 ie8 以及以前版本)，也是比较简单的一个办法。来看看 box-shadow 的办法介绍。

`/* x 偏移量 | y 偏移量 | 暗影含糊半径 | 暗影扩散半径 | 暗影色彩 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);`

外围思路为咱们能够通过设置一个比拟大的暗影扩散半径，来实现，再设置一个半透明的背景色。

box-shadow: 0 0 0 2000px rgba(0,0,0,.5);

先通过 canvas 绘制出全屏的半透明遮罩，而后绘制出高亮局部，通过 globalCompositeOperation 中的 xor选项，将重叠局部变通明。

const canvas = document.getElementById('guide-mask')
const width = window.innerWidth;
const height = window.innerHeight;
canvas.setAttribute("width", width);
canvas.setAttribute("height", height);
const ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = 'rgba(0, 0, 0, 0.8)';
ctx.fillRect(0, 0, width, height);
ctx.fill();
ctx.fillStyle = 'rgb(255, 255, 255)';
ctx.globalCompositeOperation = "xor";
ctx.fillRect(rect.left - 3, rect.top - 3, rect.width + 3 * 2 + 10 + 5, rect.height + 3 * 2);

	图层拼接	兼容性	Box-shadow	Canvas
兼容性	十分好	十分好	个别	个别
难易水平	略简单	简略	简略	略简单
总评估	⭐️⭐️⭐️	⭐️⭐️⭐️⭐️⭐️	⭐️⭐️⭐️⭐️	⭐️⭐️⭐️⭐️

以上所有残缺代码仓库: github.com/hua1995116/…

我顺便来介绍一下目前我看到老手疏导比拟好的几个开源我的项目。

jquery-pagewalkthrough

劣势: 手绘风，实用于特定的网站格调。

毛病: 须要依赖 jQuery。

intro.js

劣势: 领有丰盛的蒙层疏导示例，可自定义主题

毛病: 集体收费，商业须要付费。

driver.js

劣势: MIT 开源，领有与 intro.js 差不多的性能。

毛病: 示例没有 intro.js 丰盛。

至此，本文就到此结束了。

https://zhuanlan.zhihu.com/p/33508501

https://www.zhihu.com/question/20295898

http://www.woshipm.com/ucd/3506054.html

https://juejin.im/post/6844903859786104839

https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Compositing

如果我的文章有帮忙到你，心愿你也能帮忙我，欢送关注我的微信公众号 秋风的笔记 ，回复 好友 二次，可加微信并且退出交换群， 秋风的笔记 将始终陪伴你的左右。

关于前端:从王者荣耀里我学会的前端新手指引

1. 疏导页

2. 蒙层疏导

3. 气泡 / 弹窗提醒

4. 动画 / 视频疏导

5. 操作式疏导

6. 预设工作

图层拼接

z-index

box-shadow

canvas

参考

最初

Just My Socks（注册教程内含优惠码）

关于前端:从王者荣耀里我学会的前端新手指引

1. 疏导页

2. 蒙层疏导

3. 气泡 / 弹窗提醒

4. 动画 / 视频疏导

5. 操作式疏导

6. 预设工作

图层拼接

z-index

box-shadow

canvas

参考

最初

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）