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