我正在尝试使用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语句不是赋值或调用。
我不知道是否有办法解决这个问题并使之成为可能,所以我希望这里的人能帮助我。
预先感谢
答案 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();