|
孤獨者 - 心在黑暗裡旅行 ...... ... 至尊會員
遊蕩的過客 - 枉入紅塵若許年 .. ... - UID
- 18273
- 帖子
- 12122
- 精華
- 1273
- 積分
- 240737
- 金幣
- 492641
- 威望
- 5001
- 推廣
- 0
- 閱讀權限
- 99
- 來自
- 尋覓中
- 註冊時間
- 2006-6-24
- 最後登錄
- 2015-5-27
|
1樓
大 中
小 發表於 2007-5-14 03:25
在Java Applet中的動畫編程
| 在Java中實現動畫有很多種辦法,但它們實現的基本原理是一樣的,即在屏幕上畫出一系列的幀來造成運動的感覺。我們先構造一個程序的框架,再慢慢擴展,使之功能比較齊備。
| | 為了每秒中多次更新屏幕,必須創建一個線程來實現動畫的循環,這個循環要跟蹤當前幀並響應週期性的屏幕更新要求。實現線程的方法有兩種,你可以創建一個類Thread的派生類,或附和在一個Runnable的界面上。一個容易犯的錯誤是將動畫循環放在paint()中,這樣佔據了主AWT線程,而主線程將負責所有的繪圖和事件處理。一個框架applet如下：
| public class Animator1 extends java.applet.Applet implements Runnable
{
int frame;
int delay;
Thread animator;
public void init()
{
String str = getParameter("fps");
int fps = (str != null) ? Integer.parseInt(str) : 10;
delay = (fps > 0) ? (1000 / fps) : 100;
}
public vois start()
{
animator = new Thread(this);
animator.start();
}
public void run()
{
while (Thread.currentThread() == animator)
{
repaint();
try
{
Thread.sleep(delay);
}
catch (InterruptedException e)
{
break;
}
frame++;
}
}
public void stop()
{
animator = null;
}
}
在你的HTML文件中這樣引用：
<applet code="Animator1.class" width="200" height="200">
<param name="fps" value="200">
| 上面的參數fps表示每秒的幀數,
| | 上例中,applet只是在每兩幀之間休眠一個固定的時間,但這有些缺點,有時你會等很長時間,為了每秒顯示十幀圖像,不應該休眠100毫秒,因為在運行當中也耗費了時間。
這裡有一個簡單的補救方法：
public void run()
{
long tm = System.currentTimeMillis();
while (Thread.currentThread() == animator)
{
repaint();
try
{
tm += delay;
Thread.sleep(Math.max(0,tm - System.currentTimeMillis()));
}
catch (InterruptedException e)
{
break;
}
frame++;
}
}
|
| 剩下的就是將每一幀圖像繪出。在上例中調用了applet的repaint()來繪出每一幀圖像。
public void paint(Graphics g)
{
g.setColor(Color.black);
g.drawString("Frame " + frame, 0, 30);
} | | 現在我們來畫一些稍微困難的東西。下例畫了一個正弦曲線的組合,對於每一個x,畫一條短的垂直線,所有這些線組成了一個圖形,並且每幀變化。但不幸有些閃動,在以後我們將解釋為什麼閃以及怎樣避免。
public void paint(Graphics g)
{
Dimension d = size();
int h = d.height / 2;
for (int x = 0 ; x <d.width; x++)
{
int y1 = (int)((1.0 + Math.sin((x - frame)*0.05))*h);
int y2 = (int)((1.0 + math.sin((x + frame)*0.05))*h);
g.DrawLine(x, y1, x, y2);
}
} | | 上例中的閃爍有兩個原因：繪製每一幀花費的時間太長(因為重繪時要求的計算量大),二是在每次調用pait()前整個背景被清除,當在進行下一幀的計算時,用戶看到的是背景。清除背景和繪製圖形間的短暫時間被用戶看見,就是閃爍。在有些平台如PC機上閃爍比在X Window上明顯,這是因為X Window的圖像被緩存過,使得閃爍的時間比較短。
有兩種辦法可以明顯地減弱閃爍：重載update()或使用雙緩衝。
1.重載update()
當AWT接收到一個applet的重繪請求時,它就調用applet的update()。缺省地,update()清除applet的背景,然後調用paint()。重載update(),將以前在paint()中的繪圖代碼包含在update()中,從而避免每次重繪時將整個區域清除。
既然背景不在自動清除,我們需要自己在update()中完成。我們在繪製新的線之前獨自將豎線擦除,完全消除了閃爍。
public void paint(Graphics g)
{
update(g);
}
public void update(Graphics g)
{
Color bg = getBackground();
Dimension d = size();
int h = d.height / 2;
for (int x = 0; x %lt;d.width; x++)
{
int y1 = (int)((1.0 + Math.sin((x - frame)*0.05))*h);
int y2 = (int)((1.0 + Math.sin((x + frame)*0.05))*h);
if (y1 > y2)
{
int t = y1;
y1 = y2;
y2 = t;
}
g.setColor(bg);
g.drawLine(x, 0, x, y1);
g.drawLine(x, y2, x, d.height);
g.setColor(Color.black);
g.drawLine(x, y1, x, y2);
}
} |
| 2.雙緩衝技術： |
另一種減小幀之間的閃爍的方法是使用雙緩衝,它在許多動畫applet中被使用。主要原理是創建一個後台圖像,將一幀畫入圖像,然後調用drawImage()將整個圖像一次畫到屏幕上去。好處是大部分繪製是離屏的。將離屏圖像一次繪至屏幕上比直接在屏幕上繪製要有效得多。
雙緩衝可以使動畫平滑,但有一個缺點,要分配一張後台圖像,如果圖像相當大,這將需要很大一塊內存。當你使用雙緩衝技術時,應重載update()。
Dimension offDimension;
Image offImage;
Graphics offGraphics;
public void update(Graphics g)
{
Dimension d = size();
if ((offGraphics == null) || (d.width != offDimension.width)
|| (d.height != offDimension.height))
{
offDimension = d;
offImage = createImage(d.width, d.height);
offGraphics = offImage.getGraphics();
}
offGraphics.setColor(getBackground());
offGraphics.fillRect(0, 0, d.width, d.height);
offGraphics.setColor(Color.Black);
paintFrame(offGraphics);
g.drawImage(offImage, 0, 0, null);
}
public void paint(Graphics g)
{
if (offImage != null)
{
g.drawImage(offImage, 0, 0, null);
}
}
public void paintFrame(Graphics g)
{
Dimension d = size();
int h = d.height / 2;
for (int x = 0; x <d.width; x++)
{
int y1 = (int)((1.0 + Math.sin((x - frame) * 0.05)) + h);
int y2 = (int)((1.0 + Math.sin((x + frame) * 0.05)) + h);
g.drawLine(x, y1, x, y2);
}
}
| | 現在,我們將重寫paintFrame()來使圖像動起來。這也就帶來一些問題,圖像往往相當大,被一點點調入,將圖像全部畫出將花費很多時間,尤其是通過一個較慢的連接,這也就是為什麼drawImage帶四個參數的原因,其中第四個參數為一個ImageObserver對象。通過調用getImage()得到圖像。 |
| | world.gif作為背景,car.gif作為移動物體,且被繪製了兩次,造成一個兩輛車比賽的場景。
Image world;
Image car;
public void init()
{
String str = getParameter("fps");
int fps = (str != null) ? Integer.parseInt(str) : 10;
delay = (fps > 0) ? (1000 / fps) : 100;
world = getImage(getCodeBase(), "world.gif");
car = getImage(getCodeBase(), "car.gif");
}
public void paint(Graphics g)
{
update(g);
}
public void paintFrame(Graphics g)
{
Dimension d = size();
int w = world.getWidth(this);
int h = world.getHeight(this);
if ((w > 0) && (h > 0))
{
g.drawImage(world, (d.width - w)/2, (d.height - h)/2, this);
}
w = car.getWIdth(this);
h = car.getHeight(this);
if ((w > 0) && (h > 0))
{
w += d.width;
g.drawImage(car, d.width - ((frame * 5) % w), (d.height - h)/3, this);
g.drawImage(car, d.width - ((frame * 7) % w), (d.height - h)/2, this);
}
} | | 通過每一幀顯示一幅圖像來創建動畫。我們仍用雙緩衝的方法減小閃爍。原因是我們顯示的每一幅圖像有一部分是透明的,因此需要在顯示下一幅前擦除當前的,如果不使用雙緩衝的技術將導致閃爍。
Image frames[];
public void init()
{
String str = getParameter("fps");
int fps = (str != null) ? Integer.parseInt(str) : 10;
delay = (fps > 0) ? (1000 / fps) : 100;
frames = new Image[10];
for (int i = 0; i <10; i++)
{
frames = getImage(getCodeBase(), "duke/T" + i + ".gif");
}
}
public void paint(Graphics g)
{
update(g);
}
public void paintFrame(Graphics g)
{
g.drawImage(frames[frame % 10], 0, 0, null);
} |
|
|
