從王者榮耀裏我學會的(de)前端新手指引

發表時(shí)間：2021-3-15

發布人(rén)：融晨科技

浏覽次數：52

在(zài)王者的(de)世界裏，不(bù)僅僅隻有快樂，還能搞學習，讓你成爲(wéi / wèi)快樂而(ér)又富有知識的(de)人(rén)。這(zhè)其中的(de)功臣，這(zhè)不(bù)得不(bù)說(shuō)的(de)就(jiù)是(shì)它的(de)新手指引。

爲(wéi / wèi)什麽這(zhè)麽說(shuō)呢？我們先來(lái)看幾張圖。

沒錯，上(shàng)面的(de)就(jiù)是(shì)王者榮耀的(de)新手引導，手把手教學，還有妲己美妙的(de)聲音。

整個(gè)過程大(dà)約 2分鍾。它使用了(le／liǎo)多種引導方式，蒙層引導、氣泡引導、視頻引導、操作引導還有預設任務，可以(yǐ)說(shuō)在(zài)新手引導方面，真的(de)很"細"，用了(le／liǎo)各種各樣的(de)花樣。但是(shì)它用了(le／liǎo)僅僅 2 分鍾的(de)指引就(jiù)讓你快速體驗到(dào)了(le／liǎo)整個(gè)産品的(de)使用方式，讓你感受到(dào)打敗敵人(rén)是(shì)如此滿足，赢得一場遊戲是(shì)如此簡單。你收獲了(le／liǎo)大(dà)量的(de)快樂同時(shí)産生對它的(de)依賴。

而(ér)如果說(shuō)，沒有新手指引，讓一個(gè)沒有從來(lái)沒有玩過此類遊戲的(de)新人(rén)，就(jiù)上(shàng)手一個(gè) 5v5 的(de)戰鬥，在(zài)自己還沒弄懂操作，就(jiù)上(shàng)手實戰，那麽新人(rén)肯定會被打的(de)很慘，受到(dào)隊友的(de)抱怨不(bù)說(shuō)，很快會輸掉一場比賽，從而(ér)産生挫敗感，覺得這(zhè)個(gè)遊戲垃圾，更不(bù)用說(shuō)從遊戲中體驗快感。

所以(yǐ)說(shuō)新手引導是(shì)一種能讓用戶在(zài)短時(shí)間内快速了(le／liǎo)解産品特色以(yǐ)及産品使用方式。

它是(shì)非常重要(yào / yāo)也(yě)是(shì)非常有必要(yào / yāo)學習的(de)一個(gè)功能！這(zhè)也(yě)是(shì)本篇文章想要(yào / yāo)介紹的(de)重點内容。下面就(jiù)進行原理實戰講解

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

1.引導頁

引導頁一般出(chū)現在(zài)首次打開APP的(de)時(shí)候，由3-5個(gè)頁面組成。

2.蒙層引導

在(zài)産品的(de)整個(gè)界面上(shàng)方用一個(gè)黑色半透明蒙層進行遮罩，這(zhè)種引導方式可以(yǐ)讓用戶聚焦了(le／liǎo)解被圈注的(de)功能點或手勢說(shuō)明。

3.氣泡/彈窗提示

在(zài)操作按鈕旁邊彈出(chū)一個(gè)氣泡提示框或者直接彈出(chū)彈窗。

4.動畫/視頻引導

用戶可以(yǐ)根據動态演示，很快地(dì / de)理解整個(gè)産品。

5.操作式引導

一步一步地(dì / de)引導你進行操作，鼓勵用戶參與其中，邊學邊用。

6.預設任務

預設任務是(shì)指在(zài)用戶進入産品後，自動爲(wéi / wèi)用戶創建了(le／liǎo)一些和(hé / huò)産品形态相關的(de)示例，而(ér)不(bù)是(shì)留給用戶一個(gè)空頁面。

人(rén)将降大(dà)任于(yú)斯人(rén)也(yě)，所以(yǐ)最近我就(jiù)遇到(dào)了(le／liǎo)這(zhè)樣的(de)一個(gè)需求。不(bù)過我需要(yào / yāo)實現的(de)也(yě)比較簡單，隻需要(yào / yāo)實現蒙層引導。

今天我們就(jiù)來(lái)實現一下這(zhè)個(gè)功能。先來(lái)看一下我們目标的(de)樣子(zǐ)。核心代碼大(dà)概隻需要(yào / yāo)花 5 分鍾就(jiù)能學會，隻需 9 行 js 代碼，60 行 css 代碼。所以(yǐ)接着往下看吧 ~ 高亮部分會有不(bù)一樣的(de)收獲哦 ~

主要(yào / yāo)包括三個(gè)部分: 蒙層、氣泡、高亮。

蒙層和(hé / huò)氣泡對于(yú)很多同學來(lái)說(shuō)，真的(de)是(shì)太熟悉了(le／liǎo)。這(zhè)裏就(jiù)隻貼代碼了(le／liǎo)，沒有什麽過多的(de)可以(yǐ)講解，主要(yào / yāo)是(shì)利用了(le／liǎo)絕對定位。

// 蒙層實現
<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'>
  秋風的(de)技能
div>
複制代碼

圖層拼接

而(ér)這(zhè)個(gè)高亮怎麽實現呢？如何能讓蒙層中間産生一個(gè)空白框呢？在(zài)我所知的(de) CSS 屬性中并沒有相關的(de)屬性可以(yǐ)實現這(zhè)個(gè)特性，如果不(bù)能這(zhè)樣實現。那意味着我是(shì)不(bù)是(shì)需要(yào / yāo)自己将這(zhè)個(gè)高亮區塊給空出(chū)來(lái)呢，自己通過拼接的(de)方式來(lái)實現。如下所示，這(zhè)是(shì)我第一直覺想到(dào)的(de)方案。

這(zhè)一種方法比較傻瓜式，但是(shì)就(jiù)是(shì)比較繁瑣。

z-index

z-index 屬性設定了(le／liǎo)一個(gè)定位元素及其後代元素或 flex 項目的(de) z-order。當元素之(zhī)間重疊的(de)時(shí)候， z-index 較大(dà)的(de)元素會覆蓋較小的(de)元素在(zài)上(shàng)層進行顯示。

因爲(wéi / wèi)我們可以(yǐ)利用 z-index 這(zhè)個(gè)特性，隻要(yào / yāo)将我們目标元素的(de) z-index 設置成比我們的(de)蒙層高就(jiù)行。

通過圖層分解，我們可以(yǐ)看到(dào)，目标的(de)元素那一行秋風的(de)技能是(shì)處于(yú)最高層，而(ér)不(bù)是(shì)和(hé / huò) 秋風的(de)筆記文字處于(yú)同一層。因此采取的(de)方案是(shì)，我們沒辦法讓蒙層在(zài)中間空出(chū)來(lái)，但是(shì)，我們可以(yǐ)通過z-index讓我們的(de)目标元素置于(yú)蒙層之(zhī)上(shàng)，然後再在(zài)蒙層和(hé / huò)目标元素之(zhī)間加入一個(gè)白色的(de)背景框，這(zhè)樣就(jiù)達到(dào)了(le／liǎo)高亮的(de)效果。如果還看不(bù)明白可以(yǐ)看下圖。

有了(le／liǎo)以(yǐ)上(shàng)的(de)知識就(jiù)差定位了(le／liǎo)，我們通過 getBoundingClientRect 屬性來(lái)獲取目标元素的(de)大(dà)小及其相對于(yú)視口的(de)位置。然後通過絕對定位來(lái)進行布局。以(yǐ)下就(jiù)是(shì)這(zhè)個(gè)實現的(de)主要(yào / yāo)邏輯（代碼比較粗糙，主要(yào / yāo)是(shì)意思表達

<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>秋風的(de)筆記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'>
            秋風的(de)技能
        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>
複制代碼

以(yǐ)上(shàng)就(jiù)是(shì)實現一個(gè)蒙層引導的(de)實現方案。當然這(zhè)麽精妙的(de)設計也(yě)是(shì)離不(bù)開偉大(dà)的(de)開源項目，以(yǐ)上(shàng)就(jiù)是(shì)參考了(le／liǎo)開源項目 introjs 來(lái)實現的(de)。

box-shadow

這(zhè)個(gè)方案除了(le／liǎo)兼容性問題(不(bù)兼容低版本ie8以(yǐ)及以(yǐ)前版本)，也(yě)是(shì)比較簡單的(de)一個(gè)方法。來(lái)看看 box-shadow 的(de)方法介紹。

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

核心思路爲(wéi / wèi)我們可以(yǐ)通過設置一個(gè)比較大(dà)的(de)陰影擴散半徑，來(lái)實現，再設置一個(gè)半透明的(de)背景色。

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

canvas

先通過 canvas 繪制出(chū)全屏的(de)半透明遮罩，然後繪制出(chū)高亮部分，通過 globalCompositeOperation 中的(de) 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);
複制代碼