このシリーズではアニメーションのためのプログラムを日本語に置き換えて解説します。
プログラムとして書かれた数式を日本語にすることで言語の仕様に依存しない「なぜそのように動くか？」という理解の一助となればと思います。
※私がWeb制作を生業にするフロントエンドエンジニアなのでプログラムの箇所はPixiJSで記述しています。
プログラムを日本語に。
タイトルに「コマ送り」って書きましたが、正確にはコマ送りじゃなく「コマ送り風」。
フレームレートを落としてパラパラの数が少ないパラパラ漫画的な動きをさせる為のプログラムを日本語で書いてみます。
移動量 ＝ 5
コマ送りの粗さ ＝ 100
X座標変数 ＝ 0
アニメーションさせるためのループ処理{
X座標変数 += 移動量
条件分岐（X座標変数 % コマ送りの粗さ == 0 ）{
オブジェクトのX座標 = X座標変数
}
}
これを実際のプログラムで書くとこうなります。
※アニメーションに関係ない記述に関しては一部割愛しています。
// 動かすオブジェクトを定義
let obj = new PIXI.Graphics();
obj.beginFill(0xFFFFFF, 1);
obj.drawRoundedRect(0, 0, 100, 100, 16);
obj.endFill();
const vx = 5;
const period = 100;
let obj_x = obj.x;
app.ticker.add((delta) => {
obj_x += vx;
if( obj_x % period == 0){ // 移動量をコマの粗さで割って余りがゼロの場合のみ動かす
obj.x = obj_x;
}
if(obj_x > app.screen.width + obj.width / 2){
obj_x = obj.width * -1;
}
});
これを上から順番に日本語にするとこうなります。
オブジェクト名 = オブジェクトの入れ物を作成
オブジェクト.色の塗りつぶし（白,透明度）
オブジェクト.角丸の四角を作成（x座標, y座標, 横幅, 縦幅, 角丸サイズ）
オブジェクト.色の塗りつぶし終了
移動量 ＝ 5
コマ送りの粗さ ＝ 100
X座標変数 ＝ 0
アニメーションさせるためのループ処理{
X座標変数 += 移動量
条件分岐（X座標変数 % コマ送りの粗さ == 0 ）{
オブジェクトのX座標 = X座標変数
}
条件分岐（ オブジェクトのX座標 ＞ 描画領域の幅 + オブジェクトの幅 / 2 ）{
オブジェクトのX座標 ＝ オブジェクトの横幅 * -1
}
}
コマ送りの考え方はシンプルで「オブジェクトを動かすフレームを間引く」事でコマ送り風の動きを実装する事が出来ます。通常なら毎フレームごとに描画されるところ「描画するフレーム」と「描画しないフレーム」で分岐させれば良いのです。
分岐の方法はいろいろあると思いますが、この記事では「オブジェクトの移動量」を「コマ送りの粗さで」割って、余りがゼロの場合にのみ実際にオブジェクトを動かすようにしています。
X座標用の変数を作っているのはこの分岐に使うためで、オブジェクトのX座標に直接加算させてしまうと実際にオブジェクトが動いてしまう為です。
コマ送り風の動きが活躍する場面は『早い動きのモーショングラフィクス』が多いかなと思っています。
この動き単体ではなく複数のオブジェクトと動きが組み合わさったごく短いクラッチ映像やMVの一瞬の表現などで使うと、パッパッパと出現するオブジェクトがリズム感を演出してくれるでしょう。
