将背景图像序列更改为spritesheet

change a sequence of background images as spritesheet

本文关键字：spritesheet 背景 图像序列      更新时间：2023-09-26

我有一个对话屏幕要开发，我计划每毫秒更改一次背景图像，使其看起来像动画。我尝试过使用jquery settimeout和setinterval，但这两种方式都会挂起浏览器，任何关于如何完成任务的想法。

function change_background(new_image_source) { 
    var myimage = $( '#spriteanim' );
    myimage.attr('src','style/images/Sprites/Screen1/'+new_image_source+'.png');
    console.log(myimage.attr('src'));
    timer = setTimeout( function () {
        new_image_source = new_image_source+1;
        change_background(new_image_source);
    }, 50);
    if(new_image_source>=10899){
        change_background(new_image_source);
        clearTimeout(timer);
    }
}

更改src属性永远不会如您所愿。这是因为浏览器需要时间来加载图像。即使它被缓存，它仍然太慢，无法设置动画。我建议将您的图像组合到sprite中，并更改背景位置。您甚至可以使用纯css转换来实现这一点。

例如->http://jsfiddle.net/krasimir/uzZqg/

HTML

<div class="image"></div>

CSS

.image {
    background: url('...');
    width: 200px;
    height: 200px;
    transition: all 4000ms;
    -webkit-transition: all 4000ms;
}
.image:hover {
    background-position: -500px 0;
}

您甚至可以使用关键帧。

以下是如何预加载图像http://jsfiddle.net/krasimir/DfWJm/1/

HTML

<div id="preloader"></div>

JS-

var images = [
'http://www.australia.com/contentimages/about-landscapes-nature.jpg',
'http://www.australia.com/contentimages/about-landscapes-nature.jpg',
'http://www.australia.com/contentimages/about-landscapes-nature.jpg',
'http://www.australia.com/contentimages/about-landscapes-nature.jpg',
'http://www.australia.com/contentimages/about-landscapes-nature.jpg',
'http://www.australia.com/contentimages/about-landscapes-nature.jpg'    
];
var preloader = document.getElementById("preloader");
var preloadImages = function(callback) {
    if(images.length == 0) {
        callback();
        return;
    }
    var image = images.shift();
    var img = document.createElement("IMG");
    img.setAttribute("src", image);
    preloader.appendChild(img); 
    img.addEventListener("load", function() {
        console.log("image loaded");
        preloadImages(callback);
    });    
}
preloadImages(function() {
    // your animation starts here
    alert("Images loaded");
});

当然，您可以使用display:none隐藏#preloaderdiv；

结账http://spritely.net/

它将处理设置精灵表动画的细节。让我们来设置FPS并控制播放。

我认为"每毫秒"有点太快了
图像加载需要一些时间。我认为，在开始动画之前，你应该加载所有的图像一次。这将需要一些时间，因为您使用的图像数量似乎为10899。每隔几毫秒就隐藏一个。"几毫秒"，而不是"每毫秒"，应该做你的工作。

更新：
将您的图像命名为spriteanim0、spriteanim1。。。像这样。在所有图像都已加载，并且所有图像都分配了display: none之后，调用此js函数：

    var new_image_source1;
    function change_background(prev_image_source, new_image_source) {
        document.getElementById('spriteanim' + prev_image_source).style.display = 'none';
        document.getElementById('spriteanim' + new_image_source).style.display = 'block';
        if (new_image_source >= 10899)
            new_image_source1 = 0;
        else
            new_image_source1 = new_image_source + 1;
        window.setTimeout(
            function () {
                change_background(new_image_source, new_image_source1);
            },
            50);
    }

您可以尝试此操作，并根据需要相应地更改setTimeout间隔值。

相关文章：