從王者榮耀里我學會的前端新手指引

發(fā)表時間：2021-3-15

發(fā)布人：葵宇科技

瀏覽次數(shù)：52

在王者的世界里，不僅僅只有快樂，還能搞學習，讓你成為快樂而又富有知識的人。這其中的功臣，這不得不說的就是它的新手指引。

為什么這么說呢？我們先來看幾張圖。

沒錯，上面的就是王者榮耀的新手引導，手把手教學，還有妲己美妙的聲音。

整個過程大約 2分鐘。它使用了多種引導方式，蒙層引導、氣泡引導、視頻引導、操作引導還有預設任務，可以說在新手引導方面，真的很"細"，用了各種各樣的花樣。但是它用了僅僅 2 分鐘的指引就讓你快速體驗到了整個產(chǎn)品的使用方式，讓你感受到打敗敵人是如此滿足，贏得一場游戲是如此簡單。你收獲了大量的快樂同時產(chǎn)生對它的依賴。

而如果說，沒有新手指引，讓一個沒有從來沒有玩過此類游戲的新人，就上手一個 5v5 的戰(zhàn)斗，在自己還沒弄懂操作，就上手實戰(zhàn)，那么新人肯定會被打的很慘，受到隊友的抱怨不說，很快會輸?shù)粢粓霰荣悾瑥亩a(chǎn)生挫敗感，覺得這個游戲垃圾，更不用說從游戲中體驗快感。

所以說新手引導是一種能讓用戶在短時間內(nèi)快速了解產(chǎn)品特色以及產(chǎn)品使用方式。

它是非常重要也是非常有必要學習的一個功能！這也是本篇文章想要介紹的重點內(nèi)容。下面就進行原理實戰(zhàn)講解

我先介紹一下常見的幾種類型新手引導效果圖。

1.引導頁

引導頁一般出現(xiàn)在首次打開APP的時候，由3-5個頁面組成。

2.蒙層引導

在產(chǎn)品的整個界面上方用一個黑色半透明蒙層進行遮罩，這種引導方式可以讓用戶聚焦了解被圈注的功能點或手勢說明。

3.氣泡/彈窗提示

在操作按鈕旁邊彈出一個氣泡提示框或者直接彈出彈窗。

4.動畫/視頻引導

用戶可以根據(jù)動態(tài)演示，很快地理解整個產(chǎn)品。

5.操作式引導

一步一步地引導你進行操作，鼓勵用戶參與其中，邊學邊用。

6.預設任務

預設任務是指在用戶進入產(chǎn)品后，自動為用戶創(chuàng)建了一些和產(chǎn)品形態(tài)相關的示例，而不是留給用戶一個空頁面。

人將降大任于斯人也，所以最近我就遇到了這樣的一個需求。不過我需要實現(xiàn)的也比較簡單，只需要實現(xiàn)蒙層引導。

今天我們就來實現(xiàn)一下這個功能。先來看一下我們目標的樣子。核心代碼大概只需要花 5 分鐘就能學會，只需 9 行 js 代碼，60 行 css 代碼。所以接著往下看吧 ~ 高亮部分會有不一樣的收獲哦 ~

主要包括三個部分: 蒙層、氣泡、高亮。

蒙層和氣泡對于很多同學來說，真的是太熟悉了。這里就只貼代碼了，沒有什么過多的可以講解，主要是利用了絕對定位。

// 蒙層實現(xiàn)
<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>
復制代碼

// 氣泡實現(xiàn)
<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>
復制代碼

圖層拼接

而這個高亮怎么實現(xiàn)呢？如何能讓蒙層中間產(chǎn)生一個空白框呢？在我所知的 CSS 屬性中并沒有相關的屬性可以實現(xiàn)這個特性，如果不能這樣實現(xiàn)。那意味著我是不是需要自己將這個高亮區(qū)塊給空出來呢，自己通過拼接的方式來實現(xiàn)。如下所示，這是我第一直覺想到的方案。

這一種方法比較傻瓜式，但是就是比較繁瑣。

z-index

z-index 屬性設定了一個定位元素及其后代元素或 flex 項目的 z-order。當元素之間重疊的時候， z-index 較大的元素會覆蓋較小的元素在上層進行顯示。

因為我們可以利用 z-index 這個特性，只要將我們目標元素的 z-index 設置成比我們的蒙層高就行。

通過圖層分解，我們可以看到，目標的元素那一行秋風的技能是處于最高層，而不是和 秋風的筆記文字處于同一層。因此采取的方案是，我們沒辦法讓蒙層在中間空出來，但是，我們可以通過z-index讓我們的目標元素置于蒙層之上，然后再在蒙層和目標元素之間加入一個白色的背景框，這樣就達到了高亮的效果。如果還看不明白可以看下圖。

有了以上的知識就差定位了，我們通過 getBoundingClientRect 屬性來獲取目標元素的大小及其相對于視口的位置。然后通過絕對定位來進行布局。以下就是這個實現(xiàn)的主要邏輯（代碼比較粗糙，主要是意思表達

<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>
復制代碼

以上就是實現(xiàn)一個蒙層引導的實現(xiàn)方案。當然這么精妙的設計也是離不開偉大的開源項目，以上就是參考了開源項目 introjs 來實現(xiàn)的。

box-shadow

這個方案除了兼容性問題(不兼容低版本ie8以及以前版本)，也是比較簡單的一個方法。來看看 box-shadow 的方法介紹。

/* x偏移量 | y偏移量 | 陰影模糊半徑 | 陰影擴散半徑 | 陰影顏色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
復制代碼

核心思路為我們可以通過設置一個比較大的陰影擴散半徑，來實現(xiàn)，再設置一個半透明的背景色。

box-shadow: 0 0 0 2000px rgba(0,0,0,.5);
復制代碼

canvas

先通過 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);
復制代碼