Question

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

编辑：我认为我需要一条贝塞尔曲线，但是正弦曲线的多项式近似可以解决这个问题，并且很容易在SCSS中完成。

我的目标是使用:nth-child()和bezier曲线更改一组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; }

我相信实现我的目标的方法是将每个步骤中的width属性乘以一个接受五个参数的三次贝塞尔函数：

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

有两件事需要解决：

查找或创建SCSS立方贝塞尔函数。
在nth-child for循环中正确实现该功能。

Answer 1

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

wolfram alpha plot

SCSS三次贝塞尔函数？

1 个答案: