简单位移动画
文章来源：《Head First Java》修炼感悟。
上一篇文章中，老白利用内部类的特性完成了多个事件的处理，感觉还不错。 为了更深入理解内部类，本篇文章继续使用内部类创建一个画板，完成简单的位移动画，感兴趣的小伙伴可以继续往下看。
怎样实现位移动画
把一个图案从一个位置移动到另一个位置，我们看到的移动过程称为位移动画。 实现位移动画很简单，你可以这样考虑：
- 在起始位置绘制图案；
- 改变绘制坐标重新绘制这个图案；
- 以一个合适的频率不断重复上述操作，直到绘制到终点。
这里有几个关键点需要注意：
- 如何更新绘制位置；
- 如何调用绘制方法；
- 如何使用内部类充当画板。
下面我们通过一个例子来演示生成位移动画的过程。
程序代码
为简单起见，例子中仅绘制了一个简单的椭圆形图案，当然你也可以绘制一张图片，效果会更好。
以下是完整代码：
java
import javax.swing.*;
import java.awt.*;
/**
* 文件：SimpleAnimation.java
* 描述：利用内部类实现画板功能，完成一个简单的位移动画。
*/
public class SimpleAnimation {
private int x = 50; // 绘制坐标x
private int y = 50; // 绘制坐标y
private DrawPanel panel; // 自定义画板
public static void main(String[] args) {
new SimpleAnimation().go();
}
public void go() {
JFrame frame = new JFrame();
panel = new DrawPanel();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.getContentPane().add(panel);
frame.setSize(300, 300);
frame.setVisible(true);
draw(); // 绘制方法
}
// 绘制方法
private void draw() {
for (int i = 0; i < 130; i++) {
x++;
y++;
panel.repaint(); // 重绘，由系统调用绘制方法
try {
Thread.sleep(50); // 刻意让线程休息 50ms
} catch (Exception e) {
e.printStackTrace();
}
}
}
// 自定义的画板
class DrawPanel extends JPanel {
public void paintComponent(Graphics g) {
g.setColor(Color.GREEN);
g.fillOval(x, y, 40, 40);
}
}
}需要注意，每次绘制结束后都要清屏，即便是内容没有变化也要这样做。所谓「清屏」就是指把过期画面清除，然后再重新绘制新内容，不然会出现类似「拖尾」的诡异画面，就像这样：
清屏很简单，只要使用背景颜色重新填充整个画面就可以了，就像这样：
java
// 绘制方法
public void paintComponent(Graphics g) {
// 清屏，使用白色填充整个背景
g.setColor(Color.WHITE);
g.fillRect(0, 0, this.getWidth(), this.getHeight());
// 填充图案
g.setColor(Color.GREEN);
g.fillOval(x, y, 40, 40);
}再来看看效果：
看起来还不错。
其实动画原理很简单，比如游戏中的角色行走动画，实际上就是不断绘制一组序列图片再加上位移动画，看起来就像是在不断行走。
内容预告
前面添加组件的方式多少有些投机取巧的成分，下一篇文章老白会为你详细解读 GUI 组件的布局管理器。
| 《 上一篇 处理多发事件 |
|---|