このシリーズではアニメーションのためのプログラムを日本語に置き換えて解説します。
プログラムとして書かれた数式を日本語にすることで言語の仕様に依存しない「なぜそのように動くか？」という理解の一助となればと思います。
移動や回転などシンプルな動きでもプログラムではどう書けばいいか？というのは直感的に想像しづらいもの。学校でのプログラミング教育も始まったことですし、プログラミングでアニメーションを描く楽しさの入り口になればと思います。
※私がWeb制作を生業にするフロントエンドエンジニアなのでプログラムの箇所はPixiJSで記述します。
プログラムを日本語に。
等速直線移動は以下の書き方で実装出来ます。
実際のプログラムと見比べて、理屈を読み解いていきます。
アニメーションさせるためのループ処理{
オブジェクトのx座標 = オブジェクトのx座標 + 5
}
まずプログラムで書くとこうです。
※アニメーションに関係ない記述に関しては一部割愛しています。
// 動かすオブジェクトを定義
let obj = new PIXI.Graphics();
obj.beginFill(0xFFFFFF, 1);
obj.drawRoundedRect(0, 0, 100, 100, 16);
obj.endFill();
// アニメーションさせるためのループ。
// いわゆるパラパラ漫画の原理でアニメーションさせまる。
app.ticker.add((delta) => {
obj.x = obj.x + 5;
});
これを上から順番に日本語にするとこうなります。
オブジェクト名 = オブジェクトの入れ物を作成
オブジェクト.色の塗りつぶし（白,透明度）
オブジェクト.角丸の四角を作成（x座標, y座標, 横幅, 縦幅, 角丸サイズ）
オブジェクト.色の塗りつぶし終了
アニメーションさせるためのループ処理{
オブジェクトのx座標 = オブジェクトのx座標 + 5
}
ループを繰り返す度に、オブジェクトのx座標に+5していく事で直線移動が実現します。
多くの場合、横移動はx座標、縦移動はy座標、斜めに移動したい場合はxとy両方に値を足していくことで等速移動が実現します。
ちなみに値をマイナスにすることで逆方向への移動になります。
今回は初回ということで最も基本的なアニメーションである直線移動を日本語訳してみました。今後は簡単な動きから入り、徐々に複雑なアニメーションにも触れていくつもりです。
