このシリーズではアニメーションのためのプログラムを日本語に置き換えて解説します。
プログラムとして書かれた数式を日本語にすることで言語の仕様に依存しない「なぜそのように動くか？」という理解の一助となればと思います。
※私がWeb制作を生業にするフロントエンドエンジニアなのでプログラムの箇所はPixiJSで記述します。
プログラムを日本語に。
等速回転は以下の書き方で実装出来ます。
実際のプログラムと見比べて、理屈を読み解いていきます。
アニメーションさせるためのループ処理{
オブジェクトの回転プロパティ += ループごとに回す角度の量
}
まずプログラムで書くとこうです。
※アニメーションに関係ない記述に関しては一部割愛しています。
// 動かすオブジェクトを定義
let obj = new PIXI.Graphics();
obj.beginFill(0xFFFFFF, 1);
obj.drawRoundedRect(0, 0, 100, 100, 16);
obj.endFill();
obj.pivot.x = 50;
obj.pivot.y = 50;
// アニメーションさせるためのループ。
app.ticker.add(() => {
obj.rotation += 0.05;
});
これを上から順番に日本語にするとこうなります。
オブジェクト名 = オブジェクトの入れ物を作成
オブジェクト.色の塗りつぶし（白,透明度）
オブジェクト.角丸の四角を作成（x座標, y座標, 横幅, 縦幅, 角丸サイズ）
オブジェクト.色の塗りつぶし終了
オブジェクト.中心点x = オブジェクトの幅の半分
オブジェクト.中心点y = オブジェクトの高さの半分
アニメーションさせるためのループ処理{
オブジェクト.回転プロパティ += ループごとに回す角度の量
}
ループを繰り返す度に、オブジェクトの回転用プロパティに+0.05していく事で回転が実現します。
ここで注意したいのは移動や回転の基点はオブジェクトの中心にあるとは限らないという事です。
PixiJSであればデフォルトではオブジェクトの左上（座標0,0）が基点になっていますが、別の言語では左下だったりします。
基点を調整出来ないと思い通りの回転にはならないので、回転を使う際はどこかで基点を調整する処理を入れるよう覚えておきましょう。
