Plotly Surface 3D动画异常咨询：帧更新延迟与多帧残留

问题原因及修复方案 #

• 播放从第二帧开始：原代码循环中给fig添加了所有帧的trace，初始状态就包含所有表面，动画启动时会从当前（最后添加的trace）开始播放。只需初始添加第一帧的trace，后续帧仅存入frames列表即可。
• 显示所有过往帧：原代码每帧都创建新的Surface对象并添加到fig，导致旧帧的表面不会被移除。修改为每帧更新现有trace的z数据，而非创建新trace，确保每次只显示当前帧的表面。

修改后的完整代码 #

import plotly.graph_objects as go
import numpy as np

data = np.random.rand(10, 10, 10)
fr = np.arange(10)

layout = go.Layout(
    paper_bgcolor='rgba(0,0,0,0)',
    plot_bgcolor='rgba(0,0,0,0)'
)

fig = go.Figure(layout=layout)

frames = []

# 初始化第一帧的trace
z_initial = data[0]
sh_0, sh_1 = z_initial.shape
x, y = np.linspace(0, 1, sh_0), np.linspace(0, 1, sh_1)
initial_trace = go.Surface(
    z=z_initial,
    x=x,
    y=y,
    opacity=1,
    colorscale="Viridis",
    colorbar=dict(title="Counts"),
    cmin=0,
    cmax=1
)
fig.add_trace(initial_trace)

# 生成后续帧
for i in range(len(data)):
    z = data[i]
    # 帧中只更新现有trace的z数据，不创建新trace
    frame = go.Frame(
        data=[go.Surface(z=z)],
        layout=go.Layout(title=f"Frame: {fr[i]}")
    )
    frames.append(frame)

fig.frames = frames

fig.update_layout(
    autosize=False,
    width=800,
    height=800,
    margin=dict(l=65, r=50, b=65, t=90)
)

zoom = 1.35

fig.update_layout(
    scene={
        "xaxis": {"nticks": 20},
        "zaxis": {"nticks": 4},
        "camera_eye": {"x": 0.1, "y": 0.4, "z": 0.25},
        "aspectratio": {"x": 0.4 * zoom, "y": 0.4 * zoom, "z": 0.25 * zoom}
    }
)

fig.update_layout(
    updatemenus=[
        dict(
            type='buttons',
            buttons=[
                dict(
                    label='Play',
                    method='animate',
                    args=[None, {
                        'frame': {'duration': 500, 'redraw': True},
                        'fromcurrent': False,  # 改为从第一帧开始播放
                        'transition': {'duration': 0}
                    }]
                )
            ]
        )
    ]
)

fig.show()

关键修改点 #

• 仅初始化添加第一帧的trace，后续帧不再调用fig.add_trace()，避免初始状态加载所有表面。
• 帧数据改为直接更新现有Surface的z值，而非创建新的Surface对象，确保每次只显示当前帧。
• 将updatemenus中的fromcurrent设为False，确保播放从第一帧开始。

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