在Canvas上移動一條線進行動畫製作

我已經制作了這個相當簡單的View。它應該爲在一段時間內從左向右傳播的紅線製作動畫（DURATION）。它應該每DELAY更新它的位置，以便您可以將動畫調整爲更平滑，如果您想要的話。應該指出，我正在模擬器上進行測試。那麼，如果我增加DELAY那麼動畫完成得更快，儘管它對總動畫時間應該沒有影響。我只是動畫太快，佔用了所有的資源？或者我的數學關閉了？在Canvas上移動一條線進行動畫製作

public class AnimView extends View { 

    // Animation duration in milliseconds 
    private static final int DURATION = 4000; 

    // Update frame every delay (in milliseconds) 
    private static final int DELAY = 10; 

    private int pos; 
    private long lastTick; 
    private Paint paint; 

    public AnimView(Context context, AttributeSet attrs) { 
     super(context, attrs); 
     pos = 0; 
     lastTick = 0; 
     paint = new Paint(); 
     paint.setColor(Color.RED); 
    } 

    @Override 
    protected void onDraw(Canvas canvas) { 

     if(System.currentTimeMillis() - lastTick >= DELAY) { 
      // Calculate a new position for the line 
      pos += (int) (((double) DELAY/DURATION) * getWidth()); 

      lastTick = System.currentTimeMillis(); 
     } 

     canvas.drawRect(pos, 0, pos + 1, getHeight(), paint); 

     if(pos < getWidth()) { 
      // Position is still below getWidth, keep animating 
      postInvalidate(); 
     } 

    } 

}

來源

2012-02-05 soren.qvist

你在哪裏改變lastTick？ – 2012-02-05 13:07:35

你應該在if語句來更新lastTick：

long currentTime = System.currentTimeMillis(); 
if(currentTime - lastTick >= DELAY) { 
    // Calculate a new position for the line 
    pos += (int) (((double) DELAY/DURATION) * getWidth()); 
    lastTick = currentTime; 
}

否則就會延遲過後每次畫畫。因此，當您增加DELAY時，會發生較少的繪圖，因此程序完成得更快。

來源

2012-02-05 13:12:30

是的，我更新了代碼，它看起來像問題是一樣的，但一些進一步的測試證明它已經解決了。謝謝。 – 2012-02-05 13:14:58

若要爲此線程添加一些附加顏色，這是遊戲開發中衆所周知的問題。如果您搜索「固定時間步長與可變時間步長」，例如：http://gafferongames.com/game-physics/fix-your-timestep/

其中的要點是，動畫的速度與時刻。這就是爲什麼在舊的NES曼谷遊戲中，當屏幕上出現大量敵人時，你會有一段時間減速（因爲CPU忙於計算這些實體的所有數據，所以每幀處理需要更長的時間）。

有解決此問題有兩種方式：

移動到您通過時間動畫的每一幀之間的進展的量乘以每一次移動的可變時間步驟。那樣，當這個數量由於任何原因而改變時，你的動畫看起來是一樣的。
將更新和繪製階段分開，以便您可以控制傳入更新方法的時間差異，而不管繪製的速度如何。

來源

2012-02-05 13:19:59

謝謝，這實際上是遊戲寵物項目的開始，所以你的評論非常相關。 – 2012-02-05 13:49:28

在Canvas上移動一條線進行動畫製作

回答

相關問題