基於持續時間將對象從一個點移動到另一個點

Question

圍繞這個問題繞了一段時間，並在網上尋找解決方案沒有效果。

基本上，如果我有一個精靈例如位於（10,10），我想移動它說（50,100），整個過程需要2秒或任何我指定的持續時間。這背後的確切數學是什麼？我使用基於距離的解決方案來確定速度，但只是使用隨機修改器來控制過程。我需要更精確的東西來執行完整的持續時間。

對這個問題的任何幫助將不勝感激！

Answer 1

假設線性內插（即，從開始位置在一條直線上移動以恆定的結束位置率）：

從開始到目的地的載體是目的地 - 開始，即你的例子（40,90）。

如果您希望在兩秒鐘內發生這種情況，您需要將它除以二得到每秒鐘的行進距離，例如（20.45）秒。

要在任何給定時間獲取位置，請首先記錄開始時間並計算當前時間減去開始時間（以秒爲單位）。因此，如果動畫從12：01：30.000開始，現在是12：01：31.500，那麼自動畫開始以來已過了1.5秒。

爲了得到當前的位置，你在我的例子開始位置添加到*時間流逝每秒矢量運動，所以：

（10,10）+（20,45）* 1.5 =（10 ，10）+（30,67.5）=（40,77.5）

Answer 2

這只是一個插值和時間的事情。 有線性的，竇，二次，...

以下是在動作一些更多的信息和實施例：link

Answer 3

仔細看看jQuery的動畫算法...也許你可以使用一些代碼。

http://code.jquery.com/jquery-1.6.1.js（搜索「custom：」作爲起點）。

Answer 4

你需要一些信息來做到這一點，開始位置，結束位置，持續時間和經過時間。

下面是動作的例子：

package { 
    import flash.utils.getTimer; 
    import flash.events.Event; 
    import flash.display.Shape; 
    import flash.geom.Point; 
    import flash.display.Sprite; 

    public class Mover extends Sprite { 

     private var circle  :Shape; 
     private var start  :Point; 
     private var end   :Point; 
     private var duration :int; 

     public function Mover() { 

      // first we create something to move, like, a circle 
      circle = new Shape(); 
      circle.graphics.beginFill(0xff00ff); 
      circle.graphics.drawCircle(0, 0, 20); 
      addChild(circle); 

      // start and end positions 
      start = new Point(0, 0); 
      end = new Point(100, 100); 

      // and finally, the duration, i'm using milliseconds 
      duration = 2000; 

      // this event handler will run each frame 
      addEventListener(Event.ENTER_FRAME, handleEnterFrame); 
     } 

     private function handleEnterFrame(event:Event):void { 
      // we figure out how much of the animation has elapsed by using getTimer 
      // should you want to use a start time, add it here 
      var progress:Number = getTimer()/duration; 

      // we need to clamp our progress so we don't under- or overshoot the target 
      if(progress < 0) progress = 0; 
      if(progress > 1) progress = 1; 


      // then it's a matter of setting the position 
      // we use the start position as a base and then gradually add in 
      // the difference between the start and the end 
      circle.x = start.x + (end.x - start.x) * progress; 
      circle.y = start.y + (end.y - start.y) * progress; 
     } 
    } 
} 

如果你不都在如何有興趣，只是想要的結果，我衷心建議補間引擎像​​或任何其他無數的其中。只要避開閃光燈附帶的那個，這有點廢話。