基於時間計算運動

所以我在一個小項目上工作，主要是爲了幫助我學習更好的JavaScript，我遇到了一些問題。我可以做動畫很好，但我的問題是..我試圖找出必要的數學來計算移動每個動畫步驟的像素變化量。所以說我的div是450px寬，我說animate（{width：600，duration：2000}）。這會留下150px的總移動量，但如果我每3毫秒調用一次setTimeout函數，則每幀的移動量會有多大。我知道這個解決方案可能很簡單，但由於某種原因，也許只是因爲我在寫這篇文章的時候一直在牆上敲打我的頭，現在我還沒有想到弄清楚。如果有人需要，我可以顯示代碼示例。感謝您提前的幫助。根據要求這裏是我迄今爲止做動畫的代碼...基於時間計算運動

animate : function(params, duration) { 
    if(!params) { 
     return this; 
    } else { 
     this.current = this._defCurrent; 
     console.log(this.current); 
     var time = (duration) ? duration : this.slow; 
     var target; 
     for(var index in params) { 
      if(index == 'queue') { 
       if(params[index]){ 
        this.animQueue = true; 
       } else { 
        this.animQueue = false; 
       } 
      } else { 
       var current = parseFloat(this.getStyle(index)); 
       if(current < params[index]) { 
        target = params[index] - current; 
        animDirection = '+'; 
       } else { 
        target = current - params[index]; 
        animDirection = '-'; 
       } 
       totalMovement = target/time; 
       animObj = {type : index, target : target, move : totalMovement, direction : animDirection, duration : time}; 
       this.setAnimQueue(animObj); 
      } 
     } 
    } 
    this.setTheTimeout(); 
}, 
setAnimQueue : function(obj) { 
    var that = this; 
    for(var i = 0, amt = (obj.duration * this.fps); i < amt; i++) { 
     var fun = this.wrapFunction(that.doAnim, this, [obj.type, obj.move, obj.direction]); 
     this.queue.push(fun); 
    } 
}, 
setTheTimeout : function() { 
    var that = this; 
    this.interValAmt = setInterval(function() { 
     that.deQueue() 
    }, this.fps); 
}, 
doAnim : function(type, amount, direction) { 
    var totalAmount = eval(parseFloat(this[type]()) + direction + amount); 
    if(this.elem.style[this.toCamelCase(type)]) { 
     this[type](totalAmount); 
    } else { 
     this[type](totalAmount) 
    } 
    return this; 
}

來源

2012-07-31 Rob

我們想看看你迄今爲止做了什麼。 – 2012-07-31 04:20:28

你有距離，你有時間。劃分他們給出速度。只需將速度乘以時間增量即可獲得距離增量。

來源

2012-07-31 04:29:36

好的，所以我會拿150/2000給出.075，所以我會乘以3（在調用動畫之間的毫秒數）以獲得每次移動總共.225px的移動，2000倍？那麼我運行動畫多少次以獲得150,2000/3？ – Rob 2012-07-31 06:09:35

使用上面的公式，我在說totalMovement =（target/time）* this.fps; ...（this.fps = 3），然後在setAminQueue中，我說（對於var i = 0，amt =（obj.duration/this.fps）; i Rob 2012-07-31 06:16:32

你有多確定它被稱爲每3ms？ – 2012-07-31 06:21:46

基於時間計算運動

回答

相關問題