Question

我想为我的画布菜单背景设置动画。点击菜单按钮，我希望淡出菜单，带有一点视差效果。

我创造了一个小提琴DEMO

我已尝试使用'requestAnimationFrame'，但我不明白这种方法。它应该看起来像this示例中的菜单。但他们的代码我真的不明白......

抱歉，谢谢你的帮助。

My current JS
function drawCanvas() {
    var $canvas = document.getElementById('nav-bg');
    var windowH = window.innerHeight;

    const fillColor = '#00ffcd';
    const ctx = $canvas.getContext('2d');

    $canvas.height = windowH;
    $canvas.width = $canvas.width;

    ctx.fillStyle = fillColor;
    ctx.beginPath();
    ctx.moveTo(550, 0);
    ctx.lineTo(550, windowH);
    ctx.lineTo(0, windowH);
    ctx.lineTo(125, 0);
    ctx.closePath();
    ctx.fill();
}

drawCanvas();

Answer 1

虽然我在德国，但他们的页面下载（并执行）的速度非常慢。这就是为什么我没有查看他们的代码，只是创建了类似于他们的东西。

我在以下代码段中更改了一些内容（SCSS到CSS）。此外，再次单击该按钮时菜单不会折叠。我相信你可以弄清楚如何做到这一点。

此外，我使用了window.requestAnimationFrame：

const canvas = document.getElementById('nav-bg');
const ctx = canvas.getContext('2d');
const fillColor = '#00ffcd';

const firstStepDuration = 500; // the first step is until the direction of the border changes
const firstStepWidth = 125; // how far should the first step go?
const secondStepDuration = 500;
const secondStepWidth = 250;

let startTime;

function draw () {
  const now = Date.now();
  const time = now - startTime; // time since button click
  const height = canvas.height = window.innerHeight;
  ctx.fillStyle = fillColor;
  
  if (time < firstStepDuration) {
    ctx.beginPath();
    ctx.moveTo(550, 0);
    ctx.lineTo(550, height);
    ctx.lineTo(firstStepWidth * time / firstStepDuration, height);
    ctx.lineTo(time / firstStepDuration * firstStepWidth - firstStepWidth, 0);
    ctx.closePath();
    ctx.fill();
  } else {
    ctx.beginPath();
    ctx.moveTo(550, 0);
    ctx.lineTo(550, height);
    ctx.lineTo(firstStepWidth, height);
    ctx.lineTo((time - firstStepDuration) / secondStepDuration * secondStepWidth, 0);
    ctx.closePath();
    ctx.fill();
  }
  
  if (time < firstStepDuration + secondStepDuration) {
    // call draw again in the next animation frame
    window.requestAnimationFrame(draw);
  }
};

document.querySelector('.nav-button').addEventListener('click', function () {
  startTime = Date.now();
  draw();
});

.nav-button {
    background-color: #00ffcd;
    border: 0;
    cursor: pointer;
    float: left;
    height: 60px;
    outline: 0;
    padding: 0;
    position: fixed;
    left: 25px;
    top: 25px;
    width: 60px;
    z-index: 99999;
}

span.icon-bar {
  background-color: black;
  display: block;
  height: 5px;
  margin-left: 15px;
  margin-top: 5px;
  width: 30px;
}

span.icon-bar:first-child {
  margin-top: 0;
}

.nav-button:hover > span.icon-bar.middle {
  margin-left: 10px;
}

#navigation {
  backface-visibility: hidden;
  bottom: 0;
  display: block;
  height: 100%;
  position: fixed;
  left: 0;
  right: 0;
  z-index: 500;
}

#nav-bg {
  position: relative;
  width: 100%;
  height: 100%;
  background-size: 100% auto;
  background-position: center center;
}

<header>
  <button class="nav-button">
    <span class="icon-bar top"></span>
    <span class="icon-bar middle"></span>
    <span class="icon-bar bottom"></span>
  </button>
</header>
<div id="navigation">
  <canvas id="nav-bg" width="550" height="750"></canvas>
</div>

如果您想进一步解释，请随时提问！

动画画布点

1 个答案: