Zenn
Closed6

P3REの総攻撃フィニッシュカットインの背景アニメーションを作る

canvas
ツクモンツクモン

好きなゲームのアニメーションを真似て、Canvasで図形がアニメーションするものを作ってみた。
とりあえず半円が広がるものはできたので、イージングをつけたり別の図形を入れてさらにそれっぽくしたい

ツクモンツクモン

やりたいこと

  • 円が大きくなるアニメーションをつける
  • 一つ目の円を追いかけるように別の図形が大きくなり、塗りつぶす
  • 大きくなり方にイージングをつける
ツクモンツクモン

コードの内容

円の半径に毎フレーム変更を加え、アニメーションの進行状況に応じた大きさになるようにしている。

ツクモンツクモン

他のアニメーションにも使いまわせそうなコード。
開始時にタイムスタンプを作成し、それを元に毎フレーム進捗度を計算して、進捗度に応じてアニメーションに変化をつける

const duration = 700; // アニメーションの時間
let progress = 0; // 進捗度
let startTime; // アニメーションの開始時間(ミリ秒)
let animationId; // requestAnimationFrameのID

startTime = Date.now(); // アニメーション開始時に開始した時間のタイムスタンプを取得する

progress = Math.min(1, (Date.now() - startTime) / duration); // 毎フレーム、進捗度を計算する（現在時間 - 開始時間 / アニメーションの秒数 でアニメーション全体に対する進捗度になる）
animation(); // アニメーション関数
animationId = window.requestAnimationFrame(render); // requestAnimationFrameのIDを変数に入れておくと、一時停止できる
ツクモンツクモン

円を重ねることでそれっぽくしたところで力尽きた

ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = colorBg;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(480, 0, easing(targetRadiusFirst), 0, Math.PI, false);
ctx.fillStyle = colorMain;
ctx.fill();
ctx.beginPath();
ctx.arc(480, 0, easing(targetRadiusSecond), 0, Math.PI, false);
ctx.fillStyle = colorBg;
ctx.fill();
このスクラップは2024/01/25にクローズされました