用Javascript进行逐帧动画 [英] Frame by frame animation with Javascript

问题描述

我正在通过对一系列图像进行动画处理来使用Javascript进行逐帧动画.

I'm doing a frame by frame animation with Javascript by animating a sequence of images.

动画的代码非常简单.

我的问题是，可能有很多图像，目前有200张，但最多可能有1000张.同时加载图像可能要花一些时间.我想先播放30张图像的动画，然后将其余的预加载到背景中.但是有时，图像需要花费一些时间才能加载，从而破坏了动画效果.

My problem is, there can be a lot of images, presently 200 but can be up to 1000. Loading the images simultanely can take some times. I'd like to play the animation with 30 images initially and preload the remain in the background. But sometimes, the images take a time to load thus breaking the animation.

如何在下一个图像可用时用缓冲"暂停动画并继续动画?另外，当图像已经被缓存时，如何跳过预加载?可以使用一些建议来改进代码.

How can I pause the animation with a "buffering" and continue the animation when the next image is available ? Also how to skip the preloading when the images are already cached ? Could use some suggestion to improve the code.

HTML

<div class="video-stream">
    <img alt="" src="images/stream/Calque-120.jpg" />
    <img alt="" src="images/stream/Calque-121.jpg" />
    <img alt="" src="images/stream/Calque-122.jpg" />
    <img alt="" src="images/stream/Calque-123.jpg" />
    <img alt="" src="images/stream/Calque-124.jpg" />
    <img alt="" src="images/stream/Calque-125.jpg" />
    <img alt="" src="images/stream/Calque-126.jpg" />
    <img alt="" src="images/stream/Calque-127.jpg" />
    <img alt="" src="images/stream/Calque-128.jpg" />
    <img alt="" src="images/stream/Calque-129.jpg" />
    <img alt="" src="images/stream/Calque-130.jpg" />
    <img alt="" src="images/stream/Calque-131.jpg" />
    <img alt="" src="images/stream/Calque-132.jpg" />
    <img alt="" src="images/stream/Calque-133.jpg" />
    <img alt="" src="images/stream/Calque-134.jpg" />
    <img alt="" src="images/stream/Calque-135.jpg" />
    <img alt="" src="images/stream/Calque-136.jpg" />
    <img alt="" src="images/stream/Calque-137.jpg" />
    <img alt="" src="images/stream/Calque-138.jpg" />
    <img alt="" src="images/stream/Calque-139.jpg" />
    <img alt="" src="images/stream/Calque-140.jpg" />
    <img alt="" src="images/stream/Calque-141.jpg" />
    <img alt="" src="images/stream/Calque-142.jpg" />
    <img alt="" src="images/stream/Calque-143.jpg" />
    <img alt="" src="images/stream/Calque-144.jpg" />
    <img alt="" src="images/stream/Calque-145.jpg" />
    <img alt="" src="images/stream/Calque-146.jpg" />
    <img alt="" src="images/stream/Calque-147.jpg" />
    <img alt="" src="images/stream/Calque-148.jpg" />
    <img alt="" src="images/stream/Calque-149.jpg" />
</div>

CSS

.video-stream
{
    position: relative;
}
.video-stream img
{
    display: none;
    height: auto;
    left: 0;
    max-width: 100%;
    position: absolute;
    top: 0;
    vertical-align: top;
}

JavaScript

Javascript

var current = 0, // current playing image index
    next = 1, // next image index to play
    interval = 60, // animation speed
    hide_delay = 1, // Delay to hide the current image
    img_num = 200, // Total number of image
    pack = 10, // Images being preloaded simultanely
    idx_start = 149, // The images are index-suffixed so this is the index of the first image to preload
    idx_end = 300; // index of the last image in the sequence

var load_more = function()
{
    if(idx_start < idx_end)
    {
        // Preloading images
        var temp = [],
            temp_html = '';

        for(var i = 0; i < pack && idx_start < idx_end; i++)
        {
            temp[i] = 'images/stream/Calque-' + (++idx_start) + '.jpg';
        }

        preloadPictures(temp, function()
        {
            $.each(temp, function(i, v)
            {
                temp_html += '<img src=' + v + ' />';
            });
            // Inject into dom
            $('.video-stream').append(temp_html);

        });
    }    

}

var play_stream = function()
{
    $('.video-stream').find('img').eq(current).delay(interval).fadeOut(hide_delay)
    .end().eq(next).delay(interval).hide().fadeIn(hide_delay, play_stream);

    if(next < img_num - 1)
    {
        next++;
    }
    else
    {
        next = 0;
    }

    if(current < img_num - 1)
    {
        current++;
    }
    else
    {
        current = 0;
    }

    // Background preload
    if(idx_start < idx_end)
    {
        load_more();
    }    
};

$(window).load(function()
{
    play_stream();
});

推荐答案

这是一种很棘手的方法，但是确实如此.您只需要传递一张图像阵列即可，而不是我的数量；

This is a tricky way of doing it but here it is. You just need an array of images to pass through instead of my count;

var count = 0;
var buffer = 1;
var Vbuffer = 2;
setInterval(function() {
  $('#img .' + buffer).prop('src', 'https://placeholdit.imgix.net/~text?txtsize=33&txt=' + count + '&w=150&h=150');
  buffer = buffer % 3 + 1;
  $('#img img').not('.' + Vbuffer).hide();
  $('#img .' + Vbuffer).show();
  Vbuffer = Vbuffer % 3 + 1;
  count++;
}, 1000);



var buffer2 = 1;
var Vbuffer2 = 2;
var arrayOfImg = ['https://placeholdit.imgix.net/~text?txtsize=33&txt=one&w=150&h=150',
  'https://placeholdit.imgix.net/~text?txtsize=33&txt=two&w=150&h=150',
  'https://placeholdit.imgix.net/~text?txtsize=33&txt=three&w=150&h=150',
  'https://placeholdit.imgix.net/~text?txtsize=33&txt=four&w=150&h=150',
  'https://placeholdit.imgix.net/~text?txtsize=33&txt=five&w=150&h=150'
]
var count2 = 0;
var arrayCount = arrayOfImg.length;
setInterval(function() {
  $('#img2 .' + buffer2).prop('src', arrayOfImg[count2]);
  buffer2 = buffer2 % 3 + 1;
  $('#img2 img').not('.' + Vbuffer2).hide();
  $('#img2 .' + Vbuffer2).show();
  Vbuffer2 = Vbuffer2 % 3 + 1;
  count2 = (count2 + 1) % arrayCount;
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
wait 3 seconds while the buffer loads
<div id='img'>
  <img src='' class='1' />
  <img src='' class='2' />
  <img src='' class='3' />
</div>

<div id='img2'>
  <img src='' class='1' />
  <img src='' class='2' />
  <img src='' class='3' />
</div>

编辑

在结果中添加了数组，因此您可以传递img源数组以通过角色进行操作.

Added arrays to the results, so you can pass in an array of img sources to role through.

这篇关于用Javascript进行逐帧动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！