円が動くアニメーションをつくるよ!after()でタイマーを作ろう!

円が動くアニメーションをつくるよ!after()でタイマーを作ろう!

円をアニメーションさせてみよう!

今回は円が右に動いていくという単純なアニメーションをつくるよ。アニメーションさせるには以下のような方法を使うよ。

  1. 円を描く
  2. 円を消す
  3. 新しい円を少しだけ右に描く

1〜3を一定間隔で繰り返して連続でみせる。

これを素早く繰り返せば円が右に動くように見えるんだ。そして1~3は前回の記事と似たようなことをやってるよね。だから前回の応用で作っていくよ。

after()で一定時間ごとに繰り返し実行する!

今回重要なのは「一定間隔で繰り返す」ってこと。こういう機能のことを「タイマー」と言うから覚えておこう。タイマーはtkinterの「after()」で作れるよ。使い方は、まずtkinterのオブジェクトを作る。

root = tk.TK()

rootというのは自分で決めた変数名だからなんでもOK。次にafter()を書く。これでOKだ。

root.after(①時間間隔,②関数名)

①は数字でいれる。注意なのはミリ秒単位で入れること。ミリ秒っていうのは1秒の1/1000のこと。だから1秒ごとに動かしたいなら「1000」と入れればいいんだね。②は実行したい関数名だ。例えば、「1秒ごとにmove()を実行」したいならこんな書きかたになるんだ。

root = tk.TK()
root.after(1000,move)

実際に円をアニメーションさせてみよう!

それじゃあ実際にプログラムを書いてみるよ。

# codeing=utf-8
import tkinter as tk

#円の座標
x = 300
y = 200

def move():
    global x,y
    #前の円を隠す
    canvas.create_oval(x-30, y-30, x+30, y+30, fill="white", width=0)
    #右に動かす
    x = x+1
    #新しい円を描く
    canvas.create_oval(x-20, y-20, x+20, y+20, fill="red", width=0)
    #タイマーを作る
    root.after(10,move)

#ウィンドウを作る
root = tk.Tk()
root.geometry("600x400")
 
#Canvasを作る
canvas = tk.Canvas(root, width=600, height=400, bg="white")
canvas.place(x=0, y=0)

#タイマーを作る
root.after(10,move)


root.mainloop()

実行してみると、まずウィンドウの真ん中に赤い円が現れて、それがゆっくりと右に移動していくよ!

解説

最初のポイントは27,28行目。

#タイマーを作る
root.after(10,move)

ここでmove()を10ミリ秒で動かしてる。10/1000秒だから0.01秒に一回って感じだね。

次のポイントは8〜17行目。実際に動かす命令はこのmove()の中に書いてるんだ。

def move():
    global x,y
    #前の円を隠す
    canvas.create_oval(x-30, y-30, x+30, y+30, fill="white", width=0)
    #右に動かす
    x = x+1
    #新しい円を描く
    canvas.create_oval(x-20, y-20, x+20, y+20, fill="red", width=0)
    #タイマーを作る
    root.after(10,move)

やっていることは前回とほとんど同じで、前の円を隠して次の円を出すって感じだ。次の円は13行目の「x = x+1」で右の1pxだけズラしてる。これを何回も続けることで0.01秒に1pxずつ右に動いていくんだね。

そして次の注目ポイントは17行目。root.after(10,move)で呼び出したmove()の中に、さらにroot.after(10,move)が書いてあるんだ、これによって10ミリ秒ごとに自分で自分を呼び出すって命令をすることになって、連続して右に動き続けるんだね。

今日のまとめ

  • tkinterの「after()」の使い方を覚えよう!
  • after()の関数にafter()を入れて繰り返し続ける書きかたを覚えよう!