神戸エンジニア転職

// インタラクション

Canvas / JS / UIアニメーション——動くものを作る感覚を身につけるシリーズ

Canvas / JS 5本

ビジュアルコーディングを始めよう

Canvas APIとJavaScriptだけで「動く絵」を描く全5回。ループ・三角関数・アニメーションを組み合わせ、コードを芸術に変える感覚を体験する。

  1. #キャンバスの世界へようこそ
  2. #ループでパターンを埋め尽くす
  3. #円と三角関数で曲線を描く
  4. #requestAnimationFrameで動かす
  5. #ワンライナーの世界へ
Canvas / JS 10本

ビジュアルコーディング 物理シミュレーション

慣性・バネ・衝突・剛体回転——物理の法則をJavaScriptで再現する全10回。Canvas上で動く物理エンジンをゼロから組み上げる。

  1. #慣性と速度——ものが動き続ける理由
  2. #力と加速度——F=maをキャンバスで
  3. #オイラー法——微分方程式をコードで解く
  4. #バネの力——フックの法則でバネを作る
  5. #跳ね返り——反発係数と壁との衝突
  6. 他5本
Canvas / JS 10本

ビジュアルコーディング パーティクル

点が生まれ、動き、消える——パーティクルシステムの基礎から煙・炎・爆発まで全10回のビジュアルエフェクト。

  1. #はじめてのパーティクル——点が生まれ、動き、消える
  2. #透明度とサイズ——生まれて消えていく美しさ
  3. #重力と風——物理が加わると世界になる
  4. #渦と引力場——パーティクルが力に引き寄せられる
  5. #分裂するパーティクル——子パーティクルを生む
  6. 他5本
UI Design 9本

UIアニメーション入門

イージング・マイクロインタラクション・状態遷移まで全9回。「なぜ動かすか」の意図から学び、ユーザーの操作を豊かにするアニメーション設計を身につける。

  1. #アニメーションがUIを変える瞬間
  2. #「速さ」がUIの印象を決める
  3. #「動き方」でキャラクターが変わる
  4. #ボタンとタッチ — 「押した感」を設計する
  5. #フォームの対話 — 入力を助けるアニメーション
  6. 他4本