java - 让动画更流畅
问题描述
我正在尝试使用 JPanel 和 painComponent 创建一些动画(只要按下键就会运行的男孩)。所以,首先我声明一些图像、图像数组和一些绘图方法。我创建了计时器并将其添加到构造函数中。
Image img1;
Image img2;
Image img3;
Image img4;
int index = 0;
Image currentImage l;
Image[] images = new Image[4]
public class Animation extends JPanel implements ActionListener
{
public Animation()
{
loadImages();
getTimer();
imgAdder();
addFirstImage();
}
public void serCurrentImage(Image currentImage)
{
this.currentImage = currentImage;
}
public void getTimer()
{
Timer timer = new Timer(20,this)
timer.start();
}
public void imgAdder()
{
images[1] = img1;
...
}
public void addFirstImage()
{
currentImage = img1;
}
private void loadImages()
{
try
{
BufferedImage img = ImageIO.read(getClass.getResource(“/resources/images/img1.png”);
img1 = img;
// and so on for every image
}catch(IOexception ioe )
ioe.printStackTrace();
}
}
public void paintComponent (Graphics g)
{
super.paintComponent(g);
g.drewImage(currentImage,0,0,this);
requestsFocus();
}
public class FieldKeyListener extends KeyAdapter
{
public void move()
{
setCurrentImage(image[index]);
index++;
if( index == 4 )
index = 0;
}
public void keyPressed(KeyEvent e)
{
super.keyPressed(e);
int key = e.getKeyCode();
if(key == Key.Event.VK_LEFT)
move();
}
}
}
然后使用我的数组的循环通过paintComponent绘制所有图像。我还声明了扩展 KeyAdapter 的类。一切似乎都很好,我的动画效果很好,但问题是它不像我想要的那样流畅。当我按住键时,图像变化太快,过程看起来不自然。例如,我希望每秒更改 3 或 4 个图像而不是 20 个。我可以用错误的方法添加计时器吗?可能有时间延迟之类的东西。我不知道它是如何工作的,以及我应该在计时器中提到哪个监听器作为参数。Ps 我只是初学者,我的代码在编码标准方面可能看起来不正确。此外,我只写了代表问题的项目的关键部分。我希望你能帮我解决这个问题。提前致谢。
解决方案
动画是一门复杂的学科,有很多枯燥的理论。基本上,动画是随时间变化的错觉。这非常重要,因为您在动画中所做的一切都将基于时间。
在游戏之类的东西中,您将拥有一堆实体,它们都以不同的时间速率进行游戏。挑战之一是花时间设计一种解决方案,该解决方案允许实体在与刷新周期(即帧数)分离的同时播放一段时间,除非您的精灵具有正确的帧数以匹配您的刷新循环,但即便如此,我还是会担心,因为系统不够灵活,无法适应操作系统和硬件无法跟上的情况。
以下是一个简单的示例,它采用精灵表(存储在单个图像中的一系列图像)、预期图像/帧的数量以及完成一个完整周期的时间。
它计算单个帧大小并根据精灵动画的时间量返回一个帧...
public class Sprite {
private BufferedImage source;
private int imageCount;
private int imageWidth;
// How long it takes to play a full cycle
private Duration duration;
// When the last cycle was started
private Instant startedAt;
public Sprite(BufferedImage source, int imageCount, int cycleTimeInSeconds) throws IOException {
this.source = source;
this.imageCount = imageCount;
imageWidth = source.getWidth() / imageCount;
duration = Duration.ofSeconds(cycleTimeInSeconds);
}
public BufferedImage getFrame() {
if (startedAt == null) {
startedAt = Instant.now();
}
Duration timePlayed = Duration.between(startedAt, Instant.now());
double progress = timePlayed.toMillis() / (double)duration.toMillis();
if (progress > 1.0) {
progress = 1.0;
startedAt = Instant.now();
}
int frame = Math.min((int)(imageCount * progress), imageCount - 1);
return getImageAt(frame);
}
protected BufferedImage getImageAt(int index) {
if (index < 0 || index >= imageCount) {
return null;
}
int xOffset = imageWidth * index;
return source.getSubimage(xOffset, 0, imageWidth, source.getHeight());
}
}
注意:它还需要一种重置或停止的方法,所以你可以强制精灵回到开始,但我会留给你
接下来,我们需要一些方法来播放动画
public class TestPane extends JPanel {
private Sprite sprite;
public TestPane(Sprite sprite) {
this.sprite = sprite;
Timer timer = new Timer(5, new ActionListener() {
@Override
public void actionPerformed(ActionEvent e) {
repaint();
}
});
timer.start();
}
@Override
public Dimension getPreferredSize() {
return new Dimension(400, 400);
}
protected void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2d = (Graphics2D) g.create();
BufferedImage img = sprite.getFrame();
int x = (getWidth() - img.getWidth()) / 2;
int y = (getHeight() - img.getHeight()) / 2;
g2d.drawImage(img, x, y, this);
g2d.dispose();
}
}
这里没有什么特别的,它是一个简单的 SwingTimer
设置为高分辨率(5 毫秒),它不断更新 UI,从精灵请求下一帧并绘制它。
这里重要的部分是精灵和刷新周期是独立的。想让角色走得更快,改变精灵持续时间,想让角色走得更慢,改变精灵持续时间,不需要改变刷新周期(或任何其他实体)
那么,从...开始
相同的循环,第一次超过 1 秒,第二次超过 5 秒
您还可以查看类似How to create a usable KeyReleased method in java之类的内容,它演示了键绑定的使用和集中Set
的“操作”存储库
推荐阅读
- vue.js - 使用 router.push 更新路由后无法调度操作
- java - IntelliJ 无法识别 Maven 依赖项
- android - 适用于 Android 的 H3 地理覆盖
- spring-security - 成功 SAML 身份验证后出现 403“无效 CORS 请求”
- picamera - 安装 picamera 时出现问题(错误:命令出错,退出状态为 1:)
- php - 具有隐藏属性的功能测试身份验证
- powershell - PowerShell Start-Job 未运行脚本块
- javascript - 我如何单击并且可以在 Javascript 上显示自己的类
- unity3d - 2d 文本聚焦在相机上,但当相机围绕对象旋转时旋转 180
- javascript - I18n-js - 有没有办法检查翻译是否存在?