Hey there! Let's fix that jarring image switch in your Tkinter slideshow. The main issues with your current code are using time.sleep() (which freezes the UI) and recreating canvases every time you switch images—both make transitions feel abrupt. Here's how to implement smooth, responsive transitions:

Key Improvements to Make #

• Swap time.sleep() for Tkinter's after() method (it schedules actions without blocking the main loop)
• Reuse existing canvases instead of creating new ones (cuts down on flicker)
• Add a fade-in/fade-out effect using PIL to adjust image opacity
• Keep proper references to images to avoid them disappearing due to garbage collection

Modified Code with Smooth Fade Transitions #

from tkinter import *
from PIL import Image, ImageTk
import os

# Global variables (adjust these as needed for your setup)
scr_w = 1920
scr_h = 1080
timeSleep = StringVar(value="2")
footerPath = StringVar(value="path/to/your/footer.jpg")
portDirEntry = StringVar(value="path/to/portrait/images")
colorEntry = StringVar(value="black")
numOfImagesPort = 0
numOfImagesLand = 0

def cal_per_num(percent, total):
    return (percent / 100) * total

def getPaths(directory):
    # Replace with your actual path filtering logic
    port_paths = [os.path.join(directory, f) for f in os.listdir(directory) 
                  if f.lower().endswith(('.png', '.jpg', '.jpeg'))]
    land_paths = port_paths  # Swap with your landscape image path logic
    return (port_paths, land_paths)

def get_img_fit_size(path, target_height, target_width, rotate):
    img = Image.open(path)
    if rotate:
        img = img.transpose(Image.ROTATE_270)
    # Calculate aspect ratio to fit without distortion
    img_ratio = img.width / img.height
    target_ratio = target_width / target_height
    if img_ratio > target_ratio:
        new_width = target_width
        new_height = int(target_width / img_ratio)
    else:
        new_height = target_height
        new_width = int(target_height * img_ratio)
    return ImageTk.PhotoImage(img.resize((new_width, new_height), Image.Resampling.LANCZOS))

def fade_transition(canvas, old_img_id, new_img, step=0, max_steps=20):
    """Gradually fade out old image and fade in new image"""
    alpha = step / max_steps
    # Create semi-transparent version of new image
    new_img_pil = ImageTk.getimage(new_img).convert("RGBA")
    new_img_pil.putalpha(int(255 * alpha))
    new_img_tk = ImageTk.PhotoImage(new_img_pil)
    
    # Update canvas with new semi-transparent image
    new_img_id = canvas.create_image(canvas.winfo_width()/2, canvas.winfo_height()/2, 
                                     anchor=CENTER, image=new_img_tk)
    canvas.image = new_img_tk  # Preserve reference to avoid garbage collection
    
    # Clean up old image when transition is complete
    if step == max_steps:
        canvas.delete(old_img_id)
        return
    # Schedule next transition step
    canvas.after(30, fade_transition, canvas, old_img_id, new_img, step+1, max_steps)

def switch_portrait():
    global numOfImagesPort, pathsPrt, canvasPort, port_img_id
    # Cycle to next portrait image
    numOfImagesPort = (numOfImagesPort + 1) % len(pathsPrt)
    new_img = get_img_fit_size(pathsPrt[numOfImagesPort], scr_h, 
                               cal_per_num(42, scr_w), True)
    # Start fade transition
    fade_transition(canvasPort, port_img_id, new_img)
    port_img_id = canvasPort.find_all()[-1]
    # Schedule next switch
    window.after(int(timeSleep.get())*1000, switch_portrait)

def switch_landscape():
    global numOfImagesLand, pathsLand, canvasLand, land_img_id
    # Cycle to next landscape image
    numOfImagesLand = (numOfImagesLand + 1) % len(pathsLand)
    new_img = get_img_fit_size(pathsLand[numOfImagesLand], scr_h, 
                               cal_per_num(50, scr_w), True)
    # Start fade transition
    fade_transition(canvasLand, land_img_id, new_img)
    land_img_id = canvasLand.find_all()[-1]
    # Schedule next switch
    window.after(int(timeSleep.get())*1000, switch_landscape)

def Multi_view_rotate():
    global window, canvasFoot, canvasPort, canvasLand, pathsPrt, pathsLand
    global port_img_id, land_img_id
    
    window = Tk()
    window.geometry(f"{scr_w}x{scr_h}+0+0")
    bgcolor = colorEntry.get()
    allPaths = getPaths(portDirEntry.get())
    pathsPrt, pathsLand = allPaths
    
    # Footer Canvas Setup
    per_w_footer = cal_per_num(8, scr_w)
    canvasFoot = Canvas(window, width=per_w_footer, height=scr_h, 
                        bg=bgcolor, highlightthickness=1, highlightbackground=bgcolor)
    canvasFoot.grid(row=0, column=0)
    footer_img = Image.open(footerPath.get()).transpose(Image.ROTATE_270)
    footer_img = footer_img.resize((int(per_w_footer), int(scr_h)), Image.Resampling.LANCZOS)
    footer_tk = ImageTk.PhotoImage(footer_img)
    canvasFoot.create_image(per_w_footer/2, scr_h/2, anchor=CENTER, image=footer_tk)
    canvasFoot.image = footer_tk
    
    # Portrait Canvas Setup
    per_w_port = cal_per_num(42, scr_w)
    canvasPort = Canvas(window, width=per_w_port, height=scr_h, 
                        bg=bgcolor, highlightthickness=10, highlightbackground=bgcolor)
    canvasPort.grid(row=0, column=1)
    initial_port = get_img_fit_size(pathsPrt[0], scr_h, per_w_port, True)
    port_img_id = canvasPort.create_image(canvasPort.winfo_width()/2, canvasPort.winfo_height()/2, 
                                          anchor=CENTER, image=initial_port)
    canvasPort.image = initial_port
    
    # Landscape Canvas Setup
    per_w_land = cal_per_num(50, scr_w)
    canvasLand = Canvas(window, width=per_w_land, height=scr_h, 
                        bg=bgcolor, highlightthickness=10, highlightbackground=bgcolor)
    canvasLand.grid(row=0, column=2)
    initial_land = get_img_fit_size(pathsLand[0], scr_h, per_w_land, True)
    land_img_id = canvasLand.create_image(canvasLand.winfo_width()/2, canvasLand.winfo_height()/2, 
                                          anchor=CENTER, image=initial_land)
    canvasLand.image = initial_land
    
    # Start automatic transitions
    window.after(int(timeSleep.get())*1000, switch_portrait)
    window.after(int(timeSleep.get())*1000, switch_landscape)
    
    window.mainloop()

if __name__ == "__main__":
    Multi_view_rotate()

What's Different? #

1. No More time.sleep(): We use after() to schedule image switches, keeping the UI responsive at all times.
2. Reusable Canvases: We create each canvas once and just update the images inside them, eliminating flicker from widget creation.
3. Fade Effect: The fade_transition() function gradually increases the opacity of the new image while fading out the old one, using PIL to adjust the alpha channel.
4. Image Reference Management: We store PhotoImage references directly on the canvas widgets to prevent them from being deleted by Python's garbage collector.

Want a Different Transition? #

If fade isn't your style, you can modify the transition function to do slide effects instead:

• Slide new images in from the left/right by adjusting their x position over steps
• Slide old images out while new ones slide in for a "push" effect

内容的提问来源于stack exchange，提问作者Mohammed S. Hazim