如何在兩個不同點之間繪制運動動畫線

Question

我正在做一個有關將固定點與動畫點鏈接的項目。 我正在使用它，我想使用隨機位於任意位置的點來執行此操作。 源代碼僅用於我要對所有點進行的兩個位置，例如我從點1取x和y。例如，我希望它轉到其他位置點2和點3。

PS：我是說法語而不是說英語的人。 對不起，我在Java中是個新手。

Panneau.java

package animation;

/**
*
* @author ilies
*/
import java.awt.Color;
import java.awt.Graphics;
import javax.swing.JPanel;

public class Panneau extends JPanel {
 private int posX = -50;
  private int posY = -50;
  public void paintComponent(Graphics g){
    //On choisit une couleur de fond pour le rectangle
    g.setColor(Color.white);
    //On le dessine de sorte qu'il occupe toute la surface
    g.fillRect(0, 0, this.getWidth(), this.getHeight());
    //On redéfinit une couleur pour le rond
    g.setColor(Color.red);
    //On le dessine aux coordonnées souhaitées
    g.fillOval(posX, posY, 50, 50);
  }
  public int getPosX() {
   return posX;
   }
  public void setPosX(int posX) {
    this.posX = posX;
  }
  public int getPosY() {
    return posY;
  }
  public void setPosY(int posY) {
    this.posY = posY;
  }
}  

Fenetre.java

package animation;

/**
 *
 * @author ilies
 */
 import java.awt.Dimension; 
 import javax.swing.JFrame;

public class Fenetre extends JFrame{
  private Panneau pan = new Panneau();
  public Fenetre(){        
   this.setTitle("Animation");
   this.setSize(300, 300);
   this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
   this.setLocationRelativeTo(null);
   this.setContentPane(pan);
   this.setVisible(true);
   go();
   }
   private void go(){

    for(int i = -50; i < pan.getWidth(); i++){
      int x = pan.getPosX(), y = pan.getPosY();
      x++;
      y++;
      pan.setPosX(x);
      pan.setPosY(y);
      pan.repaint();  
      try {
        Thread.sleep(10);
      } catch (InterruptedException e) {
        e.printStackTrace();
      }
    }
  }       
}

Animation.java

package animation;

/**
*
* @author ilies
*/
public class Animation {

   /**
    * @param args the command line arguments
    */
    public static void main(String[] args) {
       Fenetre fen = new Fenetre();
       // TODO code application logic here
    }

}

Answer 1

您確實需要某種插值方法。 您當前的代碼只是在屏幕上進行翻譯-與有意在兩點之間移動相比，這有很大不同。

這是一個非常簡單的實現。 一個更可靠的解決方案（即恆定速度）將使用速度參數和幀之間的時間變化。

public Point interpolate(Point start, Point end, double fraction) {
    int dx = end.x - start.x;
    int dy = end.y - start.y;

    int newX = (int) (start.x + dx * fraction);
    int newY = (int) (start.y + dy * fraction);

    return new Point(newX, newY);
}

另外，您需要一些隨機點進行插值。

ArrayList<Point> pointList = new ArrayList<>();

Random rand = new Random();

for (int i = 0; i < 2 + rand.nextInt(10); i++) {
   pointList.add(new Point(rand.nextInt(pan.getWidth()), 
                           rand.nextInt(pan.getHeight())));   
}

最后，您需要使用以下代碼替換Fenetre.go（）中的動畫循環：

while (true) {
    // Change the speed by changing the delta value
    for (double i = 0.0; i <= 1.0; i += 0.05) {
        Point p = interpolate(pointList.get(0), pointList.get(1), i);
        pan.setPosX(p.x);
        pan.setPosY(p.y);

        pan.repaint();

        try {
            Thread.sleep(10);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
    }

    // Push the first point to the back of the list and repeat
    pointList.add(pointList.remove(0));
}