3次ベジェのイージング計算
CSS形式の3次ベジェ時間曲線を指定進捗で評価し、曲線パラメータ、局所勾配、進捗グラフを求めます。
計算結果
結果
—
計算手順
手順を1つずつ、またはまとめて表示できます。現在の入力値を使った計算手順です。
計算方法
モノトニックな水平ベジエ座標をtの2等分で解き、その垂直座標と dy/dx を評価する。
B(t)=3(1−t)²tP₁+3(1−t)t²P₂+t³(1,1); solve Bx(t)=input progress
計算例
CSS easeの制御点 (0.25,0.1,0.25,1) では、入力進捗0.5の出力は約0.802403です。t=0.5を直接使うと時間の対応が誤ります。
前提条件と入力上の注意
固定エンドポイント(0、0)と(1、1)。 X 制御は 0 〜 1 に限定されている。 Yはオーバーシュートするかもしれない。局所的な傾きは、垂直接線で未定義である。これにより、入力された区間の数値進行が評価され、プロパティのクリッピング、プレイバックのスケジューリング、0〜1以外の外挿が除外される。
参考資料： 立方格子のタイミング関数
このツールの使い方
自分の値を入力できますか？
はい。入力例をご自身の値に変更してください。結果・計算手順・表・対応する図が入力に応じて更新されます。空欄や無効な値がある場合は結果を消去し、不足した入力を自動的に例の値で補うことはありません。
結果は厳密ですか？
浮動小数点演算を使用し、表示時に丸めています。計算式・前提条件・記載されたデータ精度を確認して結果を解釈してください。
入力内容は送信されますか？
計算はブラウザー内で行います。アカウント・ファイルのアップロード・外部AIサービスは不要です。ページを再読み込みすると入力値は保持されません。
4つの制御点から、3次ベジェ曲線の位置、接線、近似の長さを求めます。
既知の2点と目標xまたはyから他方の座標を求め、直線モデルで補間・外挿を明確に区別します。
4組の対応点から平面射影変換を求め、指定座標の変換結果と再構成残差を表示します。
広告掲載用スペースです。