用 javascript 为图片制作动画答案

【问题标题】：Animating a pic with javascript用 javascript 为图片制作动画
【发布时间】：2013-10-11 16:36:55
【问题描述】：

如果我有一个从左到右的动画 gif，我如何通过 javascript 将 gif 从右到左切换？我有它的工作，但我不知道如何停止 gif 并将其切换到另一个 gif 从右到左。它只是从左到右再从左到左循环相同的 gif。反向 gif 是 ani_catrev.gif。

   <html>
     <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>Cat running</title>
     <style type="text/css">
     #container {
    background:url(catBack1200.jpg) no-repeat;
    width:1200px;
    height:440px;
}
#catbox {
    position:absolute;
    top:330px;
    left:10px;
}
</style>
<script type="text/javascript">
    var switchDirection = false;
function doAnimation() {
var catbox = document.getElementById("catbox");
var currentLeft = catbox.offsetLeft;
var newLocation;
if (switchDirection == false)
{
newLocation = currentLeft + 5;
if (currentLeft >= 1000)
{
switchDirection = true;
}
}
else
{
newLocation = currentLeft - 5;
if (currentLeft <= 0)
{
switchDirection = false;
}
}
catbox.style.left = newLocation + "px";
}
</script>
</head>

<body onload="setInterval(doAnimation, 10)"> 
<div id="container">
<div id="catbox">
    <img src="ani_cat.gif" id="cat" width="100" height="60" alt="busy kitty" />
</div>
</div>
</body>
</html>

【问题讨论】：

你无法通过 JS 控制 GIF。您可能会考虑使用多个 GIF 并让 JS 在它们之间切换。
它有两个不同的 gif。我需要 JS 在它们之间切换。

标签： javascript

【解决方案1】：

您需要获取对您的猫图片的引用：

var catimg = document.getElementById("cat");

您可以将该行代码放在您的 var catbox 声明下。接下来，您的 if (switchDirection == false) 中的第一行代码应该是：

if (catimg.src != 'ani_cat.gif') catimg.src = 'ani_cat.gif';

在你的 switchDirection 子句的 else 部分：

if (catimg.src != 'ani_catrev.gif') catimg.src = 'ani_catrev.gif';

函数的外观如下：

function doAnimation() {
    var catbox = document.getElementById("catbox");
    var catimg = document.getElementById("cat");
    var currentLeft = catbox.offsetLeft;
    var newLocation;

    if (switchDirection == false)
    {
        newLocation = currentLeft + 5;
        if (catimg.src != 'ani_cat.gif') catimg.src = 'ani_cat.gif';

        if (currentLeft >= 1000)
        {
            switchDirection = true;
        }
    }
    else
    {
        newLocation = currentLeft - 5;
        if (catimg.src != 'ani_catrev.gif') catimg.src = 'ani_catrev.gif';

        if (currentLeft <= 0)
        {
            switchDirection = false;
        }
    }

    catbox.style.left = newLocation + "px";
}

【讨论】：

你能再解释一下吗，我遇到语法错误...我要去掉 (switchDirection == false) 吗？
或者更好的是，在您设置 switchDirection 变量的地方设置 catimg.src。然后，您将不需要添加另一个 if 语句（这些语句对性能的影响很大）。
谢谢。我只是错过了一个“{”但是，gif 不再是动画了。它可以工作，但 gif 本身不再是动画。 JS 工作，但 gif 被冻结。你知道为什么吗？
我不知道，但我确实遇到了this article，如果您使用的是 IE，这可能会有所帮助。您可以尝试将间隔更改为 20 或 30，看看是否有帮助。
我使用的是 Chrome，从不使用 IE，除了浏览器兼容性。谢谢您的帮助。我会想办法的。