0

首先我想提两件事，
一：我的代码并不完美（尤其是 eval 部分）——但我想为自己尝试一些东西，看看我是否可以复制 jQuery Animation 函数，所以请原谅我“不好”的做法，请不要建议我使用 jQuery，我想尝试一下。
二：这段代码还没有完成，我只是想弄清楚是什么让它工作得不好。

所以动画运行了大约 12 秒，而我输入的持续时间参数是 15 秒，我做错了什么？

function animate(elem, attr, duration){
  if(attr.constructor === Object){//check for object literal
    var i = 0;
    var cssProp = [];
    var cssValue = [];
    for(key in attr) {
          cssProp[i] =  key;
          cssValue[i] = attr[key];
    }
    var fps = (1000 / 60);
    var t = setInterval(function(){
      for(var j=0;j<cssProp.length;j++){
        if(document.getElementById(elem).style[cssProp[j]].length == 0){
          //asign basic value in css if the object dosn't have one.
         document.getElementById(elem).style[cssProp[j]]= 0;
        }
        var c = document.getElementById(elem).style[cssProp[j]];
        //console.log(str +" | "+c+"|"+cssValue[j]);
        if(c > cssValue[j]){
            document.getElementById(elem).style[cssProp[j]] -= 1/((duration/fps)*(c-cssValue[j]));
        }else if(c < cssValue[j]){
            document.getElementById(elem).style[cssProp[j]] += 1/((duration/fps)*(c-cssValue[j]));
        }else if(c == cssValue[j]){
            window.clearInterval(t);
        }
      }
    },fps);
  }
}
  animate('hello',{opacity:0},15000);

html:

  <p id="hello" style="opacity:1;">Hello World</p>

注意：我猜是有问题

(持续时间/fps)*(c-cssValue[j])

setInterval（fps 变量）的部分或/和间隔。


提前谢谢。

4

2 回答 2

5

我不会尝试重构它并弄清楚它，因为它非常不稳定。这就是说……一些事情。

不要依赖你正在制作动画的值来让你知道动画进度

一般来说，你的方法是不合理的。你最好自己跟踪进度。此外，由于您的方法，您的数学似乎过于努力，应该更简单。

可以这样想：当时间过去时，您的动画就完成了，而不是当动画值似乎表明它处于最终位置时。

不要增加，设置

浮点数学是不精确的，像这样的重复加法累积也会累积浮点错误。制作一些变量来为您跟踪进度会更具可读性，您可以在计算中使用这些变量。

animatedValue += changeOnThisFrame // BAD!
animatedValue = valueOnThisFrame   // GOOD!

不要做正/负条件舞

事实证明，这10 + 10和10 - (-10)真的是一回事。这意味着您始终可以添加值，但变化率可以是负值或正值，并且值将在适当的方向上动画。

超时和间隔不准确

结果setTimeout(fn, 50)实际上意味着安排 fn 至少在 50 毫秒后调用。在这 50 毫秒之后执行的下一个 JS 运行循环将运行该函数，因此您不能依赖它来完全准确。

也就是说，它通常在几毫秒内。但是 60fps 大约是 16ms 的帧，并且该计时器实际上可能会在 16-22ms 的可变时间内触发。因此，当您根据帧速率进行计算时，它与实际经过的时间完全不匹配。

重构复杂的数学

在这里解构这条线会很困难。

document.getElementById(elem).style[cssProp[j]] -= 1/((duration/fps)*(c-cssValue[j]));

为什么要更复杂地分解它，以便您可以轻松理解这里发生了什么。单独重构这一行，我可能会这样做：

var style = document.getElementById(elem).style;
var changeThisFrame = duration/fps;
var someOddCalculatedValue = c-cssValue[j];
style[cssProp[j]] -= 1 / (changeThisFrame * someOddCalculatedValue);

这样做可以更清楚地了解数学中的每个表达式的含义以及它的用途。而且因为你没有在这里做，我很难想知道为什么c-cssValue[j]在那里以及它代表什么。

简单示例

这比你所拥有的能力要差，但它显示了你应该采取的方法。它使用动画开始时间来创建完美的值，这取决于动画应该有多完整、它从哪里开始以及它要去哪里。它不使用当前动画值来确定任何内容，并保证运行动画的完整长度。

var anim = function(elem, duration) {

    // save when we started for calculating progress
    var startedAt = Date.now();

    // set animation bounds
    var startValue = 10;
    var endValue   = 200;

    // figure out how much change we have over the whole animation
    var delta = endValue - startValue;

    // Animation function, to run at 60 fps.
    var t = setInterval(function(){

        // How far are we into the animation, on a scale of 0 to 1.
        var progress = (Date.now() - startedAt) / duration;

        // If we passed 1, the animation is over so clean up.
        if (progress > 1) {
            alert('DONE! Elapsed: ' + (Date.now() - startedAt) + 'ms');
            clearInterval(t);
        }

        // Set the real value.
        elem.style.top = startValue + (progress * delta) + "px";

    }, 1000 / 60);
};

anim(document.getElementById('foo'), 5000);
​

JSFiddle：http: //jsfiddle.net/DSRst/

于 2012-06-15T00:10:56.720 回答
3

您不能setInterval用于准确的总计时。因为 JS 是单线程的，并且多个事物在一个线程上竞争周期，所以不能保证下一个间隔调用将完全准时，或者 N 个间隔将消耗确切的持续时间。

相反，几乎所有动画例程都获取当前时间并使用系统时钟来测量总持续时间的时间。一般的算法是获取开始时间，计算出期望的结束时间（开始时间+持续时间）。然后，正如您所做的那样，计算预期的步长值和迭代次数。然后，在每一步中，您重新计算剩余的剩余时间和剩余的步长值。通过这种方式，您可以确保动画始终准确（或几乎准确）按时完成，并且始终准确到达最终位置。如果动画落后于理想轨迹，那么它将自我纠正并在剩余的步骤中稍微移动更多。如果它因任何原因（舍入误差等）领先，它将回拨步长并同样准时到达最终位置。

您可能还需要知道浏览器并不总是支持非常小的时间量。每个浏览器都有某种最小时间，它们将允许计时器操作。这是一篇关于最低计时器级别的文章。

这是一篇关于补间的文章（不断重新计算步骤以准确匹配持续时间的过程）。

我还建议您查看一些库（jQuery、YUI 或您找到的任何其他库）中的动画代码，因为它们都可以向您展示这是如何以非常通用的方式完成的，包括补间、缓动函数， ETC...

于 2012-06-14T23:51:08.697 回答