【JavaScript】毎回ランダムな位置を取りつつ大小様々な円を点灯させたい

Question

生のJavaScriptでの記述練習を行っています。
今回実装したい動きは、
①大小さまざまな円をランダムな位置にランダムな個数（～30個）発生させる
②fadeIn → fadeOut でゆっくり点灯
上記を一回の動作としてこれを繰り返すような動きを取り入れたいと考えております。

現在①については実装できたのですが、
点灯後における円の位置・個数のリセットができずに困っています。

質問は、
①fade機能の適切な実装方法（生JavaScript または CSSアニメーション）
②点灯終了後、また新たに円の再設定から始まる繰り返し処理の記述方法
についてご教示願います。

下記ソースコードになります。

　  <main>
        <div class="load"></div>
    </main>

main {
    position: relative;
    overflow: hidden;
    //anime.jsを使用した円の出し方
    .load {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100vh;
        background: #fcfcf3;
    }
    .block {
        display: inline-block;
        position: absolute;
        width: 50px;
        height: 50px;
        border-radius: 50%;
　　//アニメーションCSSによるフェード
        animation: fadein 8s ease ;
        transition-property: animation;
        animation-iteration-count: 3;
    }
    @keyframes fadein {
        0% {
            opacity: 0;
        }
        50% {
            opacity: 0.8;
        }
        100% {
            opacity: 0;
        }
    }
}

window.addEventListener('DOMContentLoaded', function() {

    let load = this.document.querySelector('.load');

    //30個のカラフルな円を出現させる繰り返し条件
    function colorCircles() {
        for(let i=0; i<30; i++) {
            let blocks = this.document.createElement('div');
            blocks.classList.add('block');
            //HTMLドキュメントに"block"クラスを持つdiv要素の追加
            load.appendChild(blocks);
            
            //anime.jsでblockクラスの円をカスタム
            anime ({
                targets: '.block',
                translateX: function() {
                    return anime.random(-700, 700);
                },
                translateY: function() {
                    return anime.random(-450, 450);
                },
                scale: function() {
                    return anime.random(1,3);
                },
            });
        }
    }
    colorCircles();
});

このソースコードでは新しく円を生成できないと同時に、
anime.js特有の動き（中心からぶわっと円が放散するような動き※CSSアニメーションでfadeを付けたらなくなりました）があったので、
anime.jsを使用しない円のカスタム方法も作ったので下記に載せておきます

    <main>
        <div class="load2"></div>
    </main>

main {
    position: relative;
    overflow: hidden;

    //anime.js未使用の円の出し方
    .load2 {
        width: 100%;
        height: 100vh;
        background: #fcfcf3;
        overflow: hidden;
    }
}

window.addEventListener('DOMContentLoaded', function() {

    let load2 = this.document.querySelector('.load2');

    function colorfulBalloon(n, max, min) {
        let balloon = document.createElement("div");
        balloon.className = "balloon";
        balloon.style.borderRadius = "50%";
        balloon.style.position = "absolute";

        for ( let i=0; i<n; i++ ) {
            let balloonClone = balloon.cloneNode();

            let size = Math.random() * (max - min) + min;

            balloonClone.style.top = "calc(" + -1 * size * Math.random() + "px + " + Math.random() * 100 + "%)";
            balloonClone.style.left = "calc(" + -1 * size * Math.random() + "px + " + Math.random() * 100 + "%)";
            balloonClone.style.width = size + "px";
            balloonClone.style.height = size + "px";
            load2.appendChild(balloonClone);
        }
    }
    //実行
    colorfulBalloon(10, 150, 50);
});

こちらはfadeを実装できておりません。
長くなりましたが、何卒よろしくお願いします。

Comments

[Lhankor_Mhy]

anime.js とはこれのことですか？
https://animejs.com/

[s-ueshi]

Lhankor_Mhyさん

そうです！そのライブラリを使用しております。
その部分の記載をしていなかったですね、申し訳ございません。

Answer 1

①fade機能の適切な実装方法（生JavaScript または CSSアニメーション）

　何をもって適切というかは難しいですが、CSS transition、CSS animation、Web Animations API あたりが標準的かと思います。

---

②点灯終了後、また新たに円の再設定から始まる繰り返し処理の記述方法

　CSSを使った場合は、transitionend イベント、animationend イベントなどを拾って、現在の描画を消して、再生成すればいいかと思います。

　また、アニメーションの時間が決まっているならば、setTimeout などで時間を決め打ちして再生成するという簡易的なやり方をしてもいいかもしれません。

　Web Animations API を使った場合でも、イベントを受けて処理するか、あるいは Promise を受けて処理するのもいいかもしれません。

---

　ここでは元コードを尊重して、CSS animation と animationend で作ったサンプルを置いておきます。

https://jsfiddle.net/Lhankor_Mhy/2mkxLj93/

//...
        function blink(){
            document.querySelector('.load2').innerHTML ="";
            for ( let i=0; i<n; i++ ) {
                let balloonClone = balloon.cloneNode();
    
                let size = Math.random() * (max - min) + min;
    
                balloonClone.style.top = "calc(" + -1 * size * Math.random() + "px + " + Math.random() * 100 + "%)";
                balloonClone.style.left = "calc(" + -1 * size * Math.random() + "px + " + Math.random() * 100 + "%)";
                balloonClone.style.width = size + "px";
                balloonClone.style.height = size + "px";
                load2.appendChild(balloonClone);
            }
            document.querySelector('.load2 .balloon').addEventListener('animationend',blink);
        }

        blink();
//...

//...
    .balloon{
        animation: fadein 8s ease ;
        transition-property: animation;
        animation-iteration-count: 3;
        background: #000;
    }
    @keyframes fadein {
        0% {
            opacity: 0;
        }
        50% {
            opacity: 0.8;
        }
        100% {
            opacity: 0;
        }
    }
//...

---

参考：
Web Animations API を利用する - Web API | MDN

HTMLElement: transitionend イベント - Web API | MDN
HTMLElement: animationend イベント - Web API | MDN

Comments

[s-ueshi]

思い描いていた動作になりました！お時間いただきましてありがとうございました。

CSSアニメーションとjsの連動に少し悩んでいたのですが、
恥ずかしながらtransitionend/animationendイベントを初めて知り目からウロコです、、
参考まで掲載していただきありがとうございます。

これで終わらせず、次に活かせるよう勉強します！