从头开始的Javascript动画

Javascript Animation From Scratch

本文关键字：动画 Javascript 从头开始      更新时间：2023-09-26

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

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

您的代码现在不起作用吗？ 或者您只是想知道增量是什么？

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%

他们将增量定义为：

delta（progress）是将时间进度"进度"映射到 动画进度"三角洲"。

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

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

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

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

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

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

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

相关文章：