円を画面端で反射して往復させる動きを作ってみよう!

円を画面端で反射して往復させる動きを作ってみよう!

縁が画面端で往復するアニメーションをつくってみる!

前回の記事ではafter()のタイマーを使って円が右に動くアニメーションを作ったよね。このままだとすぐに画面からはみ出て見えなくなっちゃうから、今回は画面端で反射して往復するっていう動きに修正していくよ。

「移動量」の考え方で動きの向きを制御する

前回の書き方では、円を動かすために「x=x+1」となんども繰り返してたよね。これで1pxずつ右に動いたわけだ。

今回は反射させるために移動量を表す変数「dx」を用意する。まず「dx=1」としておいて、「x=x+dx」を繰り返せば前回と同じ動きになるよね。そして、画面の端にきたらdxを「-1」にする。これで向きが反対になるんだね。

実際に書いてみるとこんな感じ。

# codeing=utf-8
import tkinter as tk

#円の座標
x = 300
y = 200
#円の移動量
dx = 1

def move():
    global x,y,dx
    
    #前の円を隠す
    canvas.create_oval(x-30, y-30, x+30, y+30, fill="white", width=0)
    #円を次の位置に
    x = x+dx
    canvas.create_oval(x-20, y-20, x+20, y+20, fill="red", width=0)
    #画面端で移動量をかえる
    if x >= canvas.winfo_width():
        dx = -1
    if x <= 0:
        dx = 1
    #タイマーをつくる
    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()

解説

さっきいった「移動量用の変数をつくる」というのは7,8行目の部分。

#円の移動量
dx = 1

そして実際に向きを変えてるのは18〜22行目だ。

    #画面端で移動量をかえる
    if x >= canvas.winfo_width():
        dx = -1
    if x <= 0:
        dx = 1

canvas.winfo_width()というのは、キャンバスの横幅を取得するためのメソッドなんだ。これをif分岐の条件に入れてるので、「円のx座標が右端以上まできたら」って意味になる。このときに「dx = -1」になって移動の向きが反対になるんだね。

次は円が戻ってきて左端に来た時にまた移動量をもとに戻さないといけない。これが「if x <= 0:」の部分だね。左端は必ずx座標が0だからカンタンに書けるんだ。

今日のまとめ

  • 「移動量」の考え方で動きをコントロールしよう!
  • 「canvas.winfo_width()」でキャンバスの横幅を取得しよう!