CSS でベジェ曲線の実装を反転する方法

まずは、以前書いた CSS カルーセルアニメーション効果を見てみましょう。アニメーションの遷移をスムーズにするために、animation-timing-function 属性で CSS が提供するさまざまなキーワードを使用せず、cubic-bezier 関数を使用しました。

ベッセル関数は最初はわかりにくいように思えるかもしれませんが、正しく使用すると、アニメーションのユーザー エクスペリエンスに優れた感触を追加できます。

このカルーセルを構築しているときに、あるページに表示されているベジェ関数を追加すると、前のページの非表示のベジェ関数が反転していることに気付きました。ベジェ曲線を作成して反転するのは難しいように思えるかもしれませんが、実際には非常に簡単なので、この投稿を共有する価値があると思いました。

イージングの基本を理解する

まず、イージングという言葉は、タイムライン上の要素アニメーションの加速と減速のリズムを説明するために使用されます。これをグラフとしてプロットすると、x 軸は時間、y 軸はアニメーションの進行状況になります。線形は加速も減速もないグラフ（常に同じ速度で動く）で、グラフ上では直線で表されます。

非線形イージングにより、アニメーションがより自然でリアルになります。 CSS では、トランジションやアニメーションにさまざまなイージング プロパティを適用できます。これらの値は、transition-timing-function または animation-timing-function プロパティで設定できます。設定できるキーワードは次の 5 つです。

• 線形 – すでに上で紹介した
• イーズイン – アニメーションはゆっくりと始まり、進行するにつれて速度が上がります。
• イーズアウト – アニメーションはすぐに始まり、最後に遅くなります。
• easy-in-out – アニメーションはゆっくり始まり、途中でスピードが上がり、最後にスピードが下がります。
• easy – デフォルト値。ease-in-out アニメーション プロセスとは逆になります。

3次ベジェを理解する

上記のキーワード値のいずれもアニメーションに適していない場合は、cubic-bezier 関数を使用してカスタム カーブを作成できます。次に例を示します。

.my-要素{
  アニメーション名: スライド;
  アニメーション期間: 3秒;
  アニメーションタイミング関数: 立方ベジェ(0.45, 0.25, 0.60, 0.95);
}

これらのプロパティは、次のように 1 つに省略できます。

.my-要素{
  アニメーション: スライド 3s cubic-bezier(0.45, 0.25, 0.60, 0.95);
}

3 次ベジェ関数には 4 つの値があることに気づくでしょう。これら 4 つの値は、曲線を描画するために必要な 2 組の座標です。これらの座標は何を意味するのでしょうか? Illustrator を使用したことがあるなら、曲線のサイズと方向を制御するベクター ポイントはおなじみでしょう。これらは、3 次ベジェ関数を使用して曲線を描くために必要なポイントです。

ベジェ曲線の背後にある数学をすべて知る必要はありません。なぜなら、LeaVerou の cubic-bezier.com など、ベジェ曲線を視覚的に作成し、その座標点の値をコピーできる便利なツールを大物が作成してくれたからです。カルーセル効果のベジェ曲線はこのツールを使用して作成され、次のようになります。

ここで、必要な 2 つのポイント、cubic-bezier(x1, y1, x2, y2) を確認できます。

順方向と逆方向の両方にイージングを適用する

上記のカルーセルには両方向にアニメーションが適用されています。左矢印をクリックすると、現在のアイテムが右にスライドして表示されなくなり、次のアイテムが左にスライドします。右矢印をクリックすると、その逆のことが起こります。当初の想定では、次のように、アイテムが反対方向にスライドするようにアニメーションを単純に反転できると考えていました。

.my-element--反転{
  アニメーション: スライド 3 秒 立方ベジェ (0.45, 0.25, 0.60, 0.95) 反転;
}

ここで問題があります。アニメーションに反転を追加すると、イージング カーブも反転します。つまり、アニメーションは一方向では問題なく見えますが、反対方向では間違って見えます。

以下のデモでは、最初のボックスには正方向のアニメーションが表示され、2 番目のボックスには逆方向が追加された後の動作が表示されます。

これら 2 つのアニメーションの感触がまったく異なることがわかります。最初のボックスは最初はスピードが上がり、アニメーションが進むにつれて徐々にスピードが落ちますが、2 番目のボックスは非常にゆっくりと始まり、その後スピードが上がってから停止します。

この問題を解決するには 2 つの方法があります。

• アニメーションを表示するための新しいキーフレーム アニメーションを作成し、同じイージングに設定します。単純なアニメーションであれば問題ありませんが、複雑なアニメーションに遭遇した場合はどうなるでしょうか?逆アニメーションを作成するには、より多くの作業が必要になり、エラーが発生しやすくなります。
• 同じキーフレームアニメーションを使用し（animation-direction:reverse を設定して）、ベジェ曲線を反転することで、両方向で同じイージング効果を実現できます。この方法は難しくありません。

ベジェ曲線を反転すると、座標軸で図形全体が 180 度回転します。

反転した点の座標は、2 つの座標点を交換し、それぞれの値から 1 を引くという簡単な数学的計算によって取得できます。

たとえば、正方向の座標はx1, y1, x2, y2です。

次に、反対方向の座標は次の式で得られます: (1 - x2), (1 - y2), (1 - x1), (1 - y1)

以下のデモでは、3 番目のボックスが目的の効果です。要素は反対方向にスライドしますが、正の方向と同じアニメーション カーブを持ちます。

逆ベジェ曲線を計算する方法を見てみましょう。

CSSカスタムプロパティを使用して逆曲線を計算する

CSS カスタム プロパティを使用して新しい曲線を計算できます。まず、各値を変数に割り当てます。

：根 {
  --x1: 0.45;
  --y1: 0.25;
  --x2: 0.6;
  --y2: 0.95;
  
  --originalCurve: 立方ベジェ曲線(var(--x1), var(--y1), var(--x2), var(--y2));
}

これらの変数を使用して新しい値を計算できます。

：根 {
  --reversedCurve: cubic-bezier(calc(1 - var(--x2)), calc(1 - var(--y2)), calc(1 - var(--x1)), calc(1 - var(--y1)));
}

ここで、最初の変数セットに変更を加えると、逆曲線ポイントが自動的に計算されます。コードを検査およびデバッグするときに問題を見つけやすくするために、これらの新しい値を独自の変数に割り当てるのが好きです。

：根 {
  /* 元の値を転送 */
  --x1: 0.45;
  --y1: 0.25;
  --x2: 0.6;
  --y2: 0.95;
  
  --originalCurve: 立方ベジェ曲線(var(--x1), var(--y1), var(--x2), var(--y2));
  
  /* 逆計算値 */
  --x1-r: calc(1 - var(--x2));
  --y1-r: calc(1 - var(--y2));
  --x2-r: calc(1 - var(--x1));
  --y2-r: calc(1 - var(--y1));
  
  --reversedCurve: 立方ベジェ曲線(var(--x1-r), var(--y1-r), var(--x2-r), var(--y2-r));
}

残っているのは、新しい曲線を逆アニメーションに適用することだけです。

.my-element--反転{
  アニメーション: スライド 3 秒 var(--reversedCurve) 反転;
}

これをより直感的かつ視覚的に行うために、ベジェ曲線の逆数値を計算する小さなツールを作成しました。元の座標値を入力すると、自動的に逆曲線の値を取得します。逆3次ベジェツール

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。