Как мгновенно l oop элемент после окончания анимации [anime.js] - PullRequest
Новая
       139

Как мгновенно l oop элемент после окончания анимации [anime.js]

0 голосов
/ 06 мая 2020

Я хотел сделать пиксельный фон дождя, что-то вроде матрицы? но с помощью только квадратов в области я могу заставить все работать, ожидая того факта, что он возвращается в исходное положение после окончания анимации, вот как я упорядочиваю свои квадраты:

  1. создать группу для каждой капли внутри основного div

  2. создать каплю внутри каждого grp div (я делаю это, поскольку мне также нужно учитывать исчезающий след)

  3. делать аниме. js анимация на grp, чтобы капля двигалась

каждый раз, когда она заканчивала ВСЕ группы, она возвращается в исходную точку, но я хочу бессмысленный нон-стоп l oop, который не заканчивается время от времени.

Я не знаю, как это сделать, поэтому был бы признателен, если бы кто-нибудь мог помочь

вот как выглядит веб-сайт как 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/animejs@3.0.1/lib/anime.min.js"></script>
    <style>
        body, html {
            margin: 0px;
            height: 100%;
            overflow: hidden;
        }

        .anim1 {
            display: block;
            background: linear-gradient(to bottom, #552055, #000000);
            width: 100%;
            height: 100%;
        }

        .drop1 {
            display: block;
            position: absolute;
            background-color: rgba(200, 40, 200, 1);
            width:10px;
            height: 10px;
            /*animation: move-in-steps 1s steps(50) infinite;*/
        }

        .drop2 {
            display: block;
            position: absolute;
            background-color: rgba(200, 40, 200, 0.8);
            width:10px;
            height: 10px;
            /*animation: move-in-steps 1s steps(50) infinite;*/
        }

        .drop3 {
            display: block;
            position: absolute;
            background-color: rgba(200, 40, 200, 0.4);
            width:10px;
            height: 10px;
            /*animation: move-in-steps 1s steps(50) infinite;*/
        }

        .drop4 {
            display: block;
            position: absolute;
            background-color: rgba(200, 40, 200, 0.2);
            width:10px;
            height: 10px;
        }

        .grp {
            position: absolute;
            top: 0px;
            /*animation: move-in-steps 5s steps(50) infinite;*/
        }

        @keyframes move-in-steps {
            to {margin-top: 1000px;}
        }
    </style>
    <script>
        var dropnum = 500;

        function randint(min, max, step) {
            return Math.floor(Math.random() * (max/step - min/step) + min/step) * step
        }

        function CreateRain() {
            for (i = 1; i <= dropnum; i++) {
                var dleft = randint(0, 1600, 15);
                var dtop = randint(-1000, 1500, 15);

                $('.anim1').append('<div class="grp" id="grp' + i + '"></div>');

                $('#grp' + i).append('<div class="drop1" id="drop1' + i + '"></div>');
                $('#drop1' + i).css('left', dleft);
                $('#drop1' + i).css('top', dtop);
                $('#grp' + i).append('<div class="drop2" id="drop2' + i + '"></div>');
                $('#drop2' + i).css('left', dleft);
                $('#drop2' + i).css('top', dtop - 15);
                $('#grp' + i).append('<div class="drop3" id="drop3' + i + '"></div>');
                $('#drop3' + i).css('left', dleft);
                $('#drop3' + i).css('top', dtop - 30);
                $('#grp' + i).append('<div class="drop4" id="drop4' + i + '"></div>');
                $('#drop4' + i).css('left', dleft);
                $('#drop4' + i).css('top', dtop - 45);
            }

            anime({
                loop: true,
                targets: ".grp",
                easing: 'steps(50)',
                duration: 3000,
                translateY: 1000
            });
        }
    </script>
</head>
<body onload="CreateRain();">
    <div class="anim1">
    </div>

</body>
</html>```


  [1]: https://i.stack.imgur.com/mKmCG.png
...