anime.js 不再播放onclick

Question

这里是 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'>$&</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'>$&</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;

Answer 1

您只需要创建一个动画数组并重新启动每个动画

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'>$&</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>

anime.js 不再播放onclick

anime.js not playing again onclick

javascript

html

jquery

anime.js