このシリーズではアニメーションのためのプログラムを日本語に置き換えて解説します。
プログラムとして書かれた数式を日本語にすることで言語の仕様に依存しない「なぜそのように動くか？」という理解の一助となればと思います。
※私がWeb制作を生業にするフロントエンドエンジニアなのでプログラムの箇所はPixiJSで記述します。
プログラムを日本語に。
拡大縮小は以下の書き方で実装出来ます。
実際のプログラムと見比べて、理屈を読み解いていきます。
アニメーションさせるためのループ処理{
オブジェクトのスケールプロパティX += 拡大縮小の量 * 数値の増減方向
オブジェクトのスケールプロパティY += 拡大縮小の量 * 数値の増減方向
条件分岐（ オブジェクトのスケールプロパティX > 1.6 || オブジェクトのスケールプロパティX < 1 ） {
数値の増減方向 = 数値の増減方向 * マイナスをかけて正負を反転
}
}
まずプログラムで書くとこうです。
※アニメーションに関係ない記述に関しては一部割愛しています。
// 動かすオブジェクトを定義
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;
let direction = 1; // 数値の増減方向
app.ticker.add((delta) => {
obj.scale.x += 0.02 * direction;
obj.scale.y += 0.02 * direction;
// 大きさの倍率が1.6を超えたら縮小に、1を下回ったら拡大させていく。
if(obj.scale.x > 1.6 || obj.scale.x < 1){
direction = direction*-1;
}
});
これを上から順番に日本語にするとこうなります。
オブジェクト名 = オブジェクトの入れ物を作成
オブジェクト.色の塗りつぶし（白,透明度）
オブジェクト.角丸の四角を作成（x座標, y座標, 横幅, 縦幅, 角丸サイズ）
オブジェクト.色の塗りつぶし終了
オブジェクト.中心点x = オブジェクトの幅の半分
オブジェクト.中心点y = オブジェクトの高さの半分
数値の増減方向 = 正の値
アニメーションさせるためのループ処理{
オブジェクトのスケールプロパティX += 拡大縮小の量 * 数値の増減方向
オブジェクトのスケールプロパティY += 拡大縮小の量 * 数値の増減方向
条件分岐（ オブジェクトのスケールプロパティX > 1.6倍率 || オブジェクトのスケールプロパティX < 1倍率 ） {
数値の増減方向 = 数値の増減方向 * マイナスをかけて正負を反転
}
}
ループを繰り返す度に、オブジェクトのスケールプロパティに+0.02していく事で拡大が実現します。これが-0.02になると逆に縮小します。
スケールプロパティはだいたい初期値が1で、なぜ1かと言えばスケールはpxなどの実際の大きさではなく拡大縮小の「倍率」だからかと。
数値の増減方向の変数を入れているのは、拡大と縮小のアニメーションを入れ替えるためです。前述でも触れましたが、プロパティに対してプラスなら拡大、マイナスなら縮小のアニメーションになります。
