JavaScript 为动画设置间隔

Question

到目前为止，我已经有了用于沿页面移动元素的代码：http://jsfiddle.net/rwowf5j8/

<body onload="anim(document.getElementById('test'), 'left', 'px', 140, 300, 500);">
 <p id='test'>LOL</p>

<script>
    function anim(elem,style,unit,from,to,time) {
    if( !elem) return;
    var start = new Date().getTime(),
        timer = setInterval(function() {
            var step = Math.min(1,(new Date().getTime()-start)/time);
            elem.style[style] = (from+step*(to-from))+unit;
            if( step == 1) clearInterval(timer);
        },25);
    elem.style[style] = from+unit;
}


    </script>
</body>

效果很好，但我如何向此代码添加 setInterval 方法以使函数 "anim" 定期重复以创建重复运动？

我尝试通过调用函数来更改标签：

<body onload="setInterval(anim(document.getElementById('test'), 'left', 'px', 140, 300, 500), 500);">

但这似乎不起作用。

Answer 1

setInterval() 函数需要一个函数和一个延迟。您的 anim 函数没有 return 任何东西，所以它不起作用。

你需要这样的东西：

setInterval(function(){anim(document.getElementById('test'), 'left', 'px', 140, 300, 500)}, 500);

Answer 2

您可以在函数内部进行设置，使其在间隔后调用自身。

   function anim(elem,style,unit,from,to,time) {
        if( !elem) return;

        var start = new Date().getTime(),
            timer = setInterval(function() {
                var step = Math.min(1,(new Date().getTime()-start)/time);
                elem.style[style] = (from+step*(to-from))+unit;
                if( step == 1) clearInterval(timer);
            },25);
        elem.style[style] = from+unit;

        setInterval(function(){
            anim(elem,style,unit,from,to,time);
        }, time);

    }

Answer 3

无需将anim函数包裹在另一个setInterval中，您可以通过更改

来制作循环动画

if( step == 1) clearInterval(timer);

到

if( step == 1) start = new Date().getTime();

见fiddle

Answer 4

问题是第一个参数的内容需要放在引号之间或包裹在函数中。

如果你改变你拥有的：

<body onload="setInterval(anim(document.getElementById('test'), 'left', 'px', 140, 300, 500), 500);">

并将 "anim" 调用用单引号引起来：

<body onload="setInterval('anim(document.getElementById(\'test\'), \'left\', \'px\', 140, 300, 500)', 500);">

它看起来很丑，但效果很好。您可以在这个 jsfiddle 中看到它：http://jsfiddle.net/rwowf5j8/1/

Answer 5

您需要在此处利用闭包或 Function.bind。在您的 setInterval 示例中，您在将 anim 的 return 值传递到对 setInterval 的调用之前直接调用 anim。您的意思是将函数本身传递给 setInterval。你可以使用Function.bind来传递你想要的参数。

尝试使用 <body onload="setInterval(anim.bind(undefined, document.getElementById('test'), 'left', 'px', 140, 300, 500));">

完整示例如下。

function anim(elem,style,unit,from,to,time) {
    if( !elem) return;
    var start = new Date().getTime(),
        timer = setInterval(function() {
            var step = Math.min(1,(new Date().getTime()-start)/time);
            elem.style[style] = (from+step*(to-from))+unit;
            if( step == 1) clearInterval(timer);
        },25);
    elem.style[style] = from+unit;
}

#test {
position: absolute;
left: 140px;
}

<body onload="setInterval(anim.bind(undefined, document.getElementById('test'), 'left', 'px', 140, 300, 500));">
 <p id='test'>LOL</p>

Answer 6

将代码放入匿名函数中，如下所示：

<body onload="setInterval(function(){anim(document.getElementById('test'), 'left', 'px', 140, 300, 500)}, 500)">

JavaScript 为动画设置间隔

JavaScript setInterval for animation

javascript

animation

setinterval