Блог

Главная - Вопросы по программированию - anime.js не воспроизводится снова onclick

anime.js не воспроизводится снова onclick

#javascript #html #jquery #anime.js

#javascript #HTML #jquery #anime.js

Вопрос:

Вот anime.js текстовая анимация, которая работает после того, как флажок установлен, но я хочу, чтобы, когда флажок установлен, а затем, если я нажму на play кнопку, она должна перезапустить анимацию, которая больше не воспроизводится при нажатии, какую ошибку я совершаю, моя попытка приведена ниже.

Весь мой код:

 function myTYPINGFunction() {
    var checkBox = document.getElementById("myCheck");
    var textWrappers = document.querySelectorAll('.text');

    textWrappers.forEach(textWrapper => {
        if (checkBox.checked == true) {
            textWrapper.innerHTML = textWrapper.textContent.replace(/(S*)/g, m => {
                return `<span class="word">`  
                    m.replace(/(-|)?S(-|@)?/g, "<span class='letter'>$amp;</span>")  
                    `</span>`;
            });

            var targets = Array.from(textWrapper.querySelectorAll('.letter'));

            anime.timeline({
                loop: true,
            })
                .add({
                    targets: targets,
                    scale: [3, 1],
                    scaleY: [1.5, 1],
                    opacity: [0, 1],
                    translateZ: 0,
                    easing: "easeOutExpo",
                    duration: 400,
                    delay: (el, i) => 20 * i
                }).add({
                    opacity: 0,
                    duration: 10000,
                    easing: "easeOutExpo",
                    delay: 800
                })
            $(".text").removeClass('zoomIn2');

        } else {
            setTimeout(function () {
                textWrapper.innerHTML = textWrapper.textContent.replace(/(<([^>] )>)/gi, "");
            }, 850);


            var targets = Array.from(textWrapper.querySelectorAll('.letter'));

            anime.timeline({
                loop: false,
            })
                .add({
                    targets: targets.reverse(),
                    scale: [1, 2],
                    scaleY: [1, 1.5],
                    opacity: [1, 0],
                    translateZ: 0,
                    easing: "easeOutExpo",
                    duration: 10,
                    delay: (el, i) => 15 * i
                });
            setTimeout(function () {
                $(".text").addClass('zoomIn2');
            }, 800);
        }
    })
} 
 .word {
    border: 1px solid red;
}

.letter {
    border: 1px solid lightblue;
}

input.largerCheckbox {
    width: 20px;
    height: 20px;
}

.zoomIn2 {
    animation: zoomIn2 1000ms both
}

@keyframes zoomIn2 {
    from {
        opacity: 0;
        transform: scale3d(0, 0, 0);
    }

    50% {
        opacity: 1;
    }
}

.letter {
    display: inline-block;

}

.word {
    white-space: nowrap;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label for="myCheck" style="color:red; font-size:20px;"><b>Typing.Eff:</b></label>
<input type="checkbox" id="myCheck" class="largerCheckbox" onclick="myTYPINGFunction()">
<button id="button2">play</button>

<h1 class="text">Checkbox is CHECKED!</h1>
<h1 class="text">Checkbox is CHECKED!</h1>
<h1 class="text">Checkbox is CHECKED!</h1>

Что я попробовал, так это:

  function myTYPINGFunction() {
    var checkBox = document.getElementById("myCheck");
    var textWrappers = document.querySelectorAll('.text');

    textWrappers.forEach(textWrapper => {
        if (checkBox.checked == true) {
            textWrapper.innerHTML = textWrapper.textContent.replace(/(S*)/g, m => {
                return `<span class="word">`  
                    m.replace(/(-|)?S(-|@)?/g, "<span class='letter'>$amp;</span>")  
                    `</span>`;
            });

            var targets = Array.from(textWrapper.querySelectorAll('.letter'));

            anime.timeline({
                loop: true,
            })
            var animate1 = anime({
                targets: targets,
                scale: [3, 1],
                scaleY: [1.5, 1],
                opacity: [0, 1],
                translateZ: 0,
                easing: "easeOutExpo",
                duration: 400,
                delay: (el, i) => 20 * i
            }).add({
                opacity: 0,
                duration: 10000,
                easing: "easeOutExpo",
                delay: 800
            })
            $(".text").removeClass('zoomIn2');

        } else {
            setTimeout(function() {
                textWrapper.innerHTML = textWrapper.textContent.replace(/(<([^>] )>)/gi, "");
            }, 850);


            var targets = Array.from(textWrapper.querySelectorAll('.letter'));

            anime.timeline({
                    loop: false,
                })
                .add({
                    targets: targets.reverse(),
                    scale: [1, 2],
                    scaleY: [1, 1.5],
                    opacity: [1, 0],
                    translateZ: 0,
                    easing: "easeOutExpo",
                    duration: 10,
                    delay: (el, i) => 15 * i
                });
            setTimeout(function() {
                $(".text").addClass('zoomIn2');
            }, 800);
        }
    })

}

function animateAll() {
    animate1.restart();
}

document.querySelector('#button2').onclick = animateAll;

а также это:

 
    var myanimation=  .add({
.
.
.
.
.

document.querySelector('#button2').onclick = = myanimation.play;

Ответ №1:

Вам просто нужно создать массив animate и перезапустить каждый из них

 var checkBox = document.getElementById("myCheck");
var animation = [];

function myTYPINGFunction() {
    animation = [];
    
    var textWrappers = document.querySelectorAll('.text');

    textWrappers.forEach(textWrapper => {
        if (checkBox.checked == true) {

            textWrapper.innerHTML = textWrapper.textContent.replace(/(S*)/g, m => {
                return `<span class="word">`  
                    m.replace(/(-|)?S(-|@)?/g, "<span class='letter'>$amp;</span>")  
                    `</span>`;
            });

            var targets = Array.from(textWrapper.querySelectorAll('.letter'));

            let ani = anime.timeline({
                loop: true,
            })
                .add({
                    targets: targets,
                    scale: [3, 1],
                    scaleY: [1.5, 1],
                    opacity: [0, 1],
                    translateZ: 0,
                    easing: "easeOutExpo",
                    duration: 400,
                    delay: (el, i) => 20 * i
                }).add({
                    opacity: 0,
                    duration: 10000,
                    easing: "easeOutExpo",
                    delay: 800
                });

            animation.push(ani);

            $(".text").removeClass('zoomIn2');

        } else {
            setTimeout(function () {
                textWrapper.innerHTML = textWrapper.textContent.replace(/(<([^>] )>)/gi, "");
            }, 850);


            var targets = Array.from(textWrapper.querySelectorAll('.letter'));

            anime.timeline({
                loop: false,
            })
                .add({
                    targets: targets.reverse(),
                    scale: [1, 2],
                    scaleY: [1, 1.5],
                    opacity: [1, 0],
                    translateZ: 0,
                    easing: "easeOutExpo",
                    duration: 10,
                    delay: (el, i) => 15 * i
                });
            setTimeout(function () {
                $(".text").addClass('zoomIn2');
            }, 800);
        }
    })

}

function restartAnimation() {
    if (checkBox.checked) {
        animation.forEach(element => {
            element.restart();
        });
    }
} 
 .word {
    border: 1px solid red;
}

.letter {
    border: 1px solid lightblue;
}

input.largerCheckbox {
    width: 20px;
    height: 20px;
}

.zoomIn2 {
    animation: zoomIn2 1000ms both
}

@keyframes zoomIn2 {
    from {
        opacity: 0;
        transform: scale3d(0, 0, 0);
    }

    50% {
        opacity: 1;
    }
}

.letter {
    display: inline-block;

}

.word {
    white-space: nowrap;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label for="myCheck" style="color:red; font-size:20px;"><b>Typing.Eff:</b></label>
<input type="checkbox" id="myCheck" class="largerCheckbox" onclick="myTYPINGFunction()">
<button id="button2" onclick="restartAnimation()">play</button>

<h1 class="text">Checkbox is CHECKED!</h1>
<h1 class="text">Checkbox is CHECKED!</h1>
<h1 class="text">Checkbox is CHECKED!</h1>