 | 级别： 初级 Barry A. Feigenbaum, Ph.D. (feigenba@us.ibm.com), 高级 IT 架构顾问, IBM
Tom Brunet (tomab@cs.wisc.edu), 在读博士, 威斯康星大学
2004 年 2 月 01 日 如果可以绘制需要的内容并让程序完成其余部分，为什么还要自己编写动画序列呢？在本文中，Barry Feigenbaum 和 Tom Brunet 展示了如何结合无损图像、Swing 技术和作者自己的基于 Java 的动画引擎在 2D 动画中生成固定对象的运动序列。
在二维(2D)动画中，通常需要按预定义的模式（有时称为
控制路径）在一个
2D 区域内移动对象。这种动画需要解决两个问题：
- 如何指定对象要遵循的控制路径。
- 如何沿着所选的路径移动对象。
在本文中我们将为您展示如何用无损图像、Swing 技术和基于 Java 的动画引擎解决这些问题。我们将首先绘制所需要的动画对象轨道，然后用动画引擎驱动对象沿着定义的控制路径运动。
可以容易创建和处理无损图像（在
下面说明），而且可以根据需要对使用它们的技术进行细致的调节。我们将利用一个示例动画序列，介绍如何用不同的颜色集创建复杂的运动序列。我们还将介绍如何处理图像以提取出所需要的控制路径、将控制路径与背景图像分层、
为动画序列创建对象（Swing GUI 组件），并驱动这些对象沿着定义的控制路径运动以完成动画过程。更多信息请参阅
参考资料。
注：本文假定读者有
Java 一般编程、特别是 Swing GUI 构造的知识。如果有在 Java 平台中利用 Java 2D 操纵图像的经验则更好。
什么是无损？
无损图像（lossless
image）是永久保留了所有图像像素的图像。这种图像必须能够存储为或者恢复成与原件完全一样的复制品。
可以使用不同的应用程序创始无损图像，包括 Microsoft Paint、Jasc Paint Shop Pro 和一些定制的应用程序。可以将这些图像存储到文件中，也可以只在内存创建它们。图像必须是无压缩的，或者是使用无损压缩算法如
zip 压缩进行压缩的。典型的无损图像格式包括 Microsoft 的 Bitmap (BMP) 和 Portable Network Graphics
(PNG) 格式。有损压缩算法，比如通常用于 GIF（Graphics Interchange Format）和 JPEG(Joint Photographic
Experts Group) 文件的压缩算法，不适用于本文所描述的动画技术。
完全是控制问题
控制路径
的最一般化的定义是通过任意
n
维空间时，在特定位置和时间所要采取的行为。我们将控制路径定义为一个或者多个对象穿过一个 2D 空间时所采取的路径。通过将对象的位置映射到该位置的行为来表示控制路径。然后程序遍历所定义的对象、在映射中查找对象在该位置上的行为、并让对象执行所指定的行动。对所有控制路径——
除去最简单的—— 在代码中建立这样一个映射都是耗费时间和容易出错的，因此使用一个绘图程序更合适。
控制路径可以是
不随时间变化的（time
invariant），在这种情况下是静态的，也可以是
随时间变化的（time
variable），在这种情况下是动态的。如果无损图像包含在一个图像文件中，那么它就是不随时间变化的，或者说是静态的。如果无损图像是包含在
RAM 中并直接使用的，那么它就是随时间变化的，或者说是动态的。在本文中我们讨论的是静态控制路径。使用正确的编辑程序，可以更容易地生成静态图像，尽管所定义的行为类型也会在某种程度上影响这个过程。
让我们度过一个狂热的夜晚！
学习动画的一个好方法是自己动手实践。我们将在本文其余部分使用一个动画的例子来阐明所讨论的概念。我们的例子是一个动画的火灾逃生序列，我们将生成控制路径以表示几个人物的逃生路径。我们将使用图
1 中的部分平面图作为背景图像。可以在
图
6中看到完整的背景图像。
图 1. 背景图像的一部分
我们可以用一个数值数组生成控制映射。用一个图像代替数组（如图 2 所示）使我们可以用颜色值来表示每一个位置的行为。每一种颜色值的大小（颜色位数）取决于图像格式。图
2 展示了火灾逃生序列的控制路径。
图 2. 部分控制路径
为了看到控制路径图像与动画背景的对应关系，我们可以将控制图像覆盖到背景图像上，如图 3 所示。
图 3. 使用分层透明度结合起来的图像
让世界充满色彩
生成一个图像后，就可容易地将它转换为所需要的映射。我们只要遍历图像的颜色并为每种颜色值指定一种行为。比如我们可以使用白色 ——它通常是全为
1 的值——表示无映射或者默认行为。黑色——通常是零值——可以用于表示自定义的行为。如果是根据我们的图像映射的，当对象遇到一个有同样行为（即同一种颜色，如黑色）的位置时，它就会继续沿着由这个位置定义的方向运行。如果这个位置不是同样的行为，那么它就会找到与它有同样行为的相邻位置，但是不会走回头路。
我们可以用不同的颜色表示其他行为。没有定义的颜色值将会被忽略。因此，背景中的像素（如
图
3中的浅灰色）会被忽略。
清单 1 显示如何完成映射。先针对特定颜色值扫描该图像，然后用每一个颜色像素的位置定义该位置在控制状态映射中的控制状态。在逃生的例子中，用不同的
STATE_xxx 常量定义了六种行为。
清单 1. 处理控制路径图像
Map map = new HashMap();
:
public final static int STATE_UNKNOWN = -1;
public final static int STATE_NONE = 0;
public final static int STATE_HALLWAY = 1;
public final static int STATE_INTERSECTION = 2;
public final static int STATE_HINT = 3;
public final static int STATE_START = 4;
public final static int STATE_EXIT = 5;
:
/** Process the control image */
void processControl(Image img, int x, int y, int w, int h)
{
int pmap[] = new int[w * h];
PixelGrabber pg = new PixelGrabber(img, x, y, w, h, pmap, 0, w);
try {
pg.grabPixels();
if ((pg.getStatus() & ImageObserver.ABORT) != 0) {
System.err.println("image fetch error");
}
else {
Integer none = new Integer(STATE_NONE);
Integer hall = new Integer(STATE_HALLWAY);
Integer start = new Integer(STATE_START);
Integer exit = new Integer(STATE_EXIT);
Integer hint = new Integer(STATE_HINT);
Integer inter = new Integer(STATE_INTERSECTION);
// for each position
for (int i = 0; i < pmap.length; i++) {
int red = (pmap[i] >> 16) & 0xff;
int green = (pmap[i] >> 8) & 0xff;
int blue = (pmap[i] ) & 0xff;
if (red == 255 && green == 255 && blue == 255)
; // don't bother to add NONE to map
else if (red == 0 && green == 0 && blue == 0)
map.put(new Integer(i), hall);
else if (red == 0 && green == 255 && blue == 0)
map.put(new Integer(i), start);
else if (red == 200 && green == 0 && blue == 0)
map.put(new Integer(i), exit);
else if (red == 255 && green == 0 && blue == 0)
map.put(new Integer(i), hint);
else if (red == 0 && green == 0 && blue == 255)
map.put(new Integer(i), inter);
}
}
}
catch (InterruptedException e) {
System.err.println("image processing interrupted");
}
}
|
|
|
变化是生活的调剂品
尽管在清单 1 中使用了具体的颜色值（即红色是 200，绿色是 0，蓝色是 0），但是我们可以容易地改进代码，让它支持颜色范围。使用颜色范围降低了在绘图程序中使用的颜色选择的精度，因而更容易创建路径图像。
使用更多的颜色使我们可以定义更多状态，还可以描述更复杂的行为。例如，可以使用 RGB 方案中的不同颜色段创建重叠的控制路径。如果上述每一种状态都是由一种颜色的不同深浅而不是由不同颜色编码的，那么三个独立的控制路径可以彼此重叠。当然，使用一种颜色的不同深浅使得区分不同行为的细微颜色差别变得困难了。大多数图像编辑程序可显示出所选像素的准确颜色值，这使这个问题没那么严重了。
还可以定义三个以上的控制路径。如果通过一个位掩码（bitmask）访问每一个颜色值，那么将只受图像格式的位数限制（通常是 24，如果使用
alpha 值则为 32）。使用精确的位的路径比使用颜色段的路径更复杂，但是这是可以做到的。您需要有一个可以合并各个图像控制路径的程序或者使用一个图像并在上面添加绘制。如果不需要支持重叠的路径(即在一个位置上有多种状态)，那么在一个位置上可以有
2^24（或者 2^32）种状态。还可混合这两种方法。例如，通过位掩码使用红色段，而用绿色段和蓝色段表示其他状态。
图 4 显示了我们的逃生模拟所使用的完整控制路径。注意多种颜色的使用，以及如何用颜色表示不同位置上的不同行为。
图 4. 完整的控制路径
图 5 局部放大了控制路径以看得更清楚。
图 5. 控制路径局部细节
逃生！
在定义了状态映射后，就可以开始在 2D 空间中移动对象了。这个示例逃生应用程序让可移动对象成为
Entity 类的实例。定义了两个主要子类：
Person
和
Alarm 。
Person 可以移动，而
Alarm 是静止的。清单
2 定义了
Entity 接口。
清单 2. Entity 接口
interface Entity {
void addToPanel(JPanel panel, boolean shared);
void updateTick();
}
|
addToPanel() 方法创建一个或者多个 Swing 组件来表示对象并将它们添加到所提供的面板中，这些组件一般是带有图标集的
JLabel 。面板通常是 2D 空间的实现。它的背景显示动画背景。
updateTick() 方法使对象在动画的每一周期活动。
Alarm 对象改变它们的颜色以创建闪烁的效果。
Person 对象则移动。
Alarm 对象是简单的闪烁对象，其实现如清单 3 所示。
清单 3. Alarm.updateTick: 闪烁
public void updateTick() {
if (++tick % CYCLE == 0) {
opaque = !opaque;
}
}
|
Person 对象比
Alarm 复杂。它们沿着定义的控制路径移动，如清单 4 所示。
清单 4. Person.updateTick: 沿着路径移动
/** Move one step along the path */
public synchronized void updateTick() {
tick++;
Integer tock = stops.get(new Integer(tick));
if (tock != null) { // adjust startTime if requested
startTick = tick + tock.intValue();
}
if (tick < startTick) return; // not my time yet
if (isAtExit()) return;
// Process individual movement
Point2D location = getPosition();
int x = (int)location.getX();
int y = (int)location.getY();
switch (manager.stateAt(x, y)) {
case BuildingManager.STATE_EXIT:
atExit = true;
break;
case BuildingManager.STATE_START:
case BuildingManager.STATE_INTERSECTION:
// process any hints
if (manager.stateAt(x - 1, y) ==
BuildingManager.STATE_HINT)
setDirection(Person.DIR_WEST);
else if (manager.stateAt(x + 1, y) ==
BuildingManager.STATE_HINT)
setDirection(Person.DIR_EAST);
else if (manager.stateAt(x, y + 1) ==
BuildingManager.STATE_HINT)
setDirection(Person.DIR_SOUTH);
else if (manager.stateAt(x, y - 1) ==
BuildingManager.STATE_HINT)
setDirection(Person.DIR_NORTH);
// no hints, select a direction
if (getDirection() == DIR_NONE) {
if (manager.stateAt(x - 1, y) !=
BuildingManager.STATE_NONE)
setDirection(Person.DIR_WEST);
else if (manager.stateAt(x + 1, y) !=
BuildingManager.STATE_NONE)
setDirection(Person.DIR_EAST);
else if (manager.stateAt(x, y + 1) !=
BuildingManager.STATE_NONE)
setDirection(Person.DIR_SOUTH);
else if (manager.stateAt(x, y - 1) !=
BuildingManager.STATE_NONE)
setDirection(Person.DIR_NORTH);
}
case BuildingManager.STATE_HALLWAY:
case BuildingManager.STATE_HINT:
// effect motion in selected direction
int tempX = x;
int tempY = y;
switch (getDirection()) {
case DIR_EAST: x += 1; break;
case DIR_WEST: x -= 1; break;
case DIR_NORTH: y -= 1; break;
case DIR_SOUTH: y += 1; break;
}
int check = manager.stateAt(x, y);
if (check == manager.STATE_UNKNOWN ||
check == manager.STATE_NONE) {
// went off the path, backup
x = tempX;
y = tempY;
if (getDirection() == DIR_EAST ||
getDirection() == DIR_WEST) {
if (manager.stateAt(x, y + 1) !=
BuildingManager.STATE_NONE &&
manager.stateAt(x, y + 1) !=
BuildingManager.STATE_UNKNOWN) {
setDirection(Person.DIR_SOUTH);
y += 1;
}
else {
// Only direction not checked is north
setDirection(Person.DIR_NORTH);
y -= 1;
}
}
else {
if (manager.stateAt(x + 1, y) !=
BuildingManager.STATE_NONE &&
manager.stateAt(x + 1, y) !=
BuildingManager.STATE_UNKNOWN) {
setDirection(Person.DIR_EAST);
x += 1;
}
else {
// Only direction not checked is south
setDirection(Person.DIR_WEST);
x -= 1;
}
}
}
setNextPoint(new Point(x, y));
}
}
|
这个相当复杂的方法主要是检查当前位置的映射。然后选择要去的最佳位置。它试图尽可能地沿同一个方向走。注意
hints是标志，提供了优先选择的方向。它们通常用于开始位置和交叉路口。
Person 可以过早地（也就是在达到路径终点之前）停止，也可以设定为经过固定的时间后才开始移动。
Person
对象还可以留下逐渐消失的图像痕迹（或者历史）以描绘出它们的运动，如图 6 所示。
图 6. 一个带有历史痕迹的 person 移动
每个人都有机会
清单 5 显示了用于移动实体的逻辑。这个过程在每个动画周期中执行一次。
清单 5. 移动所有实体
/** Move the entities around the pattern */
public void moveEntities() {
// update (move) the people
for (Iterator iter = people.iterator(); iter.hasNext();) {
Object next = iter.next();
if (next instanceof Person) {
((Person)next).updateTick();
}
}
// update the other entities
for (Iterator iter = entities.iterator(); iter.hasNext();) {
Object next = iter.next();
if (next instanceof Entity) {
((Entity)next).updateTick();
}
}
}
|
动画中的每个新帧（frame）都是由清单 6 所显示的过程创建的。注意实体将它们自己添加到帧中。
清单 6. 在当前位置添加实体
/** Advance the animation */
public void prepareNextFrame(boolean update, boolean shared) {
setBackground(Color.black);
if (update) {
manager.moveEntities();
}
mainPanel.setBounds(getBounds());
mainPanel.removeAll();
// add the people
for (Iterator iter = manager.getPeople().iterator();
iter.hasNext();) {
Person person = (Person)iter.next();
person.addToPanel(mainPanel, shared);
}
// add the entities
for (Iterator iter = manager.getEntities().iterator();
iter.hasNext();) {
Entity entity = (Entity)iter.next();
entity.addToPanel(mainPanel, shared);
}
}
|
我们用清单 7 中的代码实现连续的动画。
delay 值控制动画运行的快慢以及它占用 CPU 时间的多少。
清单 7. 动画周期
public void runUpdates(int delay) {
TimerTask task = new TimerTask() {
public void run() {
SwingUtilities.invokeLater(new Runnable() {
public void run() {
prepareNextFrame();
repaint();
if (manager.getPeople().size() == 0) {
cancel();
}
}
});
}
};
(new Timer(true)).scheduleAtFixedRate(task, 0, delay);
}
|
下面是我们动画序列的几个屏幕快照。图 7 显示了在行动之前的逃生模拟（完成了全部过程的大约 10%）。
图 7. 刚开始时的逃生序列
图 8 显示在完成了大约 50% 时的动画序列。
图 8. 数次更新后的逃生序列
图 9 显示接近完成时的序列（尽管序列实际上是无限循环运行的）。
图 9. 接近完成时的逃生序列
在图 10 中可以看到实体是如何沿着控制路径移动的，它应当可以让您更好地理解运行是如何实现的。
图 10. 实体沿着控制路径移动
绘制舞台
类
BuildingViewer 创建让对象在其中移动的容器。
paintChldren()
方法首先绘制背景图像，然后是报警消息，最后是表示不同实体的子组件。
清单 8. BuildingViewer.paintChildren
private int paintCount;
private static final Color evacColor = new Color(255, 0, 0, 128);
:
/** draw the background, massage and entities */
public void paintChildren(Graphics g) {
paintCount++;
if (background != null) {
Graphics g2 = g.create();
try {
// draw the background
g2.drawImage(background.getImage(),
(int)getLocation().getX(),
(int)getLocation().getY(),
(int)getLocation().getX() + getWidth(),
(int)getLocation().getY() + getHeight(),
0, 0,
background.getIconWidth(),
background.getIconHeight(),
Color.black, null);
// draw the alert message (if any)
if (alertMessage != null) {
if (paintCount % alertPeriod >= (alertPeriod / 2)) {
Font f = g2.getFont();
Font f2 = f.deriveFont((float)alertSize);
FontMetrics fm = Toolkit.getDefaultToolkit().
getFontMetrics(f2);
int fHeight = fm.getHeight(),
fAscent = fm.getAscent();
int sWidth = fm.stringWidth(alertMessage);
g2.setFont(f2);
Graphics2D g2d = (Graphics2D)g2;
g2d.setStroke(new BasicStroke(10));
g2.setColor(evacColor);
g2.drawString(alertMessage,
(getWidth() - sWidth) / 2,
(getHeight() - fHeight) / 2 +
Ascent);
}
}
} finally {
g2.dispose();
}
}
super.paintChildren(g);
}
|
要创建有效的动画，需要移动的对象。清单 9 显示的代码根据所提供的输入创建一系列同样类型（即残疾的、非残疾的、消防员等）的
Person
实体。
清单 9. 创建相同类型的实体
/** initialize paths */
protected static void initLoop(BuildingManager manager, ImageIcon icon,
int[] locs, String[] names,
int[] starts, int[] appear, int[][][] stops)
{
LinkedList startPts = (LinkedList)manager.
getAvailableStartingPoints();
// for all specified locations - create a Person
for (int i = 0; i < locs.length; i++) {
JLabel label = new JLabel(names[i], icon, JLabel.CENTER);
label.setFont(new Font(label.getFont().getName(),
label.getFont().getStyle(), 20));
Person person = new Person(manager, label,
(Point2D)startPts.get(
Math.min(startPts.size() - 1, locs[i])),
starts[i]);
person.setAppearTick(appear[i]);
// defines stop locations for each Person
for (int j = 0; j < stops[i].length; j++) {
person.addStop(stops[i][j][0], stops[i][j][1]);
}
manager.addEntity(person);
}
}
|
清单 10 用清单 9 中的
initLoop 代码定义了一组
Person 实体。这段代码使用几个平行的数组（根据
locs 数组的长度）提供有关要创建的对象的信息。
locs 数组为用控制路径提供的一组定义好的开始位置提供了索引。
starts 值指定在什么时间让
Person 开始移动。
appear 值定义了什么时候应当让
Person 变为可见（通常是在开始移动之前）。
stops 值指定每个
Person 可以有的停止点（可能有多个）。
尽管下面显示的代码是以手工键入值，但是也可以通过增加表示位置实体状态的新颜色来从控制路径获得大多数这些输入值。这种增强可以简化这些值的输入，并减少控制路径改变时出错的可能性。
清单 10. 创建所有 Person 实体
/** Make some demo people */
static public void createPeople(BuildingManager manager,
ImageIcon employIcon,
ImageIcon fireIcon,
ImageIcon disabledIcon)
{
// Main character - ALEX
int locs[] = new int[] {42};
String names[] = new String[] {"Alex"};
int starts[] = new int[] { 300 };
int appear[] = new int[] { 0 };
int stops[][][] = new int[][][] {{}};
initLoop(manager, employIcon, locs, names, starts, appear, stops);
// Some disabled people
locs = new int[] { 39, 45 };
names = new String[] { "Karen", "Mike" };
starts = new int[] { 0, 0};
appear = new int[] { 0, 0 };
stops = new int[][][] {{{1, 164}, {560, 20}},
{{1, 141}, {460, 30}}};
initLoop(manager, disabledIcon, locs, names, starts, appear, stops);
// Some Assisters
locs = new int[] {44, 49, 37, 46};
names = new String[] { "Tom", "Joe", "Cathy", "Larry" };
starts = new int[] { 0, 0, 0, 0};
appear = new int[] { 0, 0, 0, 0 };
stops = new int [][][] {{{120, 52}, {560, 20}},
{{155, 24}, {560, 20}},
{{122, 27}, {460, 30}},
{{100, 59}, {460, 30}}};
initLoop(manager, employIcon, locs, names, starts, appear, stops);
// A firemen
locs = new int[] { 25 };
names = new String[] { "FD", "FD 2", "FD 3" };
starts = new int[] { 400, 400, 400};
appear = new int[] { 400, 400, 400 };
stops = new int [][][] {{},{}, {}};
initLoop(manager, fireIcon, locs, names, starts, appear, stops);
:
: **** many additional definition sets omitted ****
:
}
|
最后，清单 11 显示了如何创建一个
Alarm 实体。显然，我们可以容易地根据需要增加更多的报警。
清单 11. 创建报警
/** Make some demo alarms */
static public void createAlarms(BuildingManager manager) {
final int alarms[] = { 12 };
LinkedList startPts = (LinkedList)manager.
getAvailableStartingPoints();
for (int i = 0; i < alarms.length; i++) {
manager.addEntity(
new Alarm(manager, (Point2D)startPts.get(alarms[i])));
}
}
|
结束语
在本文中，我们展示了如何用无损图像、Swing 技术和自定义的动画引擎来生成 2D 动画中的运动路径。这种方法使我们可以用控制路径以一种快速和可预言的方式可视化地创建动画。这种技术的优点如下：
-
易于使用
- 大多数编辑程序都有几种生成直线、圆弧和其他形状的方法。这些选择使我们可以手工迅速生成一些路径，同时减少错误。这对于某些行为是非常有用的。
-
引用图像
- 当动画相对于背景图像运动时（如在
图 1中），我们可能希望让对象在图像中的某些区域内运动，如让对象保持在走廊中。许多图像编辑程序可以让我们使用半透明的图层在背景图上面生成控制图像。这样我们就可以容易地创建与背景图相匹配的控制路径，因为在生成控制图像时可以同时看到叠加在一起的两幅图像。
-
增加绘制
- 通过混合颜色，我们可以在一个位置上编码多种行为。例如，使用 RGB 颜色时，可以用红色 (0xFF0000) 表示一个对象所要走的路径，绿色
(0x00FF00) 编码另一个对象要走的路径。使用增加绘制时，在路径交叉的点将会是黄色 (0xFFFF00)。
使用这种增加绘制模型时，当使用比如说一个 32 位颜色模型时，可以从一个给定位置以位掩码的形式提取出 32 种不同的行为。尽管我们只描述了一种简单的行为，但是可以编码的行为的数量只受在该图像格式中每种颜色所具有的位数的限制。
我们还给出并描述了沿着一组路径移动对象的一个简单动画引擎。在例子中，每一个对象称为
Entity 并实现为
JLabel ，它们被驱动周期性地更新其位置和/或者外观。使用一个长期运行的计时器线程驱动这个过程。用一个
JPanel 作为所有对象的容器，并作为绘制背景的方法。有关这个动画示例和本文中介绍的基于 Java 的动画引擎的完整源代码请参阅
参考资料。
参考资料
作者简介 | | | Barry Feigenbaum 博士是 IBM Worldwide Accessibility Center 的成员，在那里他参与协助
IBM 开发可供残障人士使用产品。Feigenbaum 博士已经发表了几本书籍和文章，拥有多项专利，并在诸如 JavaOne 之类的业界会议上发表演说。他是位于美国奥斯汀的得克萨斯大学（University
of Texas）计算机科学系的助理教授。可以通过
feigenba@us.ibm.com
与 Feigenbaum 博士联系。
|
| | | Tom Brunet 是威斯康星-麦迪逊大学的研究生。他在奥斯汀大学获得了计算机科学学士学位，在那里他被提名为学校荣誉毕业生。在研究生学习期间，他为 IBM 研究室工作了四年，其中有一个暑假的时间参与 Data Abstraction Research 小组的工作，其余的时间在 Accessibility Center 工作。他同时还是 Nina Amenta 博士的本科生研究助教。可以通过
tomab@cs.wisc.edu
与 Tom 联系。
|
对本文的评价
| |
