javascript - 如何在不分配的情况下调用表达式语句

Question

我正在尝试使用 AnimeJS 库，但在 javascript 的工作方式方面遇到了一些问题。我不是很熟悉 Javasript，但我正在尝试创建返回动画的独立函数。然后将这些函数放在一个数组中，这样我就可以遍历它们。

但问题是我无法调用表达式语句，因为我没有像在 play-btn 和 test-btn 上那样将它分配给按钮。

function GamePiece1() {
    return anime({
        targets: '.p1',
        translateX: 270,
        loop: false,
        autoplay: false
    });
}

function GamePiece2() {
    return anime({
        targets: '.p9',
        translateX: 270,
        loop: false,
        autoplay: false
    });
}

var allAnimations = [
    GamePiece1,
    GamePiece2
];  

function resetAllAnimations(){
    allAnimations.forEach(function (anim) {
        anim().reset;
    });
}

document.querySelector('.play-btn').onclick = GamePiece1().play;
document.querySelector('.test-btn').onclick = GamePiece2().play;
document.querySelector('.pause-btn').onclick = resetAllAnimations;

在函数“resetAllAnimations”中，我希望能够遍历所有动画并调用 .reset。当我尝试以这种当前方式执行此操作时，我收到警告:表达式语句不是赋值或调用。

我不知道是否有办法解决这个问题并使其成为可能，所以我希望这里有人可以帮助我。

提前致谢

Answer 1

我建议使用函数调用的返回值/对象并使用该值。否则你总是创建一个新的动画。

function GamePiece1() {
    return anime({
        targets: '.p1',
        translateX: 270,
        loop: false,
        autoplay: false
    });
}

function GamePiece2() {
    return anime({
        targets: '.p9',
        translateX: 270,
        loop: false,
        autoplay: false
    });
}

var gamePiece1 = GamePiece1(),
    gamePiece2 = GamePiece2(),
    allAnimations = [gamePiece1, gamePiece2];  

function resetAllAnimations(){
    allAnimations.forEach(function (anim) {
        anim.reset();
    });
}

document.querySelector('.play-btn').onclick = gamePiece1().play;
document.querySelector('.test-btn').onclick = gamePiece2().play;
document.querySelector('.pause-btn').onclick = resetAllAnimations;

或者如果最后一部分不起作用，您可以将事件函数包装在一个函数中。

document.querySelector('.play-btn').onclick = () => gamePiece1().play();
document.querySelector('.test-btn').onclick = () => gamePiece2().play();