1

私は少し初心者で、自分のコードが最適ではないことはわかっていますが、学んでいます。イベントの関数としてトリガーされるいくつかのイメージ シーケンス アニメーションをまとめています。ボタン、アニメーションをクリックします。div、アニメーションにカーソルを合わせます。等。

私が遭遇している問題は、アニメーションが中断されたときだと思います。2 番目の else if walk_div.removeChild(img); で「Uncaught Error: NOT_FOUND_ERR: DOM Exception 8」が表示されます。

その後、画像シーケンスは本質的に点滅し始めます。何か助けはありますか？

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 フレームの画像シーケンスも持っているため、1 つの巨大な画像をマッピングするのは大変な作業のように思えますが、少なくともそれができることはわかっています。他のプロジェクトで便利かもしれません。

これらのアニメーションには、非常に具体的な開始と停止があります。漫画は、ユーザーが Web ページを操作するときにさまざまな要素を指します。私は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 に答える