javascript - 动画回到起点

Question

我制作了一个小程序来使图像来回移动。现在第一个 jobbra 按钮运行良好，图像正在向右逐个像素地动画 picel，但我的后退按钮 balra 不起作用，图像不会移回到它的起点。有没有人知道为什么，请帮忙。谢谢

var jobbAnim = 1;
var speed = 1;
var balAnim = 400;



function jobbra() {



    if (jobbAnim < 400) {
        jobbAnim = jobbAnim + speed;
    }


    document.getElementById("ilonakep").style.marginLeft = jobbAnim + "px";
    window.requestAnimationFrame(jobbra);

}


function balra() {
    if (balAnim >= 400) {

        balAnim = balAnim - speed;
    }
    document.getElementById("ilonakep").style.marginRight = balAnim + "px";
    window.requestAnimationFrame(balra);
}

<div id="container">
    <div id="ilonakep">
        <img src="/img/ilona.jpg" alt="ilona">
    </div>
</div>
<p id="gombok">
    <button onclick="balra()">Balra</button>
    <button onclick="jobbra()">Jobbra</button>
</p>

Answer 1

您应该使用cancelAnimationFrame 来确保一次只播放一个动画，否则每次单击其中一个按钮时都会启动一个新动画。我还建议您为元素的位置设置动画(或者更好的是，使用 transform: translate();)而不是边距。它不像使用 CSS 转换那样理想，但它使它更直观。

var left = 0;
var speed = 1;
var anim;

function jobbra() {
    if (anim) {
        window.cancelAnimationFrame(anim);
    }


    if (left < 400) {
        left = left + speed;
    }

    document.getElementById("ilonakep").style.left = left + "px";
    anim = window.requestAnimationFrame(jobbra);
}


function balra() {
    if (anim) {
        window.cancelAnimationFrame(anim);
    }

    if (left > 0) {
        left = left - speed;
    }

    document.getElementById("ilonakep").style.left = left + "px";
    anim = window.requestAnimationFrame(balra);
}

<div id="container">
    <div id="ilonakep" style="position: relative; display: inline;">
        <img src="/img/ilona.jpg" alt="ilona">
    </div>
</div>
<p id="gombok">
    <button onclick="balra()">Balra</button>
    <button onclick="jobbra()">Jobbra</button>
</p>