js基于div丝滑实现贝塞尔曲线

下面就是详细讲解“js基于div丝滑实现贝塞尔曲线”的完整攻略。

1. 什么是贝塞尔曲线？

贝塞尔曲线是一种使用平滑曲线连接任意多个点的数学函数，并且通过更改这些点的锚点信息来改变曲线的特性。在前端网站开发中，贝塞尔曲线经常被用来创建各种交互效果，如动画、滑动、转场等。

2. 为什么要基于div实现贝塞尔曲线？

虽然在SVG和canvas中也可以实现贝塞尔曲线，但是使用DIV实现贝塞尔曲线具有以下优势：

灵活性：DIV可以随时更改其大小、位置、旋转等，并且可以嵌套在其他元素中。
易于实现：撰写DIV元素的CSS代码比SVG和canvas简单得多，因此比较容易掌握。
性能：DIV和CSS比使用SVG和canvas更加轻量，因此有更高的性能。

3. 实现过程

下面将逐步说明如何基于DIV实现贝塞尔曲线。您将用到的工具和技术是HTML、CSS和JavaScript。

第一步：在HTML中添加DIV元素

首先，您需要在HTML中添加一个DIV元素，它将代表曲线的起点和终点。在此示例中，我们将使用一个带有唯一ID的DIV元素来表示曲线：

<div id="curve"></div>

第二步：为DIV元素设置样式

接下来，您需要在CSS中设置DIV元素的样式，以便它不仅看起来像曲线，而且可以在其他元素中嵌套：

#curve {
  position: absolute;
  width: 300px;
  height: 3px;
  background: black;
  transform-origin: left center;
  transform: rotate(45deg);
}

在此示例中，曲线DIV元素的样式包括位置、大小、背景颜色和旋转属性。

第三步：使用JavaScript实现贝塞尔曲线

在JavaScript中，使用贝塞尔公式计算曲线上的点，在这里您需要使用贝塞尔曲线的三个锚点：起点、终点和中间控制点。

const curve = document.querySelector('#curve');
const points = [
  [0, 0],
  [150, 150],
  [300, 0],
];
for (let i = 0; i <= 1; i += 0.01) {
  const [x1, y1] = lerp(points[0], points[1], i);
  const [x2, y2] = lerp(points[1], points[2], i);
  const [x, y] = lerp([x1, y1], [x2, y2], i);
  curve.style.left = `${x}px`;
  curve.style.top = `${y}px`;
}
function lerp([x1, y1], [x2, y2], ratio) {
  return [x1 + (x2 - x1) * ratio, y1 + (y2 - y1) * ratio];
}

在此示例中，lerp（线性插值）函数用于计算曲线上的点，该点在三个锚点之间。在第三步中，我们使用回调函数遍历点的范围，然后按比例计算每个中间点。

第四步：用CSS动画过渡曲线

最后，您可以使用CSS transition动画样式来过渡曲线。通过更改CSS属性，可以创建启动和停止CSS动画的JavaScript函数。

#curve {
  transition: transform 1s ease;
}

在JavaScript中，setParameter（）函数用于设置曲线动画参数。 startAnimation（）和stopAnimation（）函数用于开始和停止CSS动画：

function setParameter(curve, scale, rotate) {
  curve.style.transform = `scale(${scale}) rotate(${rotate}deg)`;
}
function startAnimation(curve) {
  curve.classList.add('animate');
}
function stopAnimation(curve) {
  curve.classList.remove('animate');
}

在示例站点中，我们使用两条贝塞尔曲线实现了原始页面和目标页面之间的过渡效果。他们的代码类似于：

.animate {
  animation: curveMove 1s ease-in forwards;
}
@keyframes curveMove {
  0% {
    transform: scale(0) rotate(45deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

在JavaScript中，我们使用mousedown和mouseup事件处理程序在点击时启动和停止CSS动画。

document.addEventListener('mousedown', () => startAnimation(curve));
document.addEventListener('mouseup', () => stopAnimation(curve));

现在，在您的HTML页面上点击曲线DIV元素，您将看到一种平滑的动画效果，类似于弹簧般的运动。

示例1：在响应式设计中使用曲线

在这个示例中，我们使用基本的曲线和CSS过渡动画添加了一个响应式设计功能。页面布局包含一个文本框区域和一个曲线DIV元素。在响应的变化中，曲线DIV元素会自适应网格并显示反应式设计布局。

代码：

<div class="container">
  <div class="form">
    <h1>Login Form</h1>
    <div class="input-group">
      <input type="text" placeholder="Username">
    </div>
    <div class="input-group">
      <input type="password" placeholder="Password">
    </div>
    <div class="input-group">
      <button type="submit">
        Login
      </button>
    </div>
  </div>
  <div class="curve" id="curve"></div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: center;
  justify-content: center;
}
.form {
  text-align: center;
}
.input-group {
  margin-bottom: 15px;
}
input[type='text'],
input[type='password'],
button[type='submit'] {
  width: 100%;
  padding: 10px;
  border: none;
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
}
button[type='submit'] {
  background-color: black;
  color: white;
  padding: 15px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}
.curve {
  position: relative;
  height: 3px;
  background-color: black;
  transform: rotate(45deg);
  transform-origin: left center;
  transition: transform 0.3s ease;
  margin-right: -20px;
}

const curve = document.querySelector('#curve');
document.addEventListener('mousedown', () => {
  curve.classList.add('animate');
});
document.addEventListener('mouseup', () => {
  curve.classList.remove('animate');
});

示例2：在滑块中使用曲线

在此示例中，我们使用createElement（）和append（）方法创建滑块控件，该控件使用贝塞尔曲线作为跟踪条。用户可以通过拖动滑块旁边的曲线来更改滑块的值。

代码：

<div id="slider" class="slider">
    <div class="track">
        <div class="thumb"></div>
        <div class="curve">
            <div id="curve"></div>
        </div>
    </div>
</div>

.slider {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}
.track {
  overflow: hidden;
  height: 10px;
  border-radius: 5px;
  position: relative;
}
.thumb {
  position: absolute;
  width: 24px;
  height: 24px;
  top: -7px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.1), inset 0 -0.25em rgba(255, 255, 255, 0.5),
    inset 0.25em 0.25em rgba(0, 0, 0, 0.15), inset -0.5em 0.5em rgba(255, 255, 255, 0.3),
    inset 0 -0.25em rgba(0, 0, 0, 0.4);
  z-index: 1;
  left: -10px;
  cursor: pointer;
}
.curve {
  position: absolute;
  top: -2.5px;
  left: 0;
  width: 100%;
  height: 8px;
  overflow: hidden;
}
#curve {
  position: absolute;
  width: 300px;
  height: 3px;
  background: black;
  transform-origin: left center;
  transform: rotate(45deg);
  cursor: pointer;
}

const curve = document.querySelector('#curve');
const thumb = document.querySelector('.thumb');

document.addEventListener('mousedown', () => {
  curve.classList.add('animate');
});

document.addEventListener('mouseup', () => {
  curve.classList.remove('animate');
});

const slider = document.querySelector('#slider');
slider.addEventListener('mouseenter', () => {
  curve.style.transition = 'none';
  thumb.style.transition = 'none';
});

slider.addEventListener('mouseleave', () => {
  curve.style.transition = 'transform 1s ease';
  thumb.style.transition = 'transform 0.2s ease';
});

curve.addEventListener('mousemove', (e) => {
  const width = curve.clientWidth;
  const { left } = curve.getBoundingClientRect();
  const position = (e.clientX - left) / width;
  position = Math.max(0, Math.min(1, position));
  thumb.style.transform = `translateX(${position * 100 - 50}%))`;
});