2

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

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

我的目标是使用贝塞尔曲线来改变一组 DOM 元素的属性，:nth-child()以创建从一个元素到下一个元素的正弦差异（或其他曲线）。这是我当前的 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 三次贝塞尔函数。
  • 在 nth-child for 循环中正确实现该功能。
4

1 回答 1

2

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

wolfram 阿尔法图

于 2013-06-29T09:00:12.947 回答