Motion Studies
Motion Studies — モーションの技法を 1 つずつ読み解く
ひとつの記事でひとつの技法を、動くデモ付きで読み解いていくアーカイブ。作り方だけでなく、試して捨てた案までそのまま書き残す。
光の輪
光の輪の明るい側を1周させる
金の点でできた光の輪の明るい側が、暗い円のふちに沿って動いていく。点は動かず、向きが変わると明るさだけが移る。速さは途中で少し上がってから戻る。ループのつなぎ目では前後の速さがそろい、動きがなめらかにつながる。動かすのは明るい側の向き、ただこれだけだ。
Loop · Corona · Eclipse · Canvas2D→3D
2D→3D の作り方
平らなドーナツが立体になって転がり、同じ波で一度ふくらんでから、また平らに戻る。フラットな見た目を保ったまま立体の動きが欲しいときの 2D グラフィックの作り方だ。縁のかたちを傾けて画面に落とし、その点群の凸包を輪郭にすると、平らな輪のまま立体に見えてくる。組み立てをコードつきで追う。
2D→3D · Projection · Convex Hull · SVG自動方向
自動方向の作り方
フラットな円が傾いたリングをめぐり、手前ではふくらんでゆっくり、奥では縮んで速く見える。遠近の倍率を位置と大きさの両方へ等しくかけると、緩急も奥行きもこの一つの投影から揃って出てくる。フラットな見た目のまま、幾何が揃えてくれる奥行きが欲しいときの作り方を、コードつきで追う。
Auto-orient · 3D · Perspective · SVG差
差の作り方
重なった円が開いては閉じ、重なったところが抜けて、形を引き算したように見える。この抜けの正体は、奇数回重なった部分を塗る偶奇（even-odd）の規則と、折り返す 1 本の時計だ。コードつきで、組み立ての考え方から順に見ていく。
Difference · Even-Odd · Easing · SVG干渉
干渉の作り方
内側の点がリングを回り、そばを通るたびにリングの点がよける。まるで近づくものに反応しているように見えるが、リングの点の動きの正体は、回り続ける時計でくり返す同じ 1 本のパルスだ。よけて見えるのは、その上に重ねた距離の力による。コードつきで、組み立ての考え方から順に見ていく。
Interference · Proximity · Easing · SVGオフセット
オフセットの作り方
5 つの円が左へ送られ、大きさの波が右から左へ伝わって見える。この波の正体は、ひとつの動きを円ごとに少しずつ時間をずらして重ねたものだ。そのズレこそが「オフセット」だ。コードつきで、組み立ての考え方から順に見ていく。
Offset · Stagger · Easing · SVG時間遅延
時間遅延の作り方
5 つのカプセルが次々と跳ね、波のように見える。この波の正体は、1 本のジャンプと着地のプロファイルを、体ごとに時間をずらして再生したものだ。そのズレこそが「時間遅延」だ。コードつきで、組み立ての考え方から順に見ていく。
Stagger · Time Delay · Easing · SVG配置移行
配置移行の作り方
9 つの点が中央に集まり、リングの形に開き、渦を巻いて別の場所へ戻る — まるで細かく振り付けたように見える。手で形を決めるのは「グリッド」と「リング」の 2 つの並びで、渦も席の入れ替わりも、この 2 つの並びと点の移し方から自然に生まれる。コードつきで作り方を一から追う。
Arrangement · Turntable · Easing · SVG視差
視差の作り方
7 つの円が上下に弾み、奥行きがあるように見える。この奥行きの正体は、全部が同じ 1 本の波を共有し、振れ幅を円ごとに変えていることだ。大きく振れる円ほど手前に、小さく振れる円ほど奥に見える。コードつきで、組み立ての考え方から順に見ていく。
Parallax · Amplitude · Easing · SVG追従
追従の作り方
右から左へ振れる i のフォロースルー。遅れも跳ねも、正体は片道の振り 1 本と、最後のキーを振り抜く速さがそのまま決める揺れだ。速く振り抜くほど揺れは大きく、遅れも行き過ぎもそこから生まれる。コードつきで、組み立ての考え方から順に見ていく。
Follow-through · Overshoot · Easing · SVG一体化と分離
一体化と分離の作り方
リング状に並んだ 8 個の円がまわりながら順番に中心へ潜り、ひとつの大きな円に呑み込まれて、また離れて輪にもどる。合体も分離も、正体は「集まる・待つ・もどる」のクリップ 1 本を円ごとに遅らせて再生したものだ。これに一定の速さで回りつづける輪が重なる。溶けて見えるのは同じ色の円が重なるからで、まん中の円は面積の帳尻が合うように平方根でふくらむ。コードつきで、組み立ての考え方から順に見ていく。
Stagger · Overshoot · Easing · SVG分割
分割の作り方
円が縦に割れ、2 つの半円がすれ違いながら全体が回り、また 1 つの円に閉じる。回転とスライドの二重の振り付けに見えるが、動かしている数値は進み具合 1 本だ。締めのぴたりとした一致は図形の性質が引き受けている — その分解を、組み立ての考え方から順に見ていく。
Shear · Rotation · Easing · SVG循環
循環の作り方
∞ の道を、太い線の頭とドットが 1 周のほとんどをひと息に駆け、残りをゆっくり這う。二段変速に見えるこの動きで、自分で打つ速さのキーは鞭のひと振りぶんの 2 つ。這いの速さは「決めたフレーム数でちょうど 1 周して戻る」という約束から自動で決まる。線の正体は固定長の窓で、それが道の上を滑ることで頭と尾が動いて見える。
Path · Dash · Easing · SVG対称
対称の作り方
4 本のバーが左右へ開きながら伸び、中央のスクエアがふくらみ、いちばん伸び切ったところで一瞬そろって止まって、同じ道を帰ってくる。完璧に申し合わせたように見えるこの動きは、0 から 1 へ上がり、少し止まって 0 へ帰る数値 1 本が動かしている。各図形はその数値に自分の動き幅を掛けて読み、鏡写しの正体は動き幅の符号が左右で逆なことだ。中央のスクエアは同じ数値で半回転までする。数値 1 本と図形ごとの動き幅を、短い関数に書き起こして読み解く。
Pulse · Hold · Easing · SVG残像
残像の作り方
2 個のドットが円を 1 周するあいだ、速い区間では尾がコマ送りのように分かれ、遅い区間ではひとつながりに溶けて、止まると消える。尾の 1 枚 1 枚の正体は、同じ回転を一定のわずかな遅れで再生した過去の自分だ。動かしているのは回転 1 本で、分かれるか溶けるかは回転の速さで決まる。回転 1 本と複製 9 枚を、短い関数に書き起こして読み解く。
Echo · Time Shift · Easing · SVG反比例
反比例の作り方
接し合う 2 つの円が、一方はふくらみ一方はしぼんで、大きさを交換し続ける。名前は「反比例」だが、ループを通して一定に保たれているのは半径の和のほうだ。キーフレームは左上の円の半径に打った 3 個で、右下の半径は和からの引き算で出し、2 つの中心は固定の接点から自分の半径ぶん退いた位置に計算で決まる。接点がループのあいだ固定されたままの理由ごと、短い関数に書き起こして読み解く。
Conservation · Complement · Easing · SVG連動
連動の作り方
中央の正方形が四分の一回転するあいだ、両脇はぴったり結ばれたように滑り、ダイヤのあたりで全部が止まって見える。両脇の位置は毎フレーム、「回転する正方形にちょうど触れるギリギリ」を計算して決まる — 動かしているのは中央の回転 1 本で、両脇はその回転に幾何で従う。止まって見える瞬間も、接点の進みがそこでいったん滞るからだ。回転 1 本と接触の法則 1 行を、短い関数に書き起こして読み解く。
Tangency · Geometry · Easing · SVGランダム
ランダムの作り方
9 個のドットが、予測できない順に弾む。このランダムに見える順番の正体は、9 マスに弾む順番を書き込んだ固定の表 1 枚だ。動き自体はキーフレームで打ったクリップ 1 本で、9 個全てが同じクリップを一定の間隔でずらして再生している。ばねに見えるアンダーシュートまで含めて、その作りを短い関数に書き起こして読み解く。
Scramble · Determinism · Easing · SVG増減
増減の作り方
ドットは 6 個から 19 個へ増え、また 6 個へ戻って見える。この数の変化の正体は、格子全体がいっせいに開いて閉じる動きに、グループごとの時間差をつけた出現を重ねたものだ。現れるタイミングをずらすと、数のうねりはひとりでに生まれる。短い関数に書き起こして読み解く。
Lattice · Emergence · Easing · SVG