需要创建一个动画与javascript(模仿gif)与jpg

Need to create a animation with javascript (mimic gif) with jpgs

本文关键字：javascript 模仿 gif jpg 动画 一个 创建      更新时间：2023-09-26

我有一堆来自旧flash动画的jpeg。它们的名字从1000.jpg到1092.jpg按这个顺序播放。我试着用这些图片创建一个gif动画，但是这个gif太大了，质量也很糟糕。

这就是为什么我尝试使用jQuery动画这些jpeg来模仿这个gif动画。

这是我在stackoverflow 上找到的代码
$("#logo").click(function() {
var $logo = $(this), src = $logo.attr("src");
var index = src.indexOf('.jpg');
var step = +src.slice(index-4, index);
function frame() {
    step++;
    if(step < 93) {
        var newSrc = src.slice(0, index-4) + step + ".jpg";
        console.log(newSrc);
        $logo.attr('src', newSrc);
        setTimeout(frame, 50);
    }
}
frame();
});

但是它不工作…动画时间为0.03秒，我有图片为"img id="logo" src="images/1000.jpg"/"(当然有<>)，但它不工作或改变src.

有什么帮助吗?由于

编辑:请再次帮助，因为这让我发疯了。我尝试了精灵的东西，但它不起作用，因为你可以看到背景是如何移动的。

我真的只需要模仿那个gif，它只是一个简单的gif由93张图片组成。这只是一个动画，其中一张脸变成另一张脸…

/*
You are trying to set the `src` of a `div`. Set the `src` of an `img` instead:
<div>
  <img id="logo" src="mypath/mylittlepony.jpg">
</div>
*/
this doesn't apply anymore since the question was edited...

现在这个JSFiddle可以按照您的要求工作了，至少在我的浏览器(Firefox 4.0.1)中是这样的。

编辑
加载后启动:看看这个JSFiddle
加载后开始，循环结束:看看这个最终的JSFiddle
额外的噱头:来回

缓存仍然有问题。只有当所有图像都被缓存时，动画才是流动的。您可以将它们作为1-px-imgs放在您的页面上预加载。

<img src="http://iflorian.com/test/image/1000.jpg" height="1" width="1" alt="" />
<img src="http://iflorian.com/test/image/1001.jpg" height="1" width="1" alt="" />
<img src="http://iflorian.com/test/image/1002.jpg" height="1" width="1" alt="" />
...
<img src="http://iflorian.com/test/image/1050.jpg" height="1" width="1" alt="" />

当然，你可以通过JQuery来做到这一点，但是你可以简单地保存一个图像对象数组来替换定时器函数中的原始图像。

如果Javascript引发任何错误，请检查您的Web浏览器的错误控制台…因为如果JS的任何部分引发异常并未能运行，那么效果也可能失败。我偶尔也遇到过。

相关文章：