如何使用Plotly实现逐帧累积扩展的多线条轨迹动画

问题梳理 #

• 目标：将matplotlib实现的逐帧累积扩展多轨迹动画迁移到plotly，获得更好的交互性能，效果与原matplotlib版本完全一致
• 原效果参考：
  
• 现有代码问题：仅能展示单帧内的线段片段，无法保留已绘制内容、逐帧追加后续轨迹段
• 原有尝试代码：

lines = [[([1, 2], [1, 1]), 
          ([3, 4], [1, 3]), 
          ([8, 7], [4, 3]), 
          ([7, 6], [0, 1])], 
         [([2, 2], [1, 3]), 
          ([4, 3], [3, 3]), 
          ([7, 6], [3, 2]), 
          ([6, 5], [1, 2])], 
         [([2, 1], [3, 3]), 
          ([3, 2], [3, 4]), 
          ([6, 5], [2, 1]), 
          ([5, 6], [2, 3])], 
         [([1, 1], [3, 1]), 
          ([2, 2], [4, 5]), 
          ([5, 4], [1, 0]), 
          ([6, 4], [3, 4])]]

traces=[]
for frame in lines:
    tracesThisFrame = []
    for line in frame:
        tracesThisFrame.append(dict(type='scatter',
                                    x=line[0],
                                    y=line[1]))
    traces.append(tracesThisFrame)

data = traces[0]
frames = []
t = []
for d in traces:
    t = d+t
    frames.append(go.Frame(data=t))

fig = go.Figure(data=data,layout=go.Layout(
                                    xaxis=dict(range=[0, 9], autorange=False),
                                    yaxis=dict(range=[0, 6], autorange=False),
                                    title="Start Title",
                                    updatemenus=[dict(
                                        type="buttons",
                                        buttons=[dict(label="Play",
                                                        method="animate",
                                                        args=[None])])]
    ), frames=frames)

pyo.plot(fig)

错误原因 #

原有代码帧拼接逻辑错误，没有固定每条轨迹的trace索引，帧切换时trace匹配混乱，且没有配置正确的动画过渡参数，导致无法实现内容累积效果。

修复后可运行代码 #

核心逻辑是提前固定trace数量，逐帧在对应trace的坐标数组末尾追加新的线段坐标，保证已绘制内容不会被覆盖：

import plotly.graph_objects as go
import plotly.offline as pyo

# 原始轨迹段数据：结构为[帧序号][轨迹序号] = (x坐标段, y坐标段)
lines = [[([1, 2], [1, 1]), 
          ([3, 4], [1, 3]), 
          ([8, 7], [4, 3]), 
          ([7, 6], [0, 1])], 
         [([2, 2], [1, 3]), 
          ([4, 3], [3, 3]), 
          ([7, 6], [3, 2]), 
          ([6, 5], [1, 2])], 
         [([2, 1], [3, 3]), 
          ([3, 2], [3, 4]), 
          ([6, 5], [2, 1]), 
          ([5, 6], [2, 3])], 
         [([1, 1], [3, 1]), 
          ([2, 2], [4, 5]), 
          ([5, 4], [1, 0]), 
          ([6, 4], [3, 4])]]

trace_count = len(lines[0])
frame_count = len(lines)

# 初始化每条轨迹的坐标列表，加载第一帧的线段
x_data = [list(lines[0][i][0]) for i in range(trace_count)]
y_data = [list(lines[0][i][1]) for i in range(trace_count)]

# 初始画布数据
init_data = [
    go.Scatter(x=x_data[i], y=y_data[i], mode='lines', line=dict(width=2))
    for i in range(trace_count)
]

# 构造动画帧
frames = [go.Frame(data=init_data, name='frame_0')]
for f_idx in range(1, frame_count):
    frame_traces = []
    for t_idx in range(trace_count):
        # 追加当前帧新线段的坐标，跳过和上一段重合的起点避免重复点
        new_x, new_y = lines[f_idx][t_idx]
        x_data[t_idx].extend(new_x[1:])
        y_data[t_idx].extend(new_y[1:])
        frame_traces.append(go.Scatter(x=x_data[t_idx], y=y_data[t_idx]))
    frames.append(go.Frame(data=frame_traces, name=f'frame_{f_idx}'))

# 生成最终图表
fig = go.Figure(
    data=init_data,
    frames=frames,
    layout=go.Layout(
        xaxis=dict(range=[0, 9], autorange=False),
        yaxis=dict(range=[0, 6], autorange=False),
        title="逐帧扩展多轨迹动画",
        updatemenus=[dict(
            type="buttons",
            showactive=False,
            x=1.05,
            y=0,
            xanchor="left",
            buttons=[dict(
                label="Play",
                method="animate",
                args=[None, dict(
                    frame=dict(duration=500, redraw=True),
                    fromcurrent=True,
                    transition=dict(duration=0)
                )]
            )]
        )]
    )
)

pyo.plot(fig)

运行代码后点击Play按钮，即可实现和matplotlib版本完全一致的累积扩展动画效果，所有已绘制的轨迹段都会保留，逐帧追加新的轨迹内容。

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