Question

Video showing the problem. 我正在制作有关赛马游戏的JavaScript项目，并且在赛道上，角色应该检测并触发跳跃动画的障碍。没有明显的原因，动画返回的方式很差，并且角色返回后不久，角色又飞出了屏幕，第二个障碍发生了相同的事情。在视频的开头部分，我只是展示了动画的外观。

该逻辑基于 setInterval 构建，并具有 element.offsetTop 功能。 “开始”按钮触发间隔，从而触发移动功能。在该功能内，将检查角色的位置和当前选择的障碍物（通过 i 计数器）。当角色在障碍物之前达到80像素时，if语句通过向元素添加类名来触发动画，此后我不知道发生了什么。与其模仿Daedalus，不如让它平稳地执行动画，触发另一个if语句来计算灌木丛，并删除给定的类名以使另一个跳转可行。

动画的CSS代码

.horse.jump {
animation-iteration-count: 500;
transform: rotate(0deg) scale(1,1);
margin-top: 0;
animation-direction: initial, initial;
background-position:48px -192px;
animation-fill-mode: backwards;
animation: jump 1s;
}

JS代码

var horse = document.getElementsByClassName('horse');
var bush = document.getElementsByClassName('bush');    
var i = 0; //Counter for the next obstacle    

function horseMoving () { 
    //Function connecting Start Button with 
    // moving function by interval
    setInterval(moveDown, 9);
}

function moveDown (){   
    // Cheking character position   
    var positionHorseUp = horse[0].offsetTop;

    //Checking for the current closest obstacle
    var positionBushUp = bush[i].offsetTop;

    horse[0].classList.add('runDown');      
    horse[0].style.top = positionHorseUp + 1 + 'px';

    //When the character gets close to obstacle
    if (positionHorseUp==positionBushUp-80) {

        //Makes horse to jump
        horse[0].classList.add('jump');         
    }   

   //When the character gets away from obstacle
    if (positionHorseUp==positionBushUp+20) {           
        //Takes away the jump class
        horse[0].classList.remove('jump');

        // This statements prevents an array 
        // from getting out of elements 
        // and triggers cheking for next obstacle
        if (i<5) { 
            i++; }  
    }   
}

 // These 2 functions are only for video purpose
function showJump() {
    horse[0].classList.add('jump')}
function showJump2() {
    horse[0].classList.remove('jump')}


function loadFunction() {

    var startButton = document.getElementById('start')
    startButton.addEventListener('click', horseMoving)

    // These 2 lines are only for video purpose
    startButton.addEventListener('click', showJump2)
    horse[0].addEventListener('click', showJump)
}

document.addEventListener('DOMContentLoaded', loadFunction);

Answer 1

由于您已将动画应用于Select count(*),year from movies group by year类，因此添加该类时实际上会更改jump的值。因此，您不应该依赖offsetTop，而应该使用自己设置的自变量，让offsetTop依赖于 it 。首先将其设置为offsetTop，然后增加它而不是增加offsetTop，然后再设置offsetTop。这可能令人困惑，所以让我发布一些代码。

您将在脚本开始处添加它。

top

然后将其添加到您的加载事件。

var positionHorseUp;

然后您将删除此行...

positionHorseUp = horse[0].offsetTop;

...并用该位置替换设置var positionHorseUp = horse[0].offsetTop;位置的位置。

top

那样，什么都不会取决于horse[0].style.top = ++positionHorseUp + 'px';的值，并且您可以安全地应用该动画而不会中断马的存储位置。

（还使用requestAnimationFrame，而不是offsetTop。效率更高，因为它在每个绘画帧上都被调用。还添加相应的代码以补偿浏览器环境之间不确定的时间间隔。）< / p>

动画使元素脱离屏幕

1 个答案: