javascript（テトリス009_テトリスへのanime.jsの使用）

■Anime.jsでアニメーションを追加する。
前回まででテトリスのコードはできたので、装飾としてAnime.js（Anime.min.js）でアニメーションを追加する。対象の動作は、行が揃って消えるところと終了時。

追加コードは下の通り。BoardClassの中のメソッドとして追加し、gameendAnimeが終了時、deleteAnimeが１、２、３行を消すとき、deleteAnime4Lineが４行を消すとき。

    gameendAnime(targetCells) {
        let cells = [];
        for (let i of targetCells) {
            let temp = document.querySelector('.squ' + i);
            cells.push(temp);
        }
        anime({
            targets: cells,
            backgroundColor: '#666',
            delay: anime.stagger(80, { start: 400 }),
        });
    }

    deleteAnime(targetCells) {
        let cells = [];
        for (let i of targetCells) {
            let temp = document.querySelector('.squ' + i);
            cells.push(temp);
        }
        anime({
            targets: cells,
            backgroundColor: '#FFF',
            delay: anime.stagger(100, { grid: [1, 10], from: 'center' }),
            complete: function () {
                BoardClass.synchronizeBoard();
            }
        });
    }

    deleteAnime4Line(targetCells) {
        let cells = [];
        for (let i of targetCells) {
            let temp = document.querySelector('.squ' + i);
            cells.push(temp);
        }

        let tl1 = anime.timeline({
            targets: cells,
            rotateY: [
                { value: 90, easing: 'easeOutSine', duration: 300 },
                { value: 0, easing: 'easeInOutQuad', duration: 300 }
            ],
            delay: anime.stagger(100, { grid: [2, 10], from: 'center' })
        });

        tl1.add({
            backgroundColor: '#FFF',
            complete: function () {
                BoardClass.synchronizeBoard();
            }
        });
    }

今まで見てきたAnime.jsを使っているだけなので新しいものはあまりない。

４行消す際のコードをいじっている時に、アニメーションを動かした後、セル間の隙間ができることがあった（下の赤枠）。ピースを改めて積み上げたり、ブラウザ機能で画面をズームして戻したりすると隙間は消えるけど、どうにかならないかいろいろ試したところ、durationを300にしたら隙間はできなくなった。隙間ができる時はdurationは360だった。

上が「duration: 360」で下が「duration: 300」。上のものは隙間があることが分かる。

他のアニメーションを含めた最終的な実行画面が下のもの。

これでテトリスのコードは終わりにする。