2

首先：是的，我确实知道我想重新发明轮子。但这不是重点。我是 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)
}

其他的一切都可以理解。我也没有得到Deltas（我了解数学概念和东西），但我不明白如何使用它们（使用它们的正确方法）。

如果有人足够好心，纠正这个代码并解释我必须在以下代码的第 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"
        }
    })
}
4

2 回答 2

0

我看了一下教程，在我看来 delta 只是一个用于跟踪动画在其运动中的距离的属性。该数字将始终介于 0 和 1 之间，因此在动画开始时 element.style.left = 0px 并且在结束时等于 500px。根据您的输入，该值可以设置为线性或指数（具有缓动）。

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

于 2012-07-06T16:45:23.920 回答
0 
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"    
        }
    }) 
}

在您提到的页面上，在 delta 部分，有这个映射：

  • 进度 = 0 -> 高度 = 0%
  • 进度 = 0.2 -> 高度 = 20%
  • 进度 = 0.5 -> 高度 = 50%
  • 进度 = 0.8 -> 高度 = 80%
  • 进度 = 1 -> 高度 = 100%

他们将 delta 定义为：

delta(progress) 是将时间进度“进度”映射到动画进度“增量”的函数。

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

  • 增量（0）->“0%”
  • 增量（0.2）->“20%”
  • 增量（0.4）->“50%”
  • 增量（0.8）->“80%”
  • 增量（1）->“100%”

在您的示例中，这是由以下行定义的：“delta: delta”。

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

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

delta 为 0 意味着该属性将为“0px”。delta 为 1 意味着该属性将为“500px”。进度为 0 表示动画开始，进度为 1 表示动画结束。在此示例中，增量等于进度。在动画中间，进度为 50%。由于 delta(0.5) = 0.5，传递给 step 的参数将为 0.5，属性将为“250px”。

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

于 2012-07-06T16:53:21.290 回答