需要使用 javascript (mimic gif) 和 jpg 创建动画

发布于 2024-11-27 18:23:38 字数 869 浏览 3 评论 0原文

我有一堆来自旧 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，它只是一个由 93 张图片组成的简单 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.

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

魂ガ小子 2024-12-04 18:23:38

/*
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 来完成此操作，但是您可以简单地保存一个图像对象数组，以替换计时器函数中的原始图像。

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

回复收藏 0 原文