CSS:
.dragon {
background-image: url(images/dragon.png);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
width: 180px;
height: 120px;
position: absolute;
bottom: 0;
left: 2000px;
animation: ani-dragon 6s linear infinite;
}
@keyframes ani-dragon {
0% {
left: 2000px;
}
100% {
left: -500px;
}
}
.ani-dino {
animation: ani-dino 1s linear;
}
@keyframes ani-dino {
0% {
bottom: 0;
}
50% {
bottom: 300px;
}
100% {
bottom: 0;
}
}
Javascript语言
let dino = document.querySelector(".dino");
let dragonAnimationTime = parseInt(window.getComputedStyle(dragon).getPropertyValue("animation-duration"));
let dragonPosition = window.getComputedStyle(dragon);
let newAni = 6;
document.addEventListener("keydown", function (e) {
if (e.key == "ArrowUp") {
dino.classList.add("ani-dino");
setInterval(() => {
if (newAni > 2 && Math.round(parseInt(dragonPosition.left)) < -490) {
newAni = dragonAnimationTime - 0.1;
dragon.style.animationDuration = newAni + "s";
dragon.style.left = "2000px";
dragonAnimationTime = newAni;
}
}, 1);
setTimeout(() => {
dino.classList.remove("ani-dino");
}, "1000");
}
});
问题是动画的龙,这是假设动画从右到左,是不工作的罚款。因为我正在减少动画时间,每次'箭头'被触发,龙成功地通过它,并前往最左边。动画持续时间正在减少,因为预期和龙动画是越来越快,因为它应该是,但问题来了,龙的动画有时开始随机从任何地方,因为它应该开始每次从极端的权利,根据我的代码,但在之间,它开始有时随机播放,从任何地方的路径,我真的不明白为什么会这样。
我尝试了我能做的一切,我尝试改变持续时间,我尝试改变龙的水平路径的长度,我尝试了不同代码和逻辑的setInterval和setTimeout。
但真的不明白为什么动画有时开始之间的路径,虽然我每次把它的极端权利,一旦它满足条件,减少动画持续时间,也减少了动画持续时间在它的极端权利(-490px),使目前的运行路径不受影响,仍然不工作。
如果有人拿到这个,请帮忙!
1条答案
按热度按时间3qpi33ja1#
看起来这个bug是在动画运行时更新动画持续时间而间歇性地触发的。不幸的是,浏览器代码的捍卫者(如果我没记错的话,在多个开源浏览器之间复制)可能会回应说,因为CSS没有声明动画持续时间值可以动态改变,这不是bug--它只是不起作用。
我的第一个想法是,每次检测到
ArrowUp
关键事件时添加setInterval计时器可能会导致问题,但没有计时器的问题的持续性证明了这是不正确的。下面介绍的解决方法采用不同的方法来避免在动画运行时更改动画持续时间:
animationend
事件用于检测动画何时结束。animationend
的事件处理程序计算新的动画持续时间,并使用this answer中提供的方法重新启动龙动画。animation
设置为null以重新开始动画之后 * 在龙的style
对象上设置持续时间。之前设置无效。对发布的代码进行微小修改意味着
.dragon
CSS包含用于程序访问的animation-duration
属性。.ani-dragon
CSS包含龙的实际动画规则。left
规则更改为要修改的.dragon
规则。dragon
开始,以消除它们与dino
规则的歧义。dragonDuration
值的计算可能不是预期的-请根据需要进行修改。此解决方法已在Firefox和Edge(一种基于Web工具包的浏览器)中进行了测试:
第一个