需要用javascript(模仿gif)和jpgs创建动画 [英] Need to create a animation with javascript (mimic gif) with jpgs

问题描述

我有很多来自旧 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);功能框架(){步骤++；如果(步骤 <93){var newSrc = src.slice(0, index-4) + step + ".jpg";控制台日志(newSrc)；$logo.attr('src', newSrc);设置超时(帧，50)；}}框架();});

但它不起作用……每个动画时间为 0.03 秒，我将图片显示为 "img id="logo" src="images/1000.jpg"/"(当然 <> ) 但它不起作用或无法更改 src.

有帮助吗?谢谢

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

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

解决方案

/*您正在尝试设置 `div` 的 `src`.改为设置 `img` 的 `src`:<div><img id="logo" src="mypath/mylittlepony.jpg">

*/由于问题已被编辑，这不再适用...

现在 这个 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 执行此操作，但是您可以简单地保存一组图像对象，这些对象替换计时器函数中的原始图像.

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.

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

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();
});

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

Edit: 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.

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...

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

EDIT
start after load: look at this JSFiddle
start after load and endless loop: look at this final JSFiddle
extra gimmick: back and forth

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="" />

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.

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