jQuery GIF动画

Question

jQuery GIF动画

jqueryanimationgif

5

我想使用jQuery来替代GIF的方式来创建一个相当简单的动画。

我的需求是，让一张图片有四个阶段。 1）什么都不显示 2）图片的第一部分 3）图片的第二部分 4）图片的第三部分 - 重新开始

我认为我需要创建图像阶段，然后使用jQuery的“用下一个替换当前图像”的技术来创建动画。这可能会非常容易与回调函数一起使用。

接下来的部分是在前一个动画完成加载后，在多个地方显示此动画。同样，使用回调函数也可以很容易实现。

我想听听您的想法。不使用GIF是否愚蠢？还是jQuery能做到呢？

- Kane

6个回答

1

请查看此页面的演示，了解使用jquery实现背景动画的效果，并参考此处的教程。

敬礼。

- Sinan

0

如果它是恒定的而不是事件驱动的，我建议使用gif。

然而，如果动画是响应页面上发生的事情，或者您只想在所有内容加载完成后才开始它，那么jquery可能是最好的选择。

您应该能够更改图像源（或位置偏移量，如果您正在使用单个图像）来更改图像。请查看jQuery中的一些“暂停”选项以延迟图像之间的更改。

未经测试的示例（源自上面链接中Simon的答案）：

function chg1() { $('#myimage').attr('src', ''); }
function chg2() { $('#myimage').attr('src', 'image1src.jpg'); }
function chg3() { $('#myimage').attr('src', 'image2src.jpg'); }
function chg4() { $('#myimage').attr('src', 'image3src.jpg'); }

function StartAnimation() {
    setTimeout(chg1, 2000);  // blank after 2 seconds
    setTimeout(chg2, 4000);  // img 1 after 4 seconds
    setTimeout(chg3, 6000);  // img 2 after 6 seconds
    setTimeout(chg4, 8000);  // img 3 after 8 seconds
    setTimeout(StartAnimation, 8000);  // start again after 8 seconds
}

StartAnimation();  // start it off

- Damovisa

看起来对animate的调用会堆叠得很好，但是对src的更改，由于它们并不作为动画的回调发生，所以都会立即连续触发？ - Funka

@Funka - 你说得很对，animate不会阻塞。我会修改代码的。 - Damovisa

是的，@Funka是正确的。jQuery是异步的，所以您需要使用回调来实现这一点。 - Jeremy Visser

@Jeremy和Funka - 我已经更新了脚本。你们两个都是对的，那个调用是异步的。我现在用了另一种方法。 - Damovisa

我也会使用循环来切换图片...只需将图像源设置为数组，然后通过数组进行迭代，使用jquery $data属性在图像上定义数组的键，($el.data方法接受整数和其他数据类型，而不仅仅是字符串)。这种行为的示例可以在http://lookoutforsmartgrowth.org/的主页图像滑块上看到。 - CodeJoust

是的，肯定有更优雅的方式来实现它。 - Damovisa

0

首先，您可以使用几个 div 的背景，将所需的图像部分放置在其中。

css_background-position

然后，根据所需的动画类型，以您需要显示的方式显示 div。

- andres descalzo

0

使用动画GIF——这就是它们制作的目的。我相信使用JQuery可以拼凑出一个解决方案，但你将付出额外的开发时间和复杂性成本。

此外，你应该认识到选择定制的JQuery/CSS方案意味着你在紧密地耦合动画与其所在页面之间做出了决策。如果有人想在不同的页面上包含该动画怎么办？他们必须复制大量的代码而不是一个单独的GIF文件。如果有人想将其包含在电子邮件或Power-point演示文稿中怎么办？无法完成......

- Spike Williams

GIF图像已经过时且不美观，没有透明背景的Alpha通道，只有纯色的遮罩。使用CSS精灵的背景定位，您可以实现比GIF图像更多的效果。 - Sinan

如果在非实心背景上放置透明背景是这种情况下的重要考虑因素，那么是的，选择更强大的JQuery精灵解决方案。但需要认识到的是，这样做会增加额外的复杂性。想象一下可怜的维护编码人员几年后需要进入代码更改图形。假设他们会熟练掌握JQuery和CSS精灵吗？他们可能知道这些东西，但我认为让他们只需放入一个新的GIF就可以完成工作会更好。 - Spike Williams

没错，它比 GIF 更占用资源，但我们已经进入了2010年，他们应该学会使用它 :) - Sinan

0

能否将您的四个图像合并成一个精灵图（一个真实的图形，包含所有四个图像且不重叠）？从性能角度来看，客户端的浏览器只需要下载一个单一的图像，而不是为您的四个图像中的每一个请求4次。

创建动画就像使用Damovisa上面建议的技术一样简单，只需使用一些块元素，将此单个图像设置为背景，并将元素的大小设置为单个图像的“tile”大小，并更改background-position CSS属性。我不完全确定这一点（如果我错了，请纠正我），但移动背景图像似乎比实际交换四个不同的图像更便宜。

至于可移植性和可重用性，您可以创建一个jQuery插件以在多个地方使用它。

- jtrim

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- worked · Accepted Answer

这样做更容易，而且可以保持链式调用：

JQuery：

$(document).ready(function(){
    //rotator - delay, children
    $('#slideshow').rotator(50, 'img');
});

标记语言：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="scripts/jquery.rotator.js"></script>

<style type="text/css">
#slideshow {
    position:absolute; //or whatever you need
    display:block;
    top:0px;
    left:0px;
}
#slideshow img {
    position:absolute;
    opacity:0;
}
</style>

<!-- SLIDESHOW -->
<div id="slideshow">
  <img src="images/1.png">
  <img src="images/2.png">
  <img src="images/3.png">
</div>

插件：

(function( $ ){
    $.fn.rotator = function(delay, child){
        //set curImage val
        var currImg = 0;
        var currIt = true;
        //set array of images
        var ss = $('#slideshow').children(child);
        var ssize = ss.size();
        setInterval(function() {
            if(currIt){
                $(ss[currImg]).css('opacity','1');
                currIt = !currIt;
            }else if (!currIt){
                $(ss[currImg]).css('opacity','0');
                $(ss[currImg+1]).css('opacity','1');
                currIt = !currIt;
                currImg++;
            }
            //reset
            if(currImg >= ssize){
                currImg = 0;
                $(ss[currImg]).css('opacity','1');
            }
        }, delay);
        return this;
    };
})(jQuery);