跳到主要内容

Java 动画

动画基础概念​

动画本质上是通过快速显示一系列略有差别的图像来创造运动的错觉。在Java中创建动画，我们需要理解几个基本概念：

  • 帧率(FPS): 每秒显示的图像数量，通常为30-60FPS
  • 重绘(Repaint): 重新绘制GUI组件的过程
  • 双缓冲: 在内存中创建图像，然后一次性显示，避免闪烁
小贴士

人眼能感知的平滑动画最低帧率约为24FPS，但在计算机动画中，通常使用60FPS可以获得更流畅的效果。

Java 实现动画的方法​

1. 使用Timer类​

javax.swing.Timer是实现简单动画的好选择，特别适合Swing应用程序：

java
import javax.swing.*;
import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

public class BallAnimation extends JPanel implements ActionListener {
    private int x = 0;
    private Timer timer;
    
    public BallAnimation() {
        timer = new Timer(16, this); // 约60FPS
        timer.start();
    }
    
    @Override
    protected void paintComponent(Graphics g) {
        super.paintComponent(g);
        g.setColor(Color.RED);
        g.fillOval(x, 50, 30, 30); // 绘制小球
    }
    
    @Override
    public void actionPerformed(ActionEvent e) {
        x += 5; // 每帧小球向右移动5像素
        
        // 当小球移出面板时重置位置
        if (x > getWidth()) {
            x = -30;
        }
        
        repaint(); // 请求重绘面板
    }
    
    public static void main(String[] args) {
        JFrame frame = new JFrame("Ball Animation");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.add(new BallAnimation());
        frame.setSize(400, 200);
        frame.setVisible(true);
    }
}

这段代码创建了一个简单的动画，一个红色小球从左向右移动，到达边界后重新从左侧出现。

2. 使用Thread类​

对于需要更精细控制的动画，可以使用Thread：

java
import javax.swing.*;
import java.awt.*;

public class ThreadAnimation extends JPanel implements Runnable {
    private int x = 0;
    private Thread animationThread;
    
    public ThreadAnimation() {
        animationThread = new Thread(this);
        animationThread.start();
    }
    
    @Override
    protected void paintComponent(Graphics g) {
        super.paintComponent(g);
        g.setColor(Color.BLUE);
        g.fillRect(x, 50, 40, 40); // 绘制方块
    }
    
    @Override
    public void run() {
        while (true) {
            x += 3; // 每帧方块向右移动3像素
            
            // 当方块移出面板时重置位置
            if (x > getWidth()) {
                x = -40;
            }
            
            repaint(); // 请求重绘面板
            
            // 控制帧率
            try {
                Thread.sleep(16); // 约60FPS
            } catch (InterruptedException e) {
                break;
            }
        }
    }
    
    public static void main(String[] args) {
        JFrame frame = new JFrame("Thread Animation");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.add(new ThreadAnimation());
        frame.setSize(400, 200);
        frame.setVisible(true);
    }
}
注意

使用线程时必须小心处理线程的终止，避免资源泄漏。上面的例子并没有包含适当的线程终止机制。

3. JavaFX动画框架​

JavaFX提供了一个强大的动画API，能更容易地创建复杂动画：

java
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;
import javafx.util.Duration;

public class JavaFXAnimation extends Application {
    @Override
    public void start(Stage primaryStage) {
        // 创建场景和面板
        Pane root = new Pane();
        Scene scene = new Scene(root, 400, 200);
        
        // 创建圆形
        Circle circle = new Circle(20, Color.GREEN);
        circle.setCenterX(50);
        circle.setCenterY(100);
        root.getChildren().add(circle);
        
        // 创建动画
        Timeline timeline = new Timeline();
        timeline.setCycleCount(Timeline.INDEFINITE); // 无限循环
        
        // 添加关键帧 - 圆从左到右移动
        KeyValue kv = new KeyValue(circle.centerXProperty(), 350);
        KeyFrame kf = new KeyFrame(Duration.seconds(3), kv);
        timeline.getKeyFrames().add(kf);
        
        timeline.play(); // 开始动画
        
        // 设置舞台
        primaryStage.setTitle("JavaFX Animation");
        primaryStage.setScene(scene);
        primaryStage.show();
    }
    
    public static void main(String[] args) {
        launch(args);
    }
}

JavaFX提供了多种动画类型：

  • Timeline: 基于关键帧的动画
  • TranslateTransition: 移动动画
  • RotateTransition: 旋转动画
  • ScaleTransition: 缩放动画
  • FadeTransition: 淡入淡出动画

动画技术进阶​

双缓冲技术​

为了避免动画闪烁，可以使用双缓冲技术：

java
import javax.swing.*;
import java.awt.*;
import java.awt.image.BufferedImage;

public class DoubleBufferedAnimation extends JPanel implements Runnable {
    private int x = 0;
    private Thread thread;
    private BufferedImage offscreenImage;
    private Graphics offscreenGraphics;
    
    public DoubleBufferedAnimation() {
        thread = new Thread(this);
        thread.start();
    }
    
    @Override
    protected void paintComponent(Graphics g) {
        super.paintComponent(g);
        
        // 创建离屏缓冲区
        if (offscreenImage == null) {
            offscreenImage = new BufferedImage(getWidth(), getHeight(), BufferedImage.TYPE_INT_ARGB);
            offscreenGraphics = offscreenImage.getGraphics();
        }
        
        // 在离屏图像上绘制
        offscreenGraphics.setColor(getBackground());
        offscreenGraphics.fillRect(0, 0, getWidth(), getHeight());
        offscreenGraphics.setColor(Color.RED);
        offscreenGraphics.fillOval(x, 50, 30, 30);
        
        // 将完整图像复制到屏幕
        g.drawImage(offscreenImage, 0, 0, this);
    }
    
    @Override
    public void run() {
        while (true) {
            x = (x + 5) % (getWidth() + 30) - 30;
            repaint();
            
            try {
                Thread.sleep(16);
            } catch (InterruptedException e) {
                break;
            }
        }
    }
    
    public static void main(String[] args) {
        JFrame frame = new JFrame("Double Buffered Animation");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.add(new DoubleBufferedAnimation());
        frame.setSize(400, 200);
        frame.setVisible(true);
    }
}
备注

在现代的Swing中，双缓冲已经是默认行为，但了解其原理仍然很重要。

精灵动画​

精灵是游戏或动画中的可移动对象。以下是一个基本的精灵类实现：

java
import java.awt.Graphics;
import java.awt.Image;
import java.awt.Rectangle;

public class Sprite {
    private int x, y;       // 位置
    private int dx, dy;     // 速度
    private Image image;    // 图像
    
    public Sprite(int x, int y, Image image) {
        this.x = x;
        this.y = y;
        this.image = image;
    }
    
    public void setVelocity(int dx, int dy) {
        this.dx = dx;
        this.dy = dy;
    }
    
    public void update() {
        x += dx;
        y += dy;
    }
    
    public void draw(Graphics g) {
        g.drawImage(image, x, y, null);
    }
    
    public Rectangle getBounds() {
        return new Rectangle(x, y, image.getWidth(null), image.getHeight(null));
    }
    
    // 检测与其他精灵的碰撞
    public boolean collidesWith(Sprite other) {
        return getBounds().intersects(other.getBounds());
    }
}

实际应用案例：简易弹球游戏​

下面是一个简单的弹球游戏，展示了如何在实际应用中使用动画技术：

java
import javax.swing.*;
import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.KeyAdapter;
import java.awt.event.KeyEvent;

public class PongGame extends JPanel implements ActionListener {
    private static final int WIDTH = 600;
    private static final int HEIGHT = 400;
    private static final int PADDLE_WIDTH = 60;
    private static final int PADDLE_HEIGHT = 10;
    private static final int BALL_SIZE = 16;
    
    private int ballX = WIDTH / 2;
    private int ballY = HEIGHT / 2;
    private int ballDX = 2;
    private int ballDY = 2;
    private int paddleX = WIDTH / 2 - PADDLE_WIDTH / 2;
    private boolean gameOver = false;
    
    private Timer timer;
    
    public PongGame() {
        setBackground(Color.BLACK);
        setPreferredSize(new Dimension(WIDTH, HEIGHT));
        setFocusable(true);
        
        addKeyListener(new KeyAdapter() {
            @Override
            public void keyPressed(KeyEvent e) {
                if (e.getKeyCode() == KeyEvent.VK_LEFT) {
                    paddleX = Math.max(0, paddleX - 20);
                }
                if (e.getKeyCode() == KeyEvent.VK_RIGHT) {
                    paddleX = Math.min(WIDTH - PADDLE_WIDTH, paddleX + 20);
                }
            }
        });
        
        timer = new Timer(10, this);
        timer.start();
    }
    
    @Override
    protected void paintComponent(Graphics g) {
        super.paintComponent(g);
        
        // 绘制球
        g.setColor(Color.RED);
        g.fillOval(ballX, ballY, BALL_SIZE, BALL_SIZE);
        
        // 绘制挡板
        g.setColor(Color.WHITE);
        g.fillRect(paddleX, HEIGHT - PADDLE_HEIGHT - 20, PADDLE_WIDTH, PADDLE_HEIGHT);
        
        // 游戏结束提示
        if (gameOver) {
            g.setColor(Color.WHITE);
            g.setFont(new Font("Arial", Font.BOLD, 30));
            g.drawString("Game Over!", WIDTH/2 - 80, HEIGHT/2);
        }
    }
    
    @Override
    public void actionPerformed(ActionEvent e) {
        if (!gameOver) {
            // 移动球
            ballX += ballDX;
            ballY += ballDY;
            
            // 球碰到左右墙壁
            if (ballX <= 0 || ballX >= WIDTH - BALL_SIZE) {
                ballDX = -ballDX;
            }
            
            // 球碰到上壁
            if (ballY <= 0) {
                ballDY = -ballDY;
            }
            
            // 球碰到挡板
            if (ballY >= HEIGHT - PADDLE_HEIGHT - 20 - BALL_SIZE && 
                ballX + BALL_SIZE >= paddleX && 
                ballX <= paddleX + PADDLE_WIDTH) {
                ballDY = -ballDY;
            }
            
            // 球落到底部，游戏结束
            if (ballY >= HEIGHT - BALL_SIZE) {
                gameOver = true;
            }
        }
        
        repaint();
    }
    
    public static void main(String[] args) {
        JFrame frame = new JFrame("Pong Game");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.add(new PongGame());
        frame.pack();
        frame.setLocationRelativeTo(null);
        frame.setVisible(true);
    }
}

这个简单的弹球游戏展示了如何使用Java动画技术创建互动应用。玩家可以用左右方向键移动底部的挡板，防止球落到底部。

总结​

Java提供了多种实现动画的方式，从简单的Timer到功能丰富的JavaFX动画框架。选择哪种技术取决于你的具体需求：

  • Timer: 适用于简单的Swing动画
  • Thread: 提供更精细的控制，但需要小心管理
  • JavaFX: 提供现代、功能丰富的动画API

创建流畅动画的关键是维持稳定的帧率、使用双缓冲避免闪烁，以及优化绘图代码以提高性能。

练习与挑战​

  1. 修改弹球游戏，添加砖块，创建一个简单的打砖块游戏。
  2. 实现一个动画时钟，显示当前时间，指针平滑移动。
  3. 创建一个简单的角色动画，使用精灵表单(sprite sheet)显示行走动画。
  4. 使用JavaFX实现一个带有交互式动画的小应用程序。

附加资源​