svg dna解锁手机动画-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：svg dna解锁手机动画
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
    margin: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100vw;
    overflow: hidden;
}

.main-canvas {
    /* border: 1px dashed blueviolet; */
    width: 200px;
    height: 350px;
}
.social-wrapper {
    opacity: 0.7;
}

.social-wrapper svg g path {
    stroke: rgb(177, 177, 177) !important;
}
.social-wrapper svg g rect {
    stroke: rgb(177, 177, 177) !important;
}
.social-wrapper svg g circle {
    stroke: rgb(177, 177, 177) !important;
}

.socials-container {
    padding: 4px;
    position: fixed;
    top: 0;
    left: 0;
    width: 20px;
}
</style>

</head>
<body translate="no">

<canvas class="main-canvas" width="1000" height="700"></canvas>
<script>
// svgs
const fingerprintSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><title>fingerprint</title><g id="finger-print"><path d="M160.38,222.11s12,84.05-46.83,130.88" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:5px"/><path d="M158,200.5s6-38.43,43.22-37.23,42,37.23,42,37.23,3.6,32.42,3.6,45.62" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:5px"/><path d="M178.39,280.94s6.23-46.79,1.2-74.44c-4.8-26.42,37.22-31.22,40.82-6s20.41,90.05-42,175.3" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:5px"/><path d="M200,205.3S225.21,293,155.57,372.2" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:5px"/><path d="M204.8,378.2S242,321.77,245.63,266.54" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:5px"/><path d="M131.56,365s33.62-30,40.82-62.43" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:5px"/><path d="M94.34,342.18s30-25.22,39.62-54a140.18,140.18,0,0,0,6-62.44c-1.2-9.6-7.2-43.22,15.61-63.64s39.63-19.21,51.63-18" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:5px"/><path d="M227.62,148.87s90.05,40.82,3.6,226.93" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:5px"/><path d="M258.83,367.39s20.42-37.22,21.62-56.43" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:5px"/><path d="M285.25,290.55s10.81-57.63-2.4-102.06C257.63,84,105.14,111.64,117.15,213.7c4.8,31.22,2.4,37.23,1.2,43.23" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:5px"/><path d="M77.53,329s33.62-28.82,36-49.23" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:5px"/><path d="M64.32,311s28.82-20.41,31.22-46.83S93,219,94.34,198.1c1.2-19.22,10.8-50.43,39.62-75.65" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:5px"/><path d="M153.17,111.64s62.44-32.41,116.47,14.41" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:5px"/><path d="M284.05,141.66s56.43,66,4.8,211.33" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:5px"/><path d="M52.31,295.35s36-30,24-67.24c-4.81-10.8-3.6-19.21-3.6-19.21" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:5px"/><path d="M77.53,188.49C107.55,36,310.46,46.81,327.27,199.3" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:5px"/><path d="M329.68,222.11S336.88,287,318.87,329" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:5px"/><path d="M242.76,65.48c71.31,21.73,130.11,96.81,107.33,222.67" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:5px"/><path d="M42.71,276.14s16.81-12,12-44.43c-4.8-14.4-1.2-38.42-1.2-38.42,14.39-100.7,94.14-144,168-132.66" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:5px"/><path d="M298.91,66.41A170.26,170.26,0,0,1,370.5,205.3c0,1.83,0,3.65-.09,5.47" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:5px"/><path d="M61,106.55A170.64,170.64,0,0,1,276.52,52.89" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:5px"/><path d="M36,252.13A171.12,171.12,0,0,1,49,126.05" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:5px"/></g></svg>`;
const phoneSvg = `<svg id="phone" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 683 1333"><title>phone-screen</title><path id="outer-path" d="M111.31,1309.27c-50.43,0-91.31-42.08-91.31-94L19.69,114.5c0-51.91,40.89-94,91.32-94H565c50.43,0,91.31,42.09,91.31,94L656,1215.27c0,51.92-40.89,94-91.32,94Z" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:4px"/><path d="M619,115.5c0-.17,0-.33,0-.5,0-31.2-26-56.5-58-56.5H508s-7,1-10,4-3,4-3,10-9,32-30,32H212c-21,0-30-26-30-32s0-7-3-10-10-4-10-4H119c-32,0-58,25.3-58,56.5,0,.17,0,.33,0,.5v1102c0,.17,0,.33,0,.5,0,31.2,26,56.5,58,56.5H561c32,0,58-25.3,58-56.5,0-.17,0-.33,0-.5Z" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:4px"/><circle cx="408" cy="73.5" r="11" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:4px"/><rect x="300" y="68.5" width="80" height="11" rx="5.5" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:4px"/></svg>`;
const fingerASvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 418 865"><title>finger-a</title><g id="finger-a"><path d="M192.33,238.36s29.38,17.34,68.57,8.09" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:4px"/><path d="M192.33,105.42s10.88,25.43,39.18,26.59S274,100.8,275,93.86s2.18-16.18,2.18-16.18S259.81,53.4,231.51,54.56s-37,20.8-37,20.8Z" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:4px"/><path d="M158.58,475.34s55.51,1.15,71.84,13.87,35.92-13.87,35.92-13.87" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:4px"/><path d="M188,423.32s23.95-1.16,31.57,15" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:4px"/><path d="M255.45,461.47s-45.71-12.72-52.24-5.78" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:4px"/><path d="M211.92,391s43.53,3.47,49,43.93" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:4px"/><path d="M255,808.5l12.43-97.34s35.91-228.89,35.91-271.66S299,141.26,296.81,119.29,283.75,41.84,238,36.06s-55.51,34.68-57.69,55.49-17.41,209.23-18.5,230S140.08,433.72,139,460.31s-27.21,150.28-44.62,178" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:4px"/></g></svg>`;
const fingerBSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 418 865"><title>finger-b</title><g id="finger-b"><path d="M228.5,851.5s29-194,42-236,48-210,51-258,22-227,7-262-42-49-59-46-33,18-33,18l-32,134s-4,29-6,50-40,141-40,141-20,35-27,67-48,173-70,219" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:4px"/><path d="M197.5,251.5s26,6,35,0" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:4px"/><path d="M146.5,485.5s47,32,66,13" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:4px"/><path d="M164.5,455.5s25,27,51,14" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:4px"/><path d="M172.5,422.5s-23,20-19,45" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:4px"/><path d="M242.5,62.57s37,.93,52,26.93l-5,23s-11,24-40,24S221,132.37,221,132.37" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:4px"/></g></svg>`;
const fingerCSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 418 865"><title>finger-c</title><g id="finger-c"><path d="M186.14,851.73S231.86,700,232.83,692.2,350.54,375.08,351.51,291.42c0,0,45.72-122.57,37-180.93s-34.05-60.31-34.05-60.31S321.36,40.45,312.6,55s-28.21,73-28.21,73-40.85,107-39.88,113.81c0,0-52.53,89.5-67.12,136.19,0,0-21.4,25.29-30.16,42.8s-13.62,39.88-13.62,43.77S45.09,666.91,28.55,682.47" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:4px"/><path d="M138.48,469.44s20.42,19.45,54.47,8.75" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:4px"/><path d="M160.85,446.09s10.7,11.67,23.35,11.67" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:4px"/><path d="M172.52,404.26s-21.4,33.08-20.42,53.5" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:4px"/><path d="M250.34,242.78s18.49-2.91,26.27,1.95" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:4px"/><path d="M284.39,128s49.61,1,64.2-41.83c0,0-9.83-24.74-36-27.93" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:4px"/></g></svg>`;
const lockSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><title>lock</title><g id="lock"><path d="M299,317c0,36-30,33-30,33H124c-26,0-25-33-25-33V217s-1-33,25-33H269s30-3,30,33"/><path d="M200,65a79,79,0,0,0-79,79v64h29V144a50,50,0,0,1,100,0V313h29V144A79,79,0,0,0,200,65Z"/></g></svg>`;

// colors
const lightColors = {
  bg: "white",
  outline: "black",
  fingerprint: "black" };


const darkColors = {
  bg: "black",
  outline: "white",
  fingerprint: "red" };


const canvas = document.querySelector(".main-canvas");
const canvas2 = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const ctx2 = canvas2.getContext("2d");

function main() {
  let resp = computeRes();
  const glitchManager = new GlitchManager(resp);
  let textManager = new TextManager(resp, ["Setup DNA Unlock"]);

  let stateIndex = 0;
  const createState = (id, time) => ({ id, time });
  const states = [
  createState("fadein", 2500),
  createState("1stinstruction", 500),
  createState("finger-hold", 2000),
  createState("finger-off", 500),
  createState("needles", 3600),
  createState("glitch-beginning", 250),
  createState("demonic-scrawl", 6000),
  createState("lock", 500),
  createState("unlock", 400),
  createState("again?", 4000)];


  function onScreenChange() {
    .........完整代码请登录后点击上方下载按钮下载查看