如何基于timestamp实现Plotly动画的实时帧回放？

我用以下代码创建了带动画的Plotly散点图，将animation_frame绑定到数据的timestamp字段（单位毫秒），同时添加了额外散点轨迹：

fig = px.scatter(
    x=list(map(lambda x: x["posX"], data["events"])),
    y=list(map(lambda x: x["posY"], data["events"])),
    range_x=[0, data["width"]],
    range_y=[0, data["height"]],
    animation_frame=list(map(lambda x: x["timestamp"], data["events"]))
)

for movement in data["events"]:
    fig.add_trace(
        go.Scatter(
            mode="markers",
            x=[movement["posX"]],
            y=[movement["posY"]],
            marker=dict(
                size=1,
                opacity=0.5,
                line=dict(
                    color="LightBlue",
                    width=8
                )
            )
        )
    )

示例数据结构如下：

{
    "events": [
        {"posX": 478, "posY": 454, "timestamp": 16215.800000000745},
        {"posX": 486, "posY": 456, "timestamp": 16229.5},
        {"posX": 529, "posY": 470, "timestamp": 16251.400000002235},
        // 更多事件数据...
    ],
    "destination": {
        "topLeft": [994, 549.5],
        "bottomRight": [1033.71875, 571]
    },
    "width": 1440,
    "height": 728
}

当前我用以下代码设置动画，但只能实现每毫秒播放一帧，无法基于timestamp的实际间隔回放：

fig.layout.updatemenus[0].buttons[0].args[1]['frame']['duration'] = 1
fig.layout.updatemenus[0].buttons[0].args[1]['transition']['duration'] = 1

解决方案 #

Plotly默认动画采用等间隔播放，要实现基于timestamp的不等间隔回放，需为每个动画帧单独设置duration属性，该值对应当前帧到下一帧的实际时间差：

1. 计算帧间时间间隔
   提取所有事件的timestamp，计算相邻事件的时间差，作为对应帧的播放时长：

   timestamps = [event["timestamp"] for event in data["events"]]
   # 计算相邻时间差，最后一帧设为0（或自定义默认值）
   frame_durations = [timestamps[i+1] - timestamps[i] for i in range(len(timestamps)-1)] + [0]
   

2. 为每个动画帧设置duration
   遍历fig.frames，将计算出的时间差赋值给每个帧的duration属性（Plotly要求该值为整数毫秒）：

   for frame, duration in zip(fig.frames, frame_durations):
       frame.duration = int(duration)
   

3. 调整过渡时长（可选）
   将全局过渡时长设为0，避免过渡动画干扰真实时间节奏：

   fig.layout.updatemenus[0].buttons[0].args[1]['transition']['duration'] = 0
   

完整修改后代码片段 #

# 原有创建图表代码...

# 计算帧间时间间隔
timestamps = [event["timestamp"] for event in data["events"]]
frame_durations = [timestamps[i+1] - timestamps[i] for i in range(len(timestamps)-1)] + [0]

# 为每个帧设置duration
for frame, duration in zip(fig.frames, frame_durations):
    frame.duration = int(duration)

# 调整过渡时长
fig.layout.updatemenus[0].buttons[0].args[1]['transition']['duration'] = 0

这样设置后，动画会严格按照timestamp字段记录的实际时间间隔进行回放，还原事件的真实时间节奏。

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