如何用Python+Plotly实现动画中移动方块途经背景色块变色？

我来帮你搞定这个“画笔式”的方块动画效果！核心思路是每帧跟踪方块走过的位置，动态更新背景色块的颜色——因为Plotly的动画是通过帧来切换内容的，所以我们需要在每个动画帧里重新绘制背景，把已经经过的色块标记成目标颜色。

实现步骤拆解 #

1. 初始化背景网格：用go.Rect创建固定大小的色块网格，初始统一为浅灰色。
2. 跟踪方块路径：维护一个集合记录方块已经经过的色块位置。
3. 生成动画帧：每帧中，更新背景色块的颜色（已走过的色块改成目标色），同时绘制当前位置的方块。
4. 配置布局与播放控件：和你原代码的布局保持一致，确保动画正常播放。

完整代码示例 #

import plotly.graph_objects as go

# ---------------------- 1. 定义基础参数 ----------------------
# 网格范围（和你原代码的坐标轴范围一致）
x_min, x_max = 1, 8
y_min, y_max = 1, 9
# 每个色块的大小（1x1，和你的方块尺寸匹配）
tile_size = 1

# 生成所有背景色块的初始位置
tiles = []
for x in range(x_min, x_max):
    for y in range(y_min, y_max):
        tiles.append({
            "x0": x, "x1": x + tile_size,
            "y0": y, "y1": y + tile_size,
            "color": "#f0f0f0"  # 初始浅灰色
        })

# ---------------------- 2. 定义方块的移动路径 ----------------------
# 这里模拟一个示例路径，你可以替换成自己的frames里的方块位置
# 每个元素是方块的左下角坐标(x, y)，对应色块位置
square_path = [
    (1,7), (2,7), (2,8), (3,8), (3,7), (4,7),
    (4,8), (5,8), (5,7), (6,7), (6,8), (7,8)
]

# ---------------------- 3. 生成动画帧 ----------------------
frames = []
visited_tiles = set()  # 记录已经经过的色块位置

for idx, (x, y) in enumerate(square_path):
    # 标记当前色块为已访问
    visited_tiles.add((x, y))
    
    # 更新背景色块颜色：已访问的改成浅蓝色，未访问的保持浅灰
    updated_tiles = []
    for tile in tiles:
        tile_x = tile["x0"]
        tile_y = tile["y0"]
        if (tile_x, tile_y) in visited_tiles:
            updated_tiles.append(go.Rect(
                x0=tile["x0"], x1=tile["x1"],
                y0=tile["y0"], y1=tile["y1"],
                fillcolor="#add8e6",  # 已走过的色块颜色
                line=dict(color="white", width=0.5)  # 色块边框
            ))
        else:
            updated_tiles.append(go.Rect(
                x0=tile["x0"], x1=tile["x1"],
                y0=tile["y0"], y1=tile["y1"],
                fillcolor="#f0f0f0",
                line=dict(color="white", width=0.5)
            ))
    
    # 绘制当前位置的方块（和你原代码的方块样式一致）
    square = go.Scatter(
        x=[x, x, x+tile_size, x+tile_size, x],
        y=[y, y+tile_size, y+tile_size, y, y],
        mode="lines",
        line=dict(color="red", width=2)
    )
    
    # 添加当前帧：包含更新后的背景和当前方块
    frames.append(go.Frame(data=updated_tiles + [square]))

# ---------------------- 4. 创建最终图表 ----------------------
# 初始帧：显示所有浅灰色背景+第一个位置的方块
initial_square = go.Scatter(
    x=[square_path[0][0], square_path[0][0], square_path[0][0]+tile_size, square_path[0][0]+tile_size, square_path[0][0]],
    y=[square_path[0][1], square_path[0][1]+tile_size, square_path[0][1]+tile_size, square_path[0][1], square_path[0][1]],
    mode="lines",
    line=dict(color="red", width=2)
)
initial_tiles = [go.Rect(
    x0=tile["x0"], x1=tile["x1"],
    y0=tile["y0"], y1=tile["y1"],
    fillcolor="#f0f0f0",
    line=dict(color="white", width=0.5)
) for tile in tiles]

fig = go.Figure(
    data=initial_tiles + [initial_square],
    layout=go.Layout(
        xaxis=dict(range=[x_min, x_max+tile_size], autorange=False),
        yaxis=dict(range=[y_min, y_max+tile_size], autorange=False),
        title="方块画笔动画",
        updatemenus=[dict(
            type="buttons",
            buttons=[
                dict(label="Play", method="animate", args=[None]),
                dict(label="Pause", method="animate", args=[[None], {
                    "frame": {"duration": 0, "redraw": False},
                    "mode": "immediate",
                    "transition": {"duration": 0}
                }])
            ]
        )],
        # 关闭坐标轴刻度，让背景更像色块网格
        xaxis_showticklabels=False,
        yaxis_showticklabels=False
    ),
    frames=frames
)

# 播放动画（或者用fig.show()在浏览器中打开）
fig.show()

关键细节说明 #

• 背景色块用go.Rect实现：每个矩形对应一个1x1的色块，通过fillcolor控制颜色，line设置边框让网格更清晰。
• visited_tiles集合：用来记录方块已经走过的色块位置，避免重复修改颜色，确保每个色块只变色一次。
• 帧的data结构：每帧的data包含所有背景色块（更新颜色后）和当前位置的方块，这样每帧切换时会完整刷新背景和方块。
• 适配你的原有代码：你可以把square_path替换成你自己frames里的方块位置，只需要提取每个方块对应的色块左下角坐标即可。

这样运行后，红色方块移动时，经过的浅灰色色块会变成浅蓝色，完全实现你想要的“画笔”效果！

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