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