从头开始的Javascript动画

时间:2012-07-06 16:28:25

标签: javascript animation

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

2 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分: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部分,有这样的映射:

  • progress = 0 - >身高= 0%
  • progress = 0.2 - >身高= 20%
  • progress = 0.5 - >身高= 50%
  • progress = 0.8 - >身高= 80%
  • progress = 1 - >身高= 100%

他们将delta定义为:

  

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

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

  • delta(0) - > “0%”
  • delta(0.2) - > “20%”
  • delta(0.4) - > “50%”
  • delta(0.8) - > “80%”
  • delta(1) - > “100%”

这是由您的示例中的行“delta:delta”定义的。

step函数会将此delta应用于您的代码。在这种情况下,您使用:

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

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

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