如何修复Tkinter逐帧动画切换时残留上一帧画面的问题

解决方案 #

Tkinter为单线程UI模型，所有界面更新操作都必须在主线程执行，延迟调度不能阻塞主线程。最佳实现方案是使用Tkinter内置的after()方法，该方法可以在指定毫秒数后向主线程事件队列插入执行任务，既不会阻塞UI，也支持主动取消待执行的任务，完美解决动画切换时的帧残留问题。

关键修改点 #

• 新增全局变量pending_task存储待执行的延迟任务ID，每次切换动画前先取消所有未执行的旧任务
• 替换所有threading.Timer调用为after()调用
• 修正全局变量x的初始值错误（原代码x = int是类型赋值，未设置初始值）
• 调整动画调度逻辑，避免同时存在多个动画的待执行帧任务

修改后完整代码 #

from tkinter import *
import tkinter as tk
import os

# 变量定义
x = 1  # 初始默认播放第一个动画
pending_task = None  # 存储待执行的after任务ID，用于切换时取消

# 函数定义
def start():
    anim1_1_L.place(x=0, y=0)
    anim1_1_B.place(x=100, y=0)
    anim2_1_B.place(x=100, y=30)
    anim1_1_B.config(text="taco", command=taco)
    anim2_1_B.config(text="tree", command=tree)
    main()

def clear_pending_task():
    global pending_task
    if pending_task is not None:
        window.after_cancel(pending_task)
        pending_task = None

def main():
    clear_pending_task()
    if x == 1:
        animation_1()
    else:
        animation_2()

def animation_1():
    global pending_task
    # 逐帧调度
    pending_task = window.after(0, animation_1_S2)
    pending_task = window.after(500, animation_1_S1)
    pending_task = window.after(1000, animation_1_S2)
    pending_task = window.after(1500, animation_1_S1)
    pending_task = window.after(2000, main)

def animation_2():
    global pending_task
    pending_task = window.after(0, animation_2_S1)
    pending_task = window.after(500, animation_2_S2)
    pending_task = window.after(1000, animation_2_S3)
    pending_task = window.after(1500, animation_2_S4)
    pending_task = window.after(2000, animation_2_S5)
    pending_task = window.after(2500, animation_2_S6)
    pending_task = window.after(3000, animation_2_S7)
    pending_task = window.after(3500, main)

def taco():
    global x
    x = 1
    main()

def tree():
    global x
    x = 2
    main()

# 动画1帧切换函数
def animation_1_S1():
    anim1_1_L.config(image=anim1_1)

def animation_1_S2():
    anim1_1_L.config(image=anim1_2)

# 动画2帧切换函数
def animation_2_S1():
    anim1_1_L.config(image=tr_1)

def animation_2_S2():
    anim1_1_L.config(image=tr_2)

def animation_2_S3():
    anim1_1_L.config(image=tr_3)

def animation_2_S4():
    anim1_1_L.config(image=tr_4)

def animation_2_S5():
    anim1_1_L.config(image=tr_5)

def animation_2_S6():
    anim1_1_L.config(image=tr_6)

def animation_2_S7():
    anim1_1_L.config(image=tr_7)

# 打印文件路径
print(os.path.dirname(os.path.realpath(__file__)))

# 窗口初始化
window = tk.Tk()
window.geometry("796x448")
window.resizable(0,0)

# 加载图片资源
anim1_1 = tk.PhotoImage(file="image/1.png")
anim1_2 = tk.PhotoImage(file="image/2.png")
tr_1 = tk.PhotoImage(file="image/tree1.gif")
tr_2 = tk.PhotoImage(file="image/tree2.gif")
tr_3 = tk.PhotoImage(file="image/tree3.gif")
tr_4 = tk.PhotoImage(file="image/tree4.gif")
tr_5 = tk.PhotoImage(file="image/tree5.gif")
tr_6 = tk.PhotoImage(file="image/tree6.gif")
tr_7 = tk.PhotoImage(file="image/tree7.gif")

# 控件初始化
anim1_1_L = tk.Label(window, image=anim1_1, width=100, height=100)
anim1_1_B = tk.Button(window, font=("Calbri", 10))
anim2_1_B = tk.Button(window, font=("Calbri", 10))

# 启动主循环
start()
window.mainloop()

内容的提问来源于stack exchange，提问作者Yanbunny