Как вызвать выражение выражения без присваивания - PullRequest
Новая
       8

Как вызвать выражение выражения без присваивания

2 голосов
/ 04 апреля 2019

Я пытаюсь работать с библиотекой 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. Когда я пытаюсь сделать это текущим способом, я получаю предупреждение: выражение не является присваиванием или вызовом.

Я не знаю, есть ли способ обойти это и сделать это возможным, поэтому я надеюсь, что кто-то здесь может мне помочь.

Заранее спасибо

1 Ответ

2 голосов
/ 04 апреля 2019

Предлагаю использовать возвращаемое значение / объект вызова функции и работать с этим значением.В противном случае вы всегда создаете новую анимацию. 

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