Math SCSS三次贝塞尔函数？

许多前端开发人员知道如何使用立方贝塞尔函数。我们大多数人都知道它们在动画中的作用。似乎很少有人了解三次贝塞尔函数实际上是如何工作的，以及如何创建一个（可能是因为这不是很有用的知识）。我正在寻找一个立方贝塞尔函数的SCSS端口，但似乎找不到，所以我正在尝试制作一个

编辑：我想我需要一条贝塞尔曲线，但正弦曲线的多项式近似就可以做到这一点，而且在SCSS中很容易实现

我的目标是使用

：nth-child（）

和贝塞尔曲线来改变一组DOM元素的属性，以创建一个元素到下一个元素的正弦差（或其他曲线）。这是我当前的SCSS代码，它将创建一个元素到下一个元素的线性差异：

$steps: 4;

.class {
    @for $i from 1 through $steps {
        &:nth-child(#{$steps}n + #{$i}) {
            $width: 100 / $steps * $i;
            width: $width+em;
        }
    }
}

这将编译成CSS，如下所示：

.class:nth-child(4n+1) { width: 25em; }
.class:nth-child(4n+2) { width: 50em; }
.class:nth-child(4n+3) { width: 75em; }
.class:nth-child(4n+4) { width: 100em; }

我相信实现我的目标的方法是将每一步的宽度属性乘以接受五个参数的立方贝塞尔函数：

@function cubic-bezier (x1, y1, x2, y2, epsilon) {
    // Epsilon is the width property at a step in the for loop.
}

有两件事需要解决：

• 查找或创建SCSS立方贝塞尔函数
• 在第n个子for循环中正确实现该函数

---

似乎您不需要贝塞尔曲线，而是需要一些平滑的曲线，在某个时间间隔内具有正弦特性。如果您不能在代码中使用Sin函数，请尝试简单的多项式近似。例如，函数20*x*（x-0.5）*（x-1）看起来像间隔为0..1的一个周期的窦

---

是的，看起来你是对的。我不需要贝塞尔曲线，因为多项式正弦近似就可以做到这一点。这是一个例子。非常感谢。顺便说一句，指南针有一个

sin（）

功能：