从头开始的Javascript动画_Javascript_Animation

从头开始的Javascript动画

javascript animation

从头开始的Javascript动画,javascript,animation,Javascript,Animation,首先：是的，我知道我想重新发明轮子。但这不是重点。我是Javascript新手，我在学校接受过一些基本训练，我想了解的不仅仅是用Javascript制作的复制和粘贴动画。我希望能够改变某些参数，使我的网页看起来更好所以这是我的问题，这可能是一个非常愚蠢的问题，但无论如何。我找到了以下Javascript动画教程：这正是我想要的，只是写得不好，我认为我是一个完美主义者，有时有点难以理解。因此，我真正没有得到的是第7行和第8行粗体： function animate(opts) { va

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

所以这是我的问题，这可能是一个非常愚蠢的问题，但无论如何。我找到了以下Javascript动画教程：

这正是我想要的，只是写得不好，我认为我是一个完美主义者，有时有点难以理解。因此，我真正没有得到的是第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行中写些什么，如果我想要线性增量，我将非常感激。我还想知道如何正确调用函数来设置动画，在这种情况下，函数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。根据您的输入，该值可以设置为线性或指数

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

我看了一下教程，发现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"    
        }
    }) 
}

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

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定义为：

deltaprogress是将时间进度映射到动画进展三角洲

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

delta0->0% delta0.2->20% delta0.4->50% delta0.8->80% delta1->100% 在您的示例中，这是由行：delta:delta定义的

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

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

增量为0表示该属性将为0px。delta为1表示该属性将为500px。进度为0表示动画开始，进度为1表示动画结束。在本例中，增量等于进度。在动画的中间，进步是50%。由于delta0.5=0.5，传递到步骤的参数将为0.5，属性将为250px

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