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

时间:2019-04-04 08:39:07

标签: javascript expression anime.js

我正在尝试使用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语句不是赋值或调用。

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

预先感谢

1 个答案:

答案 0 :(得分:2)

我建议使用函数调用的返回值/对象并使用该值。否则,您将始终创建新的动画。

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