【老白学 Java】简单位移动画

news2025/1/5 21:58:23

`简单位移动画`

码老白
文章来源：《Head First 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);
		}
	}
}

需要注意，每次绘制结束后都要清屏，即便是内容没有变化也要这样做。所谓「清屏」就是指把过期画面清除，然后再重新绘制新内容，不然会出现类似「拖尾」的诡异画面，就像这样：
没有清屏的画面

清屏很简单，只要使用背景颜色重新填充整个画面就可以了，就像这样：

// 绘制方法
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);
}