2

多くのフロントエンド開発者は、3 次ベジエ関数の使い方を知っています。私たちのほとんどは、アニメーションのイージングでの有用性について知っています。3 次ベジエ関数が実際にどのように機能するか、またどのように作成するかを理解している人は少ないようです (おそらく、それは有用な知識が少ないためです)。3 次ベジエ関数の 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; }

私の目標を達成する方法は、各ステップの width プロパティに、5 つのパラメーターを受け入れる 3 次ベジエ関数を掛けることだと思います。

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

次の 2 つのことを解決する必要があります。

  • SCSS キュービック ベジエ関数を検索または作成します。
  • その関数を n 番目の子の for ループに適切に実装します。
4

1 に答える 1