JS SVG獲取驗證碼的玩法示例

Posted on by

介紹

之前在抖音上看的某個腦洞大開的產品設想的幾種別具特色的後端看瞭抓狂前端看瞭想打人的陰間交互效果，其中一個腦洞是讓用戶拉一下拉桿如同抽獎的形式獲取到驗證碼，本期就咱們就還原出這個交互效果看看它到底有多瘋狂。

演示

效果就是這樣喵~

Markup

<div id="app">
  <div class="code-dialog">
    <h5>獲取驗證碼</h5>
    <p>請您拉動或點擊拉桿，驗證碼即可出現哦~</p>
    <div class="code-content">
      <ul class="code-list">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <div class="submit-btn">
        <div class="btn-ball"></div>
        <div class="btn-rod"></div>
        <div class="btn-stand"></div>
      </div>
    </div>
    <div class="code-btns">
      <div>取消</div>
      <div>提交</div>
    </div>
  </div>
</div>

style

@import url("https://fonts.googleapis.com/css?family=Baloo+Bhaijaan&display=swap");
* {
  -webkit-tap-highlight-color: transparent !important;
}
#app{
  width:100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  background-color: #fff3ef;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 28' width='56' height='28'%3E%3Cpath fill='%23ed5c5c' fill-opacity='0.4' d='M56 26v2h-7.75c2.3-1.27 4.94-2 7.75-2zm-26 2a2 2 0 1 0-4 0h-4.09A25.98 25.98 0 0 0 0 16v-2c.67 0 1.34.02 2 .07V14a2 2 0 0 0-2-2v-2a4 4 0 0 1 3.98 3.6 28.09 28.09 0 0 1 2.8-3.86A8 8 0 0 0 0 6V4a9.99 9.99 0 0 1 8.17 4.23c.94-.95 1.96-1.83 3.03-2.63A13.98 13.98 0 0 0 0 0h7.75c2 1.1 3.73 2.63 5.1 4.45 1.12-.72 2.3-1.37 3.53-1.93A20.1 20.1 0 0 0 14.28 0h2.7c.45.56.88 1.14 1.29 1.74 1.3-.48 2.63-.87 4-1.15-.11-.2-.23-.4-.36-.59H26v.07a28.4 28.4 0 0 1 4 0V0h4.09l-.37.59c1.38.28 2.72.67 4.01 1.15.4-.6.84-1.18 1.3-1.74h2.69a20.1 20.1 0 0 0-2.1 2.52c1.23.56 2.41 1.2 3.54 1.93A16.08 16.08 0 0 1 48.25 0H56c-4.58 0-8.65 2.2-11.2 5.6 1.07.8 2.09 1.68 3.03 2.63A9.99 9.99 0 0 1 56 4v2a8 8 0 0 0-6.77 3.74c1.03 1.2 1.97 2.5 2.79 3.86A4 4 0 0 1 56 10v2a2 2 0 0 0-2 2.07 28.4 28.4 0 0 1 2-.07v2c-9.2 0-17.3 4.78-21.91 12H30zM7.75 28H0v-2c2.81 0 5.46.73 7.75 2zM56 20v2c-5.6 0-10.65 2.3-14.28 6h-2.7c4.04-4.89 10.15-8 16.98-8zm-39.03 8h-2.69C10.65 24.3 5.6 22 0 22v-2c6.83 0 12.94 3.11 16.97 8zm15.01-.4a28.09 28.09 0 0 1 2.8-3.86 8 8 0 0 0-13.55 0c1.03 1.2 1.97 2.5 2.79 3.86a4 4 0 0 1 7.96 0zm14.29-11.86c1.3-.48 2.63-.87 4-1.15a25.99 25.99 0 0 0-44.55 0c1.38.28 2.72.67 4.01 1.15a21.98 21.98 0 0 1 36.54 0zm-5.43 2.71c1.13-.72 2.3-1.37 3.54-1.93a19.98 19.98 0 0 0-32.76 0c1.23.56 2.41 1.2 3.54 1.93a15.98 15.98 0 0 1 25.68 0zm-4.67 3.78c.94-.95 1.96-1.83 3.03-2.63a13.98 13.98 0 0 0-22.4 0c1.07.8 2.09 1.68 3.03 2.63a9.99 9.99 0 0 1 16.34 0z'%3E%3C/path%3E%3C/svg%3E");
}
.code-dialog{
  width:360px;
  height:220px;
  background:#ffffff;
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 10px;
  box-shadow: 1px 1px 8px rgba(0,0,0,.3);
  box-sizing: border-box;
  padding: 15px 20px 42px;
  h5{
    text-align: center;
    font-size:16px;
    color:#333333;
    font-weight: 700;
    letter-spacing: .1px;
  }
  p{
    font-size: 14px;
    color: #999999;
    margin: 15px 0 20px;
    line-height: 1.3;
    letter-spacing: .6px;
  }
  .code-btns{
    position: absolute;
    bottom: 0;
    left: 0;
    width:100%;
    display: flex;
    align-items: center;
    border-top: 1px solid #f2f2f2;
    height: 42px;
    &>div{
      flex: 1;
      font-size: 14px;
      color: #999999;
      height: 100%;
      justify-content: center;
      display: flex;
      align-items: center;
      cursor: pointer;
      &:last-of-type{
        color: rgb(102, 168, 255);
        border-left: 1px solid #f2f2f2;
      }
    }
  }
  .code-content{
      display: flex;
      align-items:center;
      box-sizing: border-box;
      margin-top: 15px;
      ul{
        display: flex;
        align-items: center;
        li{
          width:45px;
          height:60px;
          position: relative;
          background-color: #ddd;
          border-radius: 3px;
          overflow: hidden;
          background-repeat: repeat-y;
          background-size:100% auto;
          background-position-y:0px;
          &:not(:last-of-type){
            margin-right: 12px;
          }
        }
      }
      .submit-btn{
        width: 70px;
        height: 70px;
        margin-left: 21px;
        top: -10px;
        display: flex;
        align-items: center;
        justify-content: center;
        position:relative;
        .btn-stand{
          width:36px;
          height:36px;
          background:#333333;
          border-radius: 50%;
          box-shadow: 0 6px #666666;
          position:absolute;
          bottom:0;
        }
        .btn-ball{
          position: absolute;
          width:20px;
          height: 20px;
          border-radius: 50%;
          background-color: #e50;
          z-index: 9;
          top: 0px;
          cursor: pointer;
        }
        .btn-rod{
          z-index: 8;
          width:5px;
          height: 36px;
          background:#e9af30;
          border-radius: 2px;
          margin-left:1px;
          position:absolute;
          bottom:18px;
          transform: scaleY(1);
          transform-origin: center bottom;
        }
        &.active{
          .btn-rod{
            animation:rod-down .32s linear;
          }
          .btn-ball{
            animation:ball-down .32s linear;
          }
        }
      }
  }
}
@keyframes rod-down{
   0%{
     transform: scaleY(1);
   }
   60%{
     transform: scaleY(0);
   }
   80%{
     transform:scaleY(-.2);
   }
   100%{
     transform:scaleY(1);
   }
}
@keyframes ball-down{
   0%{
     transform: translateY(0);
   }
   60%{
     transform: translateY(40px);
   }
   80%{
     transform: translateY(60px);
   }
   100%{
     transform: translateY(0);
   }
}

script

import anime from "https://cdn.skypack.dev/[email protected]";

(function () {
  let ball = document.querySelector(".btn-ball");
  let submit = document.querySelector(".submit-btn");
  let list = document.querySelector(".code-list");
  let isActive = false;
  let startY,
    isDown = false;
  let w = 45,
    h = 60;
  let backgroundImage = createBackgroundImage(w, h);
  let code = "";

  init();
  bindEvent();

  function bindEvent() {
    if (navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)) {
      submit.addEventListener("touchstart", _mouseDown);
      submit.addEventListener("touchmove", _mouseMove);
      submit.addEventListener("touchend", _mouseUp);
    } else {
      ball.addEventListener("mousedown", _mouseDown);
      ball.addEventListener("mousemove", _mouseMove);
      ball.addEventListener("mouseup", _mouseUp);
      ball.addEventListener("mouseout", _mouseUp);
    }
  }

  submit.addEventListener("click", action);

  function _mouseDown(e) {
    if (isActive) return;
    if (isDown) return;
    let clientY =
      e.offsetY || (e.changedTouches && e.changedTouches[0].clientY);
    startY = clientY;
    isDown = true;
  }

  function _mouseMove(e) {
    if (isActive) return;
    if (!isDown) return;
    let clientY =
      e.offsetY || (e.changedTouches && e.changedTouches[0].clientY);
    let d = clientY - startY;
    console.log(d);
    if (d > 3) {
      isDown = false;
      action();
    }
  }

  function _mouseUp(e) {
    isDown = false;
  }

  ball.addEventListener("animationend", (e) => {
    submit.classList.remove("active");
    play();
  });

  function action() {
    if (isActive) return;
    code = "";
    isActive = true;
    submit.classList.add("active");
  }

  function play() {
    let nums = createNums();
    code = nums.join("");
    [].forEach.call(list.children, (el, index) => {
      setTimeout(() => {
        let y = parseInt(el.style.backgroundPositionY || "0", 10);
        anime({
          targets: el,
          backgroundPositionY: [y, y + h * 30 + (10 - nums[index]) * h],
          loop: false, // 循環播放
          direction: "normal",
          easing: "easeOutCirc", // 時間曲線
          duration: 2000, // 播放時間2s
          autoplay: true, // 是否立即播放
          complete: (anim) => {
            if (index == 3) isActive = false;
          }
        });
      }, index * 200);
    });
  }

  function init() {
    addBackgroundImage();
  }
  function addBackgroundImage() {
    [].forEach.call(list.children, (el) => {
      el.style.backgroundImage = `url(${backgroundImage.src})`;
    });
  }

  function createBackgroundImage(w, h) {
    let canvas = document.createElement("canvas");
    let ctx = canvas.getContext("2d");
    canvas.width = ctx.width = w;
    canvas.height = ctx.height = h * 10;
    let BackgroundImage = new Array(10).fill(0);
    BackgroundImage.forEach((n, i) => {
      ctx.save();
      ctx.textAlign = "center";
      ctx.textBaseline = "middle";
      ctx.font = "bold 36px Baloo Bhaijaan";
      ctx.fillText(i, w / 2, h * i + h / 2 + 5, w);
      ctx.restore();
    });
    return convertCanvasToImage(canvas);
  }

  function convertCanvasToImage(canvas) {
    var image = new Image();
    image.src = canvas.toDataURL("image/png");
    return image;
  }

  function random(min, max) {
    return parseInt(Math.random() * (max - min + 1) + min);
  }

  function createNums(l = 4) {
    let num = random(1, 9999);
    let res = (num + "").split("");
    let len = res.length;
    if (len < l) {
      for (let i = 0; i < l - len; i++) {
        res.unshift("0");
      }
    }
    return res;
  }

})();

提前說明下，咱們僅僅實現交互效果不需要考慮後端交互驗證和安全這些，所以數字是每次拉動前端隨機生成的，也沒有加混淆和幹擾。

正文

繪制背景

通過上面的演示可以看到，背景svg雲紋的效果，那它是怎麼實現的呢？不賣關子瞭，我是用瞭一個專門生成svg背景的網站來實現的，裡面有各種各樣的svg背景可以定制顏色，然後拷貝css代碼出來就為你所用瞭。

拉桿繪制

<div class="submit-btn">
    <div class="btn-ball"></div>
    <div class="btn-rod"></div>
    <div class="btn-stand"></div>
</div>

拉桿主要分別由頭，桿，底座三個部分組成，而我們觸發事件後賦給容器應該 active 樣式，然後由他去控制頭和桿執行一段css動畫來實現其拉動的效果。

.submit-btn{
    &.active{
        .btn-rod{
            animation:rod-down .32s linear;
        }
        .btn-ball{
            animation:ball-down .32s linear;
        }
    }
}
@keyframes rod-down{
   0%{
     transform: scaleY(1);
   }
   60%{
     transform: scaleY(0);
   }
   80%{
     transform:scaleY(-.2);
   }
   100%{
     transform:scaleY(1);
   }
}
@keyframes ball-down{
   0%{
     transform: translateY(0);
   }
   60%{
     transform: translateY(40px);
   }
   80%{
     transform: translateY(60px);
   }
   100%{
     transform: translateY(0);
   }
}

至於，事件的綁定則非常容易，就說判斷鼠標點擊滑動抬起事件，看看兩點間的變化量是否大於3px，如果大於則向容器賦予 active 樣式觸發css動畫。

生成條帶

讓數字轉動之前我們先要生成一下條帶，當然我們可以直接使用圖片，但是咱們沒有設計，所以前端自己動手豐衣足食吧。就用 canvas 拼接出一個圖片數字條帶出來。

function createBackgroundImage(w, h) {
    let canvas = document.createElement("canvas");
    let ctx = canvas.getContext("2d");
    canvas.width = ctx.width = w;
    canvas.height = ctx.height = h * 10;
    let BackgroundImage = new Array(10).fill(0);
    BackgroundImage.forEach((n, i) => {
        ctx.save();
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.font = "bold 36px Baloo Bhaijaan";
        ctx.fillText(i, w / 2, h * i + h / 2 + 5, w);
        ctx.restore();
    });
    return convertCanvasToImage(canvas);
}
function convertCanvasToImage(canvas) {
    var image = new Image();
    image.src = canvas.toDataURL("image/png");
    return image;
}

在項目初始化的時候，就會執行這個方法，利用 canvas 繪制出0到9，10個數字縱向排列出來，最後用 toDataURL 方法導出圖片，賦給需要轉動區域內的做背景圖。

數字轉動

上一步操作背景圖都生成出來瞭，不難想到我們將會通過改變 backgroundPositionY 的形式來實現轉動。當然，我們還要讓動畫不停加速最後在慢慢停下來，所以要加入緩動，這裡推薦一個動畫庫 animejs ,它非常的小巧且靈活好用。

import anime from "https://cdn.skypack.dev/[email protected]";
function play() {
    let nums = createNums();
    code = nums.join("");
    [].forEach.call(list.children, (el, index) =&gt; {
        setTimeout(() =&gt; {
            let y = parseInt(el.style.backgroundPositionY || "0", 10);
            anime({
                targets: el,
                backgroundPositionY: [y, y + h * 30 + (10 - nums[index]) * h],
                loop: false, // 循環播放
                direction: "normal",
                easing: "easeOutCirc", // 時間曲線
                duration: 2000, // 播放時間2s
                autoplay: true, // 是否立即播放
                complete: (anim) =&gt; {
                    if (index == 3) isActive = false;
                }
            });
        }, index * 200);
    });
}
function createNums(l = 4) {
    let num = random(1, 9999);
    let res = (num + "").split("");
    let len = res.length;
    if (len &lt; l) {
        for (let i = 0; i &lt; l - len; i++) {
            res.unshift("0");
        }
    }
    return res;
}

先獲取到要返回來的驗證碼，我這裡用隨機數來模擬，然後遍歷那四個轉動區域，生成好 anime 動畫，其backgroundPositionY 最後的結果以剛剛獲取到的驗證碼的數字獲取到對應位置來計算得到，當然遍歷的同時為瞭效果更好，我們是用 setTimeout 定時器每隔200ms再讓開啟下一個轉動塊執行的。

以上就是JS SVG獲取驗證碼的玩法示例的詳細內容，更多關於JS SVG獲取驗證碼的資料請關註WalkonNet其它相關文章！

推薦閱讀：