Javaグラフィックサンプル（アプレット版）：図形アニ

作って遊ぼうJavaプログラミング

Javaアプレット
サンプル集
Javaグラフィックサンプル（アプレット版）：スレッドを使ったアニメーションサンプルです。アプレット内で図形をいろんな方向に動かしたり、回転させたりするサンプルです。
[ 記事一覧 ]
作って遊ぼうJavaプログラミング トップページ
ご意見、ご感想、ご質問 ユーザー投稿フォーム
お役立ちリンク集
Java関連書籍
Java アプレットゲームコーナー
Java入門
サンプル集
Javaサンプル集
アプレットサンプル集
四角形の描画
角の丸い四角形の描画
円の描画
楕円の描画
直線の描画
多角形の描画
ベジェ曲線の描画
ベジェ曲線を含む図形の描画
円弧、楕円弧の描画
弓形の描画
扇形の描画
図形の合成
いろいろなテクスチャーパターン
アニメーションサンプル
グラデーションサンプル
ボタンサンプル
チェックボックス
コンボボックス
マウス入力（マウスイベント）サンプル
キー入力（キーイベント）サンプル
アプレットからのファイル読み込み
画像イメージの表示
文字の描画
ダイアログの表示
テキストフィールドのサンプル
アプレットからのJavaScript実行
アプレットでのテーブル表示
テーブル最終行への行追加
テーブル最終行の削除
Swingサンプル集
ゲームを作ってみよう
試してみよう Java実験コーナー
こんなエラー出ちゃいましたぁ！エラー別対処方法

Home > サンプル集 > アプレットサンプル集 > アニメーションサンプル


アニメーションサンプル

このページには、以下のサンプルを掲載しています。 下の項目をクリックをすると各サンプルにジャンプします。 ※2週間以内の新着記事はNewアイコン、更新記事はUpアイコンが表示されます。
  1. 図形の移動（横移動1） ( AnimationSample01.java ) 　
  2. 図形の移動（横移動2） ( AnimationSample01.java ) 　
  3. 図形の移動（縦移動） ( AnimationSample03.java ) 　
  4. 図形の移動（斜め移動） ( AnimationSample04.java ) 　
  5. 図形の移動（スレッド間隔の操作） ( AnimationSample05.java ) 　
  6. 図形の回転 ( AnimationSample06.java ) 　

1. 図形の移動（横移動1）
[ サンプルプログラムのソースコード - AnimationSample01.java - ]
  1. import javax.swing.JApplet;
  2. import java.awt.Color;
  3. import java.awt.Graphics;
  4. import java.awt.Graphics2D;
  6. public class AnimationSample01 extends JApplet implements Runnable {
  8.   private int x,w,h;
  9.   private Thread t;
  11.   public void init(){
  12.     x = 0;
  13.     w = getWidth();
  14.     h = getHeight();
  15.     t = new Thread(this);
  16.     t.start();
  17.   }
  19.   public void paint(Graphics g){
  20.     Graphics2D g2 = (Graphics2D)g;
  21.     g2.setBackground(Color.WHITE);
  22.     g2.setColor(Color.BLUE);
  23.     g.clearRect(0, 0, w, h);
  24.     g.fillOval(x, 10, 30, 30);
  25.   }
  27.   public void run() {
  28.     while( t != null ) {
  29.       try {
  30.         Thread.sleep(10);
  31.         x++;
  32.         x = w <= x ? 0 : x;
  33.         repaint();
  34.       } catch(Exception e ) {
  35.         e.printStackTrace();
  36.       }
  37.     }
  38.   }
  40. }
[ サンプルプログラムの実行結果 ]
実行結果を見るには下のボタンをクリックしてください。
※実行結果は、別ウィンドウで開きます。実行には時間がかかることがありますのでご注意ください。


[ サンプルプログラムの解説 ]
図形を動かす場合、静止したままの図形を描画する場合と違ってプログラムにいくつかの処理を追加する必要があります。
まず、サンプル6行目の赤字部分に「implements Runnable 」と言う記述がありますが、これは、サンプルのアプレットクラスに スレッドの機能を追加させるためのものです。スレッドとは何かと言うと指定した時間間隔で実行させることのできる処理を指します。 この指定した時間間隔で実行させる処理は、run()メソッドの中に記述します。サンプルでは、28行目から38行目の青字部分になります。 「implements Runnable 」でスレッド機能を追加したアプレットは、スレッドの登録を行います（15行目）。そして、16行目で登録したスレッドを実行させます。 これで、run()メソッド内で指定した時間間隔（27行目）でrun()メソッドが実行されます。大雑把に構造は、大体下のような感じになります。
  1. public class [アプレットの名前] extends JApplet implements Runnable {
  3.   [スレッド内で利用する変数等の宣言]
  4.   Thread thread;
  6.   public void init() {
  8.     [スレッド内で利用する変数等の初期化]
  9.     t = new Thread(this);
  10.     t.start();
  12.   }
  14.   public void paint(Graphics g) {
  16.     [スレッドで処理を行った変数を使って図形の描画処理を行う]
  18.   }
  20.   public void run() {
  22.     while( t != null ) {
  24.       try {
  26.         Thread.sleep([スレッドの時間間隔（ミリ秒単位）]);
  27.         [図形描画に利用する変数等の処理]
  28.         repaint();
  30.       } catch(Exception e ) {
  32.         e.printStackTrace();
  34.       }
  36.     }
  38.   }
  40. }

このサンプルを実行してみた方は、わかるかと思いますが、このサンプルには少々欠点があります。それは、画面のちらつきです。 なぜこのようなことが起こるのかと言うと描画処理の際にシステムが利用する描画領域に直接書き込みを行っているからです。
サンプルの場合、下のような描画処理がスレッドの時間間隔で延々と実行されています。

描画領域のクリア → 四角形の描画 → 描画領域のクリア → 四角形の描画 ....

描画処理と言うのは、少し時間のかかる処理のためシステム描画領域に直接書き込むと描画が処理が完了しないうちに次のスレッドの 描画処理が開始されることがあります。正常に描画できたり描画が途中で終わったりと言うことが繰り返されるので画面のちらつきが発生します。
サンプルのプログラムでの描画する四角形の大きさを大きくしたり、スレッド間隔を短くしてみたりすると描画処理が間に合わない可能性が高くなるので、画面のちらつきが多くなります。
これを解決するには、オフスクリーンへの描画処理が必要になります。システム描画領域とは別に自前で描画領域を確保してそこに描画処理を行います。 描画処理が全て完了した時点で、システムの描画領域へ書き込みます。オフスクリーンを使った方法は、次のサンプル以降で紹介します。


2. 図形の移動（横移動2）
[ サンプルプログラムのソースコード - AnimationSample02.java - ]
  1. import javax.swing.JApplet;
  2. import java.awt.Color;
  3. import java.awt.Graphics;
  4. import java.awt.Graphics2D;
  5. import java.awt.RenderingHints;
  6. import java.awt.image.BufferedImage;
  8. public class AnimationSample02 extends JApplet implements Runnable {
  9.   
  10.   private int x,w,h;
  11.   private Thread t;
  12.   private BufferedImage offimg;
  13.   private Graphics2D offs;
  14.   
  15.   public void init(){
  16.     x = 0;
  17.     w = getWidth();
  18.     h = getHeight();
  19.     offimg = new BufferedImage(w,h,BufferedImage.TYPE_INT_ARGB);
  20.     offs = (Graphics2D)offimg.getGraphics();
  21.     offs.setRenderingHint(
  22.             RenderingHints.KEY_ANTIALIASING,
  23.             RenderingHints.VALUE_ANTIALIAS_ON);
  24.     offs.setBackground(Color.WHITE);
  25.     offs.setColor(Color.BLUE);
  26.     t = new Thread(this);
  27.     t.start();
  28.   }
  29.   
  30.   public void paint(Graphics g){
  31.     g.drawImage(offimg, 0, 0, null);
  32.   }
  33.   
  34.   public void update(Graphics g) {
  35.     paint(g);
  36.   }
  37.   
  38.   public void run() {
  39.     while( t != null ) {
  40.       try {
  41.         Thread.sleep(10);
  42.         offs.clearRect(0, 0, w, h);
  43.         offs.fillOval(x, 10, 30, 30);
  44.         x = w <= x ? 0 : x + 1;
  45.         repaint();
  46.       } catch(Exception e ) {
  47.         e.printStackTrace();
  48.       }
  49.     }
  50.   }
  52. }
[ サンプルプログラムの実行結果 ]
実行結果を見るには下のボタンをクリックしてください。
※実行結果は、別ウィンドウで開きます。実行には時間がかかることがありますのでご注意ください。


[ サンプルプログラムの解説 ]
いかがでしょうか？AnimationSample01.javaよりも滑らかな動きになりましたよね？これは、AnimationSample01.javaのところで少しお話 しましたが、オフスクリーンで描画処理を行っているため滑らかな動きとなります。
14、15行目でオフスクリーン用のBufferedImageクラスとGraphics2Dクラスのオブジェクト変数を宣言しています。
21行目でアプレットの描画領域と同じ大きさのイメージ領域を確保しています。
22行目でGraphics2Dの画像描画領域を生成しています。 23〜25行目は、生成した画像描画領域に対して描画の際にアンチエイリアス処理を行うように指定しています。 アンチエイリアス処理というのは、画像描画の際に線等が滑らかに見えるようにするための処理です。コンピューター上の画像は、 点描なので、斜めの線などは、どんなにがんばってもギザギザになってしまいます。そこで、ギザギザの部分に線の色と背景の色の中間色 を描画して線が滑らかに見えるようにするのがアンチエイリアス処理です。下のようなイメージになります。

26、27行目でオフスクリーンに対して背景色と描画色の設定を行っています。
33行目は、オフスクリーンに描画した画像をシステムの描画領域にイメージ画像として描画しています。
44、45行目でオフスクリーンへの描画処理を行っています。サンプルでは、円形を描画しています。この処理は、スレッドの中の処理になるので 43行目で指定したスレッドの時間間隔（サンプルでは、10ms）で繰り返し実行されます。


3. 図形の移動（縦移動）
[ サンプルプログラムのソースコード - AnimationSample03.java - ]
  1. import javax.swing.JApplet;
  2. import java.awt.Color;
  3. import java.awt.Graphics;
  4. import java.awt.Graphics2D;
  5. import java.awt.RenderingHints;
  6. import java.awt.image.BufferedImage;
  8. public class AnimationSample03 extends JApplet implements Runnable {
  10.   private int y,w,h;
  11.   private Thread t;
  12.   private BufferedImage offimg;
  13.   private Graphics2D offs;
  15.   public void init(){
  16.     y = 0;
  17.     w = getWidth();
  18.     h = getHeight();
  19.     offimg = new BufferedImage(w,h,BufferedImage.TYPE_INT_ARGB);
  20.     offs = (Graphics2D)offimg.getGraphics();
  21.     offs.setRenderingHint(
  22.         RenderingHints.KEY_ANTIALIASING,
  23.         RenderingHints.VALUE_ANTIALIAS_ON);
  24.     offs.setBackground(Color.WHITE);
  25.     offs.setColor(Color.BLUE);
  26.     t = new Thread(this);
  27.     t.start();
  28.   }
  30.   public void paint(Graphics g){
  31.     g.drawImage(offimg, 0, 0, null);
  32.   }
  34.   public void update(Graphics g) {
  35.     paint(g);
  36.   }
  38.   public void run() {
  39.     while( t != null ) {
  40.       try {
  41.         Thread.sleep(10);
  42.         offs.clearRect(0, 0, w, h);
  43.         offs.fillOval(10, y, 30, 30);
  44.         y = h <= y ? 0 : y + 1;
  45.         repaint();
  46.       } catch(Exception e ) {
  47.         e.printStackTrace();
  48.       }
  49.     }
  50.   }
  52. }
[ サンプルプログラムの実行結果 ]
実行結果を見るには下のボタンをクリックしてください。
※実行結果は、別ウィンドウで開きます。実行には時間がかかることがありますのでご注意ください。

[ サンプルプログラムの解説 ]
基本的には、 AnimationSample02.javaと変わりません。図形（円形）の描画位置に使う(x, y)座標で、x座標を固定値にしてy座標を スレッド処理で増減させれば縦移動させることができます。サンプルでは、47行目でy座標の増減を行っています。
ちなみにこの処理は、三項演算と言います。書式は、下のようになっています。
[変数] = [条件式] ? [条件式が真の時、変数に入れる値] : [条件式が偽の時、変数に入れる値]
これは、下のような処理に書き換えることもできます。
if ( h <= y ) {
  y = 0;
} else {
  y = y + 1;
}
この処理によって図形が画面の下まで行ったらもう一度画面上部から描画するようになります。


4. 図形の移動（斜め移動）
[ サンプルプログラムのソースコード - AnimationSample04.java - ]
  1. import javax.swing.JApplet;
  2. import java.awt.Color;
  3. import java.awt.Graphics;
  4. import java.awt.Graphics2D;
  5. import java.awt.RenderingHints;
  6. import java.awt.image.BufferedImage;
  8. public class AnimationSample04 extends JApplet implements Runnable {
  10.   private int x,y,w,h;
  11.   private Thread t;
  12.   private BufferedImage offimg;
  13.   private Graphics2D offs;
  15.   public void init(){
  16.     x = 0;
  17.     y = 0;
  18.     w = getWidth();
  19.     h = getHeight();
  20.     offimg = new BufferedImage(w,h,BufferedImage.TYPE_INT_ARGB);
  21.     offs = (Graphics2D)offimg.getGraphics();
  22.     offs.setRenderingHint(
  23.         RenderingHints.KEY_ANTIALIASING,
  24.         RenderingHints.VALUE_ANTIALIAS_ON);
  25.     offs.setBackground(Color.WHITE);
  26.     offs.setColor(Color.BLUE);
  27.     t = new Thread(this);
  28.     t.start();
  29.   }
  31.   public void paint(Graphics g){
  32.     g.drawImage(offimg, 0, 0, null);
  33.   }
  35.   public void update(Graphics g) {
  36.     paint(g);
  37.   }
  39.   public void run() {
  40.     while( t != null ) {
  41.       try {
  42.         Thread.sleep(10);
  43.         offs.clearRect(0, 0, w, h);
  44.         offs.fillOval(x, y, 30, 30);
  45.         x = w <= x ? 0 : x + 1;
  46.         y = h <= y ? 0 : y + 1;
  47.         repaint();
  48.       } catch(Exception e ) {
  49.         e.printStackTrace();
  50.       }
  51.     }
  52.   }
  54. }
[ サンプルプログラムの実行結果 ]
実行結果を見るには下のボタンをクリックしてください。
※実行結果は、別ウィンドウで開きます。実行には時間がかかることがありますのでご注意ください。

[ サンプルプログラムの解説 ]
横移動と縦移動のサンプルを組み合わせたものです。スレッド内でx座標、y座標ともに増減させると斜め移動をさせることができます。 このように描画位置をスレッド内で計算することで図形にさまざまな動きを与えることができます。たとえば円運動、ジグザグ移動、乱数 を使ってふらふらした動きなんかもさせることができます。


5. 図形の移動（スレッド間隔の操作）
[ サンプルプログラムのソースコード - AnimationSample05.java - ]
  1. import javax.swing.JApplet;
  2. import java.awt.Color;
  3. import java.awt.Graphics;
  4. import java.awt.Graphics2D;
  5. import java.awt.RenderingHints;
  6. import java.awt.image.BufferedImage;
  8. public class AnimationSample05 extends JApplet implements Runnable {
  10.   private int x,w,h,m;
  11.   private Thread t;
  12.   private BufferedImage offimg;
  13.   private Graphics2D offs;
  15.   public void init(){
  16.     x = 0;
  17.     w = getWidth();
  18.     h = getHeight();
  19.     m = 10;
  20.     offimg = new BufferedImage(w,h,BufferedImage.TYPE_INT_ARGB);
  21.     offs = (Graphics2D)offimg.getGraphics();
  22.     offs.setRenderingHint(
  23.         RenderingHints.KEY_ANTIALIASING,
  24.         RenderingHints.VALUE_ANTIALIAS_ON);
  25.     offs.setBackground(Color.WHITE);
  26.     offs.setColor(Color.BLUE);
  27.     t = new Thread(this);
  28.     t.start();
  29.   }
  31.   public void paint(Graphics g){
  32.     g.drawImage(offimg, 0, 0, null);
  33.   }
  35.   public void update(Graphics g) {
  36.     paint(g);
  37.   }
  39.   public void run() {
  40.     while( t != null ) {
  41.       try {
  42.         Thread.sleep(m);
  43.         m = m < 100 ? m + 1 : 10;
  44.         offs.clearRect(0, 0, w, h);
  45.         offs.fillOval(x, 10, 30, 30);
  46.         x = w <= x ? 0 : x + 3;
  47.         repaint();
  48.       } catch(Exception e ) {
  49.         e.printStackTrace();
  50.       }
  51.     }
  52.   }
  54. }
[ サンプルプログラムの実行結果 ]
実行結果を見るには下のボタンをクリックしてください。
※実行結果は、別ウィンドウで開きます。実行には時間がかかることがありますのでご注意ください。

[ サンプルプログラムの解説 ]
移動方向は、AnimationSample01.javaと同じです。ただし、移動速度を変化させています。このサンプルでは、スレッドの実行間隔を 変化させることで移動速度の変化を表現しています（44、45行目）。また、別の方法としては、スレッドの時間間隔は、固定化しておいて、移動量を 変化させることで移動速度を変化させるという方法もあります。


6. 図形の回転
[ サンプルプログラムのソースコード - AnimationSample06.java - ]
  1. import javax.swing.JApplet;
  2. import java.awt.Color;
  3. import java.awt.Graphics;
  4. import java.awt.Graphics2D;
  5. import java.awt.RenderingHints;
  6. import java.awt.geom.AffineTransform;
  7. import java.awt.image.BufferedImage;
  9. public class AnimationSample06 extends JApplet implements Runnable {
  11.   private int r,w,h;
  12.   private Thread t;
  13.   private BufferedImage offimg;
  14.   private Graphics2D offs;
  15.   private AffineTransform at;
  17.   public void init(){
  18.     w = getWidth();
  19.     h = getHeight();
  20.     r = 0;
  21.     at = new AffineTransform();
  22.     offimg = new BufferedImage(w,h,BufferedImage.TYPE_INT_ARGB);
  23.     offs = (Graphics2D)offimg.getGraphics();
  24.     offs.setRenderingHint(
  25.         RenderingHints.KEY_ANTIALIASING,
  26.         RenderingHints.VALUE_ANTIALIAS_ON);
  27.     offs.setBackground(Color.WHITE);
  28.     offs.setColor(Color.BLUE);
  29.     t = new Thread(this);
  30.     t.start();
  31.   }
  33.   public void paint(Graphics g){
  34.     g.drawImage(offimg, 0, 0, null);
  35.   }
  37.   public void update(Graphics g) {
  38.     paint(g);
  39.   }
  41.   public void run() {
  42.     while( t != null ) {
  43.       try {
  44.         Thread.sleep(10);
  45.         offs.clearRect(0, 0, w, h);
  46.         at.setToRotation(r*Math.PI/180.0f,55,55);
  47.         offs.setTransform(at);
  48.         offs.fillRect(30, 30, 50, 50);
  49.         r = r <= 360 ? r + 1 : 0;
  50.         repaint();
  51.       } catch(Exception e ) {
  52.         e.printStackTrace();
  53.       }
  54.     }
  55.   }
  57. }
[ サンプルプログラムの実行結果 ]
実行結果を見るには下のボタンをクリックしてください。
※実行結果は、別ウィンドウで開きます。実行には時間がかかることがありますのでご注意ください。

[ サンプルプログラムの解説 ]
AffineTransformオブジェクトのsetToRotationメソッドを使ってスレッド内で回転処理を行うと図形をくるくる回転させることができます。

最終更新日：2019/02/13

2015-03-01からの訪問者数
　 7012 人