Question

我正在尝试使用javascript中的一些图像创建一个动画，并且我的代码正常工作，但是在它反向运行图像之后，它会在它再次开始前进之前暂停一下。我想知道如何摆脱暂停？

以下是操作中的代码http://isogashii.com/projects/javascript/ch10/dp10-6.html

HTML

<img id="pin" src="assets/pin0.gif" alt="pin animation" />

的Javascript

var pin = new Array(9);
var curPin = 0;
var x = false;

// caching images
for (var imagesLoaded=0; imagesLoaded < 9; ++imagesLoaded) {
    pin[imagesLoaded] = new Image();
    pin[imagesLoaded].src = "assets/pin" + imagesLoaded + ".gif";

    //starts pinF function when all images are cached
    if (imagesLoaded == 8) {
        setInterval("pinF()", 120);
    }
}

function pinF() {

    if (x == true) {
        --curPin;
        if (curPin == 0) {
            x = false;
        }
    }
    if (x == false) {
        ++curPin;
        if (curPin == 8) {
            x = true;
        }
    }

    document.getElementById("pin").src = pin[curPin].src;
}

Answer 1

目前，你做两个＆＃34;帧＆＃34; pin1。改变pinF的逻辑不要那样做。

具体而言，第一次x == true和curPin == 2执行第一次if，将curPin缩减为1。

第二次，x == true仍然是第一个if将curPin降低到0并反转x。然后，第二个if将curPin增加回1。

Answer 2

在if语句的x == true部分中，您应该将curPin设置为1，否则您将复制curPin = 1。

http://jsfiddle.net/A77cx/

function pinF() {

    if (x == true) {
        --curPin;
        if (curPin == 0) {
            curPin = 1;
            x = false;
        }
    }
    if (x == false) {
        ++curPin;
        if (curPin == 8) {
            x = true;
        }
    }

    document.getElementById("pin").src = pin[curPin].src;
}

Javascript setInterval不必要的暂停

2 个答案: