从头开始的Javascript动画

首先：是的，我知道我想重新发明轮子。但这不是重点。我是Javascript新手（我在学校接受过一些基本培训），我想了解不仅仅是复制和粘贴Javascript中的动画。我希望能够改变某些参数，使我的网页看起来更好。从头开始的Javascript动画

所以这里是我的问题（这可能是非常愚蠢的问题，但无论如何）。我发现这个Javascript动画教程：http://javascript.info/tutorial/animation#the-basics-of-the-animation

这正是我一直在寻找的，只是它写得很差（在我看来（我是一个完美主义者）），并不时地有点难以理解。所以我真的没有得到第7行和第8行（粗体）：

function animate(opts) { 
    var start = new Date 
    var id = setInterval(function() { 
     var timePassed = new Date - start 
     var progress = timePassed/opts.duration 
     if (progress > 1) progress = 1 
     var delta = opts.delta(progress) 
     opts.step(delta) 
     if (progress == 1) { 
      clearInterval(id) 
     } 
    }, opts.delay || 10) 
}

其他一切都是可以理解的。而我也没有得到的是德尔塔斯（我理解数学概念和东西），但我不明白如何使用它们（正确的方式来使用它们）。

如果有人足够的话，要纠正这段代码并解释我要写的第7行代码，如果我想要线性Delta，我会非常感激。我也想知道如何正确调用函数来设置动画（在这种情况下，函数move（））。

function move(element, delta, duration) { 
    var to = 500 
    animate({ 
     delay:10, 
     duration:duration || 1000, // 1 sec by default 
     delta:delta, 
     step:function (delta) { 
      element.style.left = to * delta + "px" 
     } 
    }) 
}

来源

2012-07-06 user1507270

好吧，我终于明白了。我仍然不知道什么是错误的，但是我在非常仔细地重写所有内容之后设法得到它。感谢您的回答。 – user1507270 2012-07-06 17:51:08

我看了一下教程，在我看来，delta只是一个用来跟踪动画在其运动中有多远的属性。数字总是在0和1之间，所以在动画开始时element.style.left = 0px，最后等于500px。根据您的输入，该值可以设置为线性或指数（具有缓动）。

你的代码现在不能正常工作吗？或者你只是想知道三角洲是什么？

来源

2012-07-06 16:45:23

function move(element, delta, duration) { 
    var to = 500 
    animate({ 
     delay: 10, 
     duration: duration || 1000, // 1 sec by default 
     delta: delta, 
     step: function(delta) { 
      element.style.left = 100*delta + "px"  
     } 
    }) 
}

在你所提到的，所述增量段的页面，则该映射：

进度= 0 - >高度= 0％
进度= 0.2 - >高度= 20％
进度= 0.5 - >高度= 50％
进展= 0.8 - >高度= 80％
进展= 1 - >高度= 100％

他们限定增量为：

增量（进度）是映射时间进展“进步”，以动画进展“增量”的功能。

这意味着线性增量应当是遵循这些规则的函数：

增量（0） - > “0％”
增量（0.2） - > “20％”
delta（0.4） - >“50％”
delta（0。8） - > “80％”
增量（1） - > “100％”

这是由行定义的： “Δδ：” 在你的例子。

step函数会将这个delta应用于您的代码。在这种情况下，您使用：

element.style.left = to*delta + "px"

增量为0意味着属性将为“0px”。增量为1意味着属性将是“500px”。进度为0表示动画开始，进度为1表示动画结束。在这个例子中，增量等于进度。在动画的中间，进度是50％。由于delta（0.5）= 0.5，传递给step的参数将为0.5，属性将为“250px”。

我建议您使用可用的开发人员控制台来测试应用于元素的属性的值。

来源

2012-07-06 16:53:21 Asrail

令我困惑的是线条var delta = opts.delta（progress）和opts.step（delta）。你能向我解释他们做了什么？ – user1507270 2012-07-06 17:11:47

您正在定义函数move中的opts.delta和opts.step。检查：http://javascript.info/tutorial/animation#example1 “delta：delta”表示函数（p）{return p}。 step函数将该值分配给某个元素。我只是意识到我错过了对element.style.left使用绝对值。 – Asrail 2012-07-06 17:12:32

从头开始的Javascript动画

回答

相关问题