Tangency / Derivation

止まって見える回転の解剖

中央の正方形が四分の一回転するあいだ、両脇はぴったり結ばれたように滑り、ダイヤのあたりで全部が止まって見える。だがキーフレームは回転の 3 個だけ — 両脇にはゼロで、その位置は「回転する正方形に触れないギリギリ」を毎フレーム計算した結果だ。止まって見える瞬間さえ、誰も止めていない。回転 1 本と接触の法則 1 行を、純関数ひとつに収めて解剖する。

Published
2026年6月10日
Topics
Tangency · Geometry · Easing · SVG
キーフレームは回転の 3 個だけ — 90 frames / 3s loop

両脇は誰が動かしているのか

中央の正方形が四分の一回転するあいだ、両脇の正方形は外へ滑り、ダイヤのあたりで止まったように見えて、また戻ってくる。3 つの動きはぴったり結ばれている — では、結んでいるものは何か。

キーフレームが打たれているのは中央の回転だけで、3 個。両脇には 1 個もない。両脇の位置は「回転する正方形に触れない、ギリギリの場所」を毎フレーム計算して決まる。連動の正体は、回転 1 本と接触の法則 1 行だ。

回転 1 本と法則 1 行を書く

  • 回転キーは 3 個 — 3 フレーム目 0°、46 フレーム目 45°、89 フレーム目 90°
  • イージングカーブは区間ごとに 1 本、計 2 本
  • 両脇の正方形にキーフレームはゼロ
  • 押し出される距離は 0 → 11px → 0

辺 54px の正方形は、まっすぐ立っているとき横幅も 54px。ダイヤ(45°)になると対角線が横を向き、約 76px まで広がる。両脇は、その半幅から 0.1px の隙間を保つ位置へ毎フレーム置かれる — 右は外へ、左も外へ、対称に。時間差はない。

ダイヤ付近で止まって見えるのは、止めるキーがあるからではない。45° の前後では横幅がほとんど変わらないから、押し出しの量も動かない — 幾何学の踊り場だ。実測でも、45° を通過する瞬間の回転速度は 1 フレームあたり +0.175° でゼロではない。回転は一度も止まっていない。

接触はどう証明するか

押し出しの軌跡だけから「接していると仮定すると正方形の辺は何 px のはずか」を逆算できる。答えは 53.83 — 動画から独立に測った辺 53.92〜53.95 と一致する。残る隙間も全行程で +0.103 ± 0.064px と一定だった。サイズの一致と、隙間が変わらないこと — この 2 つが接触の指紋だ。

両脇に独自のキーを 13 個打てば、当てはまりはわずかに良くなる(0.043px 対 0.075px)。それでも採らない。独立のキー打ちには、その中に隠れた「正方形のサイズ」が実物と一致する理由がないからだ。左右の時間差に見えた約 1.5 フレームも、より精密な計測では 0.36 フレーム以下に消えた — 粗い計測が作った偽の証拠だった。

再現に必要なのは純関数ひとつ

実装は、フレーム番号を渡すと中央の角度と両脇の位置を返す純関数ひとつ。法則は 90° 周期だから、四分の一回転を与えれば押し出しは 1 回、実際に半回転を与えると 2 回起きる — 押し出しの回数はクリップに焼かれておらず、入力した回転の帰結だ。数値は全て、このページが読み込む JavaScript に定数としてそのまま入っている — ブラウザのソース表示が仕様書を兼ねる。