如何用Python实现类似CSS/JS效果的卡片翻转动画？

依赖安装 #

先安装所需库：

pip install pygame Pillow

实现代码 #

import pygame
from PIL import Image

# 初始化Pygame
pygame.init()

# 配置参数
CARD_WIDTH = 500
CARD_HEIGHT = 300
SCREEN_WIDTH, SCREEN_HEIGHT = 800, 600
ANIMATION_DURATION = 1000  # 翻转总时长（毫秒）

# 创建窗口
screen = pygame.display.set_mode((SCREEN_WIDTH, SCREEN_HEIGHT))
pygame.display.set_caption("卡片翻转")

# 加载并处理卡片图片（替换为你的图片路径）
front_img = Image.open("front.jpg").resize((CARD_WIDTH, CARD_HEIGHT))
back_img = Image.open("back.jpg").resize((CARD_WIDTH, CARD_HEIGHT))

# 转换为Pygame Surface
front_surf = pygame.image.fromstring(front_img.tobytes(), front_img.size, front_img.mode)
back_surf = pygame.image.fromstring(back_img.tobytes(), back_img.size, back_img.mode)

def get_perspective_vertices(progress):
    """根据翻转进度计算透视变形后的卡片顶点"""
    center_x, center_y = SCREEN_WIDTH // 2, SCREEN_HEIGHT // 2
    # 计算宽度收缩比例，模拟透视效果
    shrink_ratio = abs(progress - 0.5) * 2
    current_width = CARD_WIDTH * (1 - shrink_ratio * 0.8)
    
    return [
        (center_x - current_width//2, center_y - CARD_HEIGHT//2),
        (center_x + current_width//2, center_y - CARD_HEIGHT//2),
        (center_x + current_width//2, center_y + CARD_HEIGHT//2),
        (center_x - current_width//2, center_y + CARD_HEIGHT//2)
    ]

def draw_perspective_card(surf, vertices):
    """绘制经过透视变换的卡片"""
    orig_points = [(0, 0), (CARD_WIDTH, 0), (CARD_WIDTH, CARD_HEIGHT), (0, CARD_HEIGHT)]
    transform_matrix = pygame.math.Matrix44.new_perspective_transform(orig_points, vertices)
    transformed_surf = pygame.transform.matrix_transform(surf, transform_matrix)
    screen.blit(transformed_surf, (0, 0))

# 动画主循环
clock = pygame.time.Clock()
start_time = pygame.time.get_ticks()
running = True
flip_finished = False

while running:
    screen.fill((240, 240, 240))  # 浅灰背景

    # 处理退出事件
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False

    if not flip_finished:
        elapsed_time = pygame.time.get_ticks() - start_time
        progress = min(elapsed_time / ANIMATION_DURATION, 1.0)
        vertices = get_perspective_vertices(progress)

        # 前半段显示正面，后半段显示翻转后的背面
        if progress < 0.5:
            draw_perspective_card(front_surf, vertices)
        else:
            # 背面需要水平翻转，避免镜像
            flipped_back = pygame.transform.flip(back_surf, True, False)
            draw_perspective_card(flipped_back, vertices)

        if progress >= 1.0:
            flip_finished = True
    else:
        # 翻转完成后固定显示背面
        screen.blit(back_surf, (SCREEN_WIDTH//2 - CARD_WIDTH//2, SCREEN_HEIGHT//2 - CARD_HEIGHT//2))

    pygame.display.flip()
    clock.tick(60)

pygame.quit()

关键说明 #

• 利用Pygame的透视变换矩阵模拟卡片翻转时的宽度收缩，还原真实的3D视觉效果
• 翻转进度0_{0.5阶段渲染正面，0.5}1阶段渲染水平翻转后的背面（解决翻转后镜像问题）
• 可通过调整ANIMATION_DURATION修改翻转速度，调整shrink_ratio * 0.8中的系数控制收缩幅度

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