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。当我尝试以当前方式这样做时，我得到警告：Expression语句不是赋值或调用。

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

预先感谢

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();

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

1 个答案: