從頭開始的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動畫

回答

相關問題