需要用jpgs创建一个带有javascript（mimic gif）的动画 [英] Need to create a animation with javascript (mimic gif) with jpgs

问题描述

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

I'm having a buch of jpegs coming from a old flash animation. They're named from 1000.jpg to 1092.jpg playing in that order. I tried to create a .gif animation with those pictures but the gif was simply to big and the quality was horrible.

这就是我尝试使用的原因jQuery动画那些jpeg来模仿这个gif动画。

This is why I tried to use jQuery to animate those jpegs to mimic this gif animation.

这是我在stackoverflow上找到的代码

This is the code I found here on 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秒我有照片asimg id =logosrc =images / 1000.jpg/（肯定是<>）但它不起作用或更改src。

But it's not working ... the animation time was 0,03 seconds each and I had the picture as "img id="logo" src="images/1000.jpg"/" (for sure with the <> ) but it's not working or changing the src.

任何帮助使这项工作？
谢谢

Any help make that work? Thanks

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

Please help once again as this is driving me crazy. I tried the sprite thing but that doesnt work as you can see the fade how the background gets moved.

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

I really just need to mimic that gif, it's just a simple gif consisting out of 93 pics. It's just an animation where a face changes to another face ...

推荐答案

/*
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） ）。

Now this JSFiddle works as you want it, at least in my browser (Firefox 4.0.1).

编辑

加载后启动：查看这个JSFiddle

在加载和无限循环后启动：看看这个最终的JSFiddle

额外的噱头：返回

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

You still do have a problem with caching. The animation is fluid only if all the images are cached. You could preload them by putting them as 1-px-imgs on your page.

<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来做到这一点，但是你可以简单地保存一个图像对象数组替换定时器功能中的原始图像。

Of course you can do this via JQuery, but then you could simply hold an array of image objects which replace the original image in the timer function.

这篇关于需要用jpgs创建一个带有javascript（mimic gif）的动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！