カーソルを動かしたときに徐々に背景の色が変化する方法

Question

カーソルを動かしたときに徐々に背景の色を変化させるプログラムを作成したいです。
X座標が100未満の時に背景を黒色に、100以上200未満の場合にグレー、200以上の時に黒に戻すものはできました。
これを一瞬で色を変化させるのではなくgray0からだんだんとgray40に変化し、gray0に徐々に戻っていくプログラムができません。
きっとfor文を使うんだろうなというのはわかるのですが、使い方を調べてみてもわからなかったです。
どなたか教えてもらえたら幸いです。

Pythonコード:

import tkinter
import tkinter.ttk

class Application(tkinter.Frame):
def init(self, master=None):
super().init(master)
self.master = master
self.master.title('tkinter canvas trial')
self.pack()
self.create_widgets()

def create_widgets(self):        
    self.current_x = tkinter.StringVar()
    self.current_y = tkinter.StringVar()
    self.test_canvas = tkinter.Canvas(self, bg='gray0', width=300, height=300, highlightthickness=0)
    self.test_canvas.grid(row=0, column=0, rowspan=7)
    self.test_canvas.bind('<B1-Motion>', self.pickup_position)

def pickup_position(self, event):
    if event.x<100:
        for i in range(0,100):           
            event.x+=i
            self.test_canvas['bg']='gray40'
    elif 100<event.x<200:
        self.test_canvas['bg']='gray0'
    elif event.x>200:
        self.test_canvas['bg']='gray40'

root = tkinter.Tk()
app = Application(master=root)
app.mainloop()

Answer 1

きっとfor文を使うんだろうなというのはわかるのですが、使い方を調べてみてもわからなかったです。

GUI等のイベント駆動型プログラミングでは、イベントループが稼働して
イベントや描画等の処理を常に行っています。

ユーザ定義のイベントは、その合間に呼び出される形式になっていて
処理は直ぐにイベントループ側に戻さないと、ウィンドウが応答なしとなってしまいます。
原則、他の時間の掛かるループを使えません。
(使う方法はありますが工夫が必要です）

GUIでのアニメーション処理には、
GUIライブラリの提供するタイマーを用いるのが一般的な解決策です。

追記: 以下サンプルコードはタイマーの利用を説明したものなので、
「カーソルを動かしたとき」ではなく、「ボタンをクリック」した時になってます。
適宜読み替えて下さい。

タイマーの始動となる部分を、Motionイベント内のカーソルが任意の場所に来た時とします。

補足: 注意点は、タイマーが稼働してるときに他の色に変更するタイマーを重ねる場合の対応。
after() の戻り値を保存し、after_cancel() に渡す事で、タイマーの中断が可能です。

---

期待通りに動かないコード for文利用

import tkinter as tk
import time

root = tk.Tk()
label = tk.Label(root, text="TEST")
label.pack(fill=tk.BOTH, expand=tk.YES)
def onClick():
    for num in range(16):
        # 色変更 黒000000 → 白FFFFFF
        color = "#" + (f"{num:x}" * 6)
        label.config(bg=color)

        time.sleep(0.2) # XXX: この間 GUI は応答なしになる

    # XXX: 色変更が反映されるのは、関数を抜けた後

button = tk.Button(root, text="Click", command=onClick)
button.pack()
root.mainloop()

---

タイマーを使った解決策(推奨

def onClick():
    def _update(num):
        color = "#" + (f"{num:x}" * 6)
        label.config(bg=color)

        if num < 16:
            root.after(200, _update, num+1)

    root.after_idle(_update, 0)

タイマー機能を提供するafter関数は、
○○ミリ秒後に指定の関数を呼び出しという形式なので、
ループ文の記述を再帰で書き換える必要があります。

実際の実行時の呼出は再帰呼出ではありません。

追記: タイマーを使った解決策2 (案のみ

def change_bg(color):
    canvas['bg'] = color

# タイマーを時差で発動させることでアニメーションを表現

root.after(200*1, change_bg, "#000000")
root.after(200*2, change_bg, "#111111")
root.after(200*3, change_bg, "#222222")
root.after(200*4, change_bg, "#333333")

# for文を使って一度にタイマーを登録する

for idx, num in enumerate(range(16), start=1):
    color = "#" + (f"{num:x}" * 6)
    root.after(200*idx, change_bg, color)

デメリットはあって、ループ数が多い場合は効率的ではありません。

---

推奨しない解決策: ループ内 .update() で強制的に描画を反映できますが…

イベントループがネストするので、稀ですが
for 文実行中に他のイベントが発生する場合、
イベント実行順序が意図通りに制御できなくなる、
潜在的な問題があります。

import tkinter as tk
import time

root = tk.Tk()
label = tk.Label(root, text="TEST")
label.pack(fill=tk.BOTH, expand=tk.YES)
def onClick():
    # XXX: ループ文が実行中にウィンドウが閉じられた場合、エラー
    for num in range(16):
        color = "#" + (f"{num:x}" * 6)
        label.config(bg=color)

        root.update()  # XXX: ここで色反映を出来るが、この中で他のイベントが呼び出される可能性

        time.sleep(0.2) # XXX: ウィンドウが応答なしになる
button = tk.Button(root, text="Click", command=onClick)
button.pack()
root.mainloop()
    

---

ジェネレーターを使った解決策(外部ライブラリ利用

for 文で記述でき、タイマーを使う実装。
アニメーションのロジックが複雑になる場合検討して見て下さい。
途中の中断にも対応可能です。

# 要外部ライブラリ: pip install gentimer

import tkinter as tk
import gentimer

root = tk.Tk()
label = tk.Label(root, text="TEST")
label.pack(fill=tk.BOTH, expand=tk.YES)

def onClick():
    def _update():
        for num in range(16):
            color = "#" + (f"{num:x}" * 6)
            label.config(bg=color)


            # time.sleep/root.updateの代わり。タイマーで指定秒後に復帰する。
            # 前述したような time.sleep/root.update の問題は起こらない。
            yield 0.2

    gentimer.tk(root, _update())

button = tk.Button(root, text="Click", command=onClick)
button.pack()
root.mainloop()

Comments

[shibububu1117]

timeを使わないといけなかったんですね。とても参考になりました！

[teamikl]

time.sleep を使う方法は期待通りに動作しない例で、
time.sleep の間はウィンドウは操作を受け付けません。
GUIの提供するタイマー機能 (tkinter の場合は after 関数) を使う方法が推奨です。