1

我有点新手，我知道我的代码不是最好的，但我正在学习。我将几个作为事件函数触发的图像序列动画放在一起。点击一个按钮，动画。将鼠标悬停在 div 上，动画。等等。

我认为我遇到的麻烦是动画被中断时。我在第二个 else if walk_div.removeChild(img);

然后图像序列开始基本上闪烁。有什么帮助吗？

function loadUp(){
var cyclenum = 175;
var folder = "animations/rollO/";
var imgType = '.png';
var count = 0;
var subCount = 1;
var initialImg = new Image();
initialImg.src = folder + '1.png';
var walk_div = document.getElementById('begin');
var img = new Image();
walk_div.appendChild(initialImg);

function animation(){
count++;
subCount = count - 1;

    if(count == cyclenum){
        clearInterval(walkAnimate);
    }
    else if(count == 1){
        subCount = 2;
        img.src = folder + subCount + imgType;
        walk_div.removeChild(initialImg);
        walk_div.appendChild(img);
        count = 2;      
    }
    else if (count < cyclenum){
        img.src = folder + subCount + imgType;
        walk_div.removeChild(img);      
        img.src = folder + count + imgType;
        walk_div.appendChild(img);
    }
}

var walkAnimate = setInterval(animation, 42);
}

function preAction(){   
var cyclenum = 30;
var folder = "animations/pre/";
var imgType = '.png';
var count = 0;
var subCount = 1;
var initialImg = new Image();
initialImg.src = folder + '1.png';
//Clears out the walk div
var rmv = document.getElementById('begin');
if (rmv.hasChildNodes()){
    while (rmv.childNodes.length >= 1)
    {
        rmv.removeChild(rmv.firstChild);
    }
}
//end clear
var walk_div = document.getElementById('begin');
var img = new Image();
walk_div.appendChild(initialImg);

    function animation(){
    count++;
    subCount = count - 1;

        if(count == cyclenum){
            clearInterval(walkAnimate);
        }
        else if(count == 1){
            subCount = 2;
            img.src = folder + subCount + imgType;
            walk_div.removeChild(initialImg);
            walk_div.appendChild(img);
            count = 2;      
        }
        else if (count < cyclenum){
            img.src = folder + subCount + imgType;
            walk_div.removeChild(img);      
            img.src = folder + count + imgType;
            walk_div.appendChild(img);
        }
    }

    var walkAnimate = setInterval(animation, 42);
}

function nextAction(){  
var cyclenum = 30;
var folder = "animations/next/";
var imgType = '.png';
var count = 0;
var subCount = 1;
var initialImg = new Image();
initialImg.src = folder + '1.png';
//Clears out the walk div
var rmv = document.getElementById('begin');
if (rmv.hasChildNodes()){
    while (rmv.childNodes.length >= 1)
    {
        rmv.removeChild(rmv.firstChild);
    }
}
//end clear
var walk_div = document.getElementById('begin');
var img = new Image();
walk_div.appendChild(initialImg);

    function animation(){
    count++;
    subCount = count - 1;

        if(count == cyclenum){
            clearInterval(walkAnimate);
        }
        else if(count == 1){
            subCount = 2;
            img.src = folder + subCount + imgType;
            walk_div.removeChild(initialImg);
            walk_div.appendChild(img);
            count = 2;      
        }
        else if (count < cyclenum){
            img.src = folder + subCount + imgType;
            walk_div.removeChild(img);      
            img.src = folder + count + imgType;
            walk_div.appendChild(img);
        }
    }

    var walkAnimate = setInterval(animation, 42);
}

function galleryRightIn(){  
var cyclenum = 15;
var folder = "animations/galleryRIn/";
var imgType = '.png';
var count = 0;
var subCount = 1;
var initialImg = new Image();
initialImg.src = folder + '1.png';
//Clears out the walk div
var rmv = document.getElementById('begin');
if (rmv.hasChildNodes()){
    while (rmv.childNodes.length >= 1)
    {
        rmv.removeChild(rmv.firstChild);
    }
}
//end clear
var walk_div = document.getElementById('begin');
var img = new Image();
walk_div.appendChild(initialImg);

    function animation(){
    count++;
    subCount = count - 1;

        if(count == cyclenum){
            clearInterval(walkAnimate);
        }
        else if(count == 1){
            subCount = 2;
            img.src = folder + subCount + imgType;
            walk_div.removeChild(initialImg);
            walk_div.appendChild(img);
            count = 2;      
        }
        else if (count < cyclenum){
            img.src = folder + subCount + imgType;
            walk_div.removeChild(img);      
            img.src = folder + count + imgType;
            walk_div.appendChild(img);
        }
    }

    var walkAnimate = setInterval(animation, 42);
}

function galleryRightOut(){ 
var cyclenum = 15;
var folder = "animations/galleryROut/";
var imgType = '.png';
var count = 0;
var subCount = 1;
var initialImg = new Image();
initialImg.src = folder + '1.png';
//Clears out the walk div
var rmv = document.getElementById('begin');
if (rmv.hasChildNodes()){
    while (rmv.childNodes.length >= 1)
    {
        rmv.removeChild(rmv.firstChild);
    }
}
//end clear
var walk_div = document.getElementById('begin');
var img = new Image();
walk_div.appendChild(initialImg);

    function animation(){
    count++;
    subCount = count - 1;

        if(count == cyclenum){
            clearInterval(walkAnimate);
        }
        else if(count == 1){
            subCount = 2;
            img.src = folder + subCount + imgType;
            walk_div.removeChild(initialImg);
            walk_div.appendChild(img);
            count = 2;      
        }
        else if (count < cyclenum){
            img.src = folder + subCount + imgType;
            walk_div.removeChild(img);      
            img.src = folder + count + imgType;
            walk_div.appendChild(img);
        }
    }

    var walkAnimate = setInterval(animation, 42);
}

function galleryBackIn(){   
var cyclenum = 15;
var folder = "animations/galleryBIn/";
var imgType = '.png';
var count = 0;
var subCount = 1;
var initialImg = new Image();
initialImg.src = folder + '1.png';
//Clears out the walk div
var rmv = document.getElementById('begin');
if (rmv.hasChildNodes()){
    while (rmv.childNodes.length >= 1)
    {
        rmv.removeChild(rmv.firstChild);
    }
}
//end clear
var walk_div = document.getElementById('begin');
var img = new Image();
walk_div.appendChild(initialImg);

    function animation(){
    count++;
    subCount = count - 1;

        if(count == cyclenum){
            clearInterval(walkAnimate);
        }
        else if(count == 1){
            subCount = 2;
            img.src = folder + subCount + imgType;
            walk_div.removeChild(initialImg);
            walk_div.appendChild(img);
            count = 2;      
        }
        else if (count < cyclenum){
            img.src = folder + subCount + imgType;
            walk_div.removeChild(img);      
            img.src = folder + count + imgType;
            walk_div.appendChild(img);
        }
    }

    var walkAnimate = setInterval(animation, 42);
}

function galleryBackOut(){  
var cyclenum = 15;
var folder = "animations/galleryBOut/";
var imgType = '.png';
var count = 0;
var subCount = 1;
var initialImg = new Image();
initialImg.src = folder + '1.png';
//Clears out the walk div
var rmv = document.getElementById('begin');
if (rmv.hasChildNodes()){
    while (rmv.childNodes.length >= 1)
    {
        rmv.removeChild(rmv.firstChild);
    }
}
//end clear
var walk_div = document.getElementById('begin');
var img = new Image();
walk_div.appendChild(initialImg);

    function animation(){
    count++;
    subCount = count - 1;

        if(count == cyclenum){
            clearInterval(walkAnimate);
        }
        else if(count == 1){
            subCount = 2;
            img.src = folder + subCount + imgType;
            walk_div.removeChild(initialImg);
            walk_div.appendChild(img);
            count = 2;      
        }
        else if (count < cyclenum){
            img.src = folder + subCount + imgType;
            walk_div.removeChild(img);      
            img.src = folder + count + imgType;
            walk_div.appendChild(img);
        }
    }

    var walkAnimate = setInterval(animation, 42);
}

编辑：首先，感谢您的回复！

使用 setAnimationFrame 的部分问题是它在 IE 中不可靠。我也有最多 175 帧的图像序列，所以映射一张巨大的图像听起来像是很多工作 - 但是，我至少现在知道我什至可以做到这一点。可能对其他项目很方便。

这些动画有一个非常具体的开始和停止。当用户与网页交互时，卡通会指向不同的元素。我最终从 div 中删除了 firstChild。我意识到我正在调用一个特定的图像，所以当动画被中断时它不存在时，这就是我得到 DOM 8 的原因。它现在工作得更好了。

我现在需要做的是在另一个动画开始时停止动画。我发现你不能用 Javascript 真正做到这一点。我可以清除间隔，但它们需要是全局的，而且我还没有弄清楚如何做到这一点。我唯一的另一个想法是在单独的 div 中运行它们并根据活动功能隐藏或显示。然而，这意味着动画继续运行......只是在后台。除了开场动画外，它们只有 30 帧，而且我将图像的文件大小制作得非常小，但要继续运行就需要很多。我会用它作为最后的手段，但我更愿意找到更好的方法。

编辑编辑：

我最终对图像使用了相同的做法 - 添加和删除动画运行的 div。我知道这可能不是最优雅的方法，但直到事情变得更标准（咳嗽IE咳嗽）它会必须要做。它也适用于所有主流浏览器，甚至支持 IE7。

感谢大家抽出宝贵的时间！

4

1 回答 1

0

DOM 8 错误意味着它找不到您要删除的元素。您正在尝试删除不存在的元素。

您要么需要检测是否需要以不同的方式移除元素，要么使用另一种方法来检测元素本身。

但是，这些都不重要，因为您尝试做的事情以另一种方式做得更好。而不是像这样创建和销毁元素，您应该使用图像条并像这样更改背景位置：

// Wait for the window load event and start the animation.
window.addEventListener('load', init, false);

var frame = 0; // Current frame
var frames = 8; // Frame count
var frameWidth = 64; // Frame dimensions
var frameHeight = 64;
var element; // DOM element to animate

function init() {
    // Fetch the dom element.
    element = document.getElementById('anim');
    // Begin the animation. Ideally you would use requestAnimationFrame but I'm
    // using setInterval for simplicity.
    setInterval(animate, 120);
}

function animate() {
    // Increment the frame number.
    frame = (frame + 1) % frames;
    // Set the element's backgroundPosition to "0px -#px" according to the frame
    // number and size.
    element.style.backgroundPosition = '0px -' + (frame * frameHeight) + 'px';
    // You use negative dimensions here because it's an offset of the background
    // image, and moving the image up requires negative dimensions, since
    // positive on the Y-axis is down.
}

你可以看到它在这里工作：http: //jsfiddle.net/xfYk6/

另一种类似于您自己的方法是简单地隐藏未使用的帧，而不是销毁它们并重新创建它们。但是，我不会推荐这种方法。

于 2013-02-26T00:08:58.523 回答