math - SCSS 三次贝塞尔函数？

Question

许多前端开发人员都知道如何使用三次贝塞尔函数。我们大多数人都知道它们在动画缓动中的实用性。似乎很少有人了解三次贝塞尔函数实际上是如何工作的，以及如何创建一个函数(可能是因为这是不太有用的知识)。我正在寻找三次贝塞尔函数的 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 循环中正确实现该函数。

Answer 1

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

wolfram alpha plot