如何用单个Play按钮控制Shiny中两个Plotly图表的动画？

针对你的需求，这里提供两种贴合场景的实现方案：

方案一：用JavaScript触发原生动画控制 #

无需大幅修改现有绘图代码，直接通过自定义按钮同步触发两个Plotly图表的原生播放/暂停逻辑：

完整Shiny应用代码 #

library(shiny)
library(plotly)
library(dplyr)

# 模拟示例数据（可替换为你的真实数据）
df <- expand.grid(year = 2010:2020, state = c("A", "B", "C")) %>%
  mutate(value = rnorm(nrow(.), mean = year - 2010, sd = 1))

df2 <- expand.grid(year = 2010:2020, var = c("X", "Y", "Z")) %>%
  mutate(var2 = rnorm(nrow(.), mean = 5, sd = 1))

ui <- fluidPage(
  # 自定义同步播放/暂停按钮
  actionButton("sync_play", "同步播放/暂停", class = "btn-primary"),
  br(), br(),
  # 并排显示两个图表
  splitLayout(
    plotlyOutput("plot1"),
    plotlyOutput("plot2")
  ),
  # 核心JS逻辑：触发两个图表的原生动画按钮
  tags$script(HTML("
    document.getElementById('sync_play').addEventListener('click', function() {
      // 获取两个图表容器
      const plot1 = document.getElementById('plot1');
      const plot2 = document.getElementById('plot2');
      
      // 触发内置播放/暂停按钮的点击事件
      plot1.querySelector('.plotly-play-button').click();
      plot2.querySelector('.plotly-play-button').click();
    });
  "))
)

server <- function(input, output, session) {
  output$plot1<-renderPlotly({
    res<-df%>%
      plot_ly(
        x=~year,
        y=~value,
        showlegend = TRUE
      )%>%add_lines()
    
    res<-res%>%add_trace(
      x=~year,
      frame=~year,
      y=~value,
      color=~state,
      type = 'scatter',
      mode = 'markers',
      showlegend = FALSE
    ) %>%
      # 统一动画时长，确保同步
      animation_opts(frame = 500, transition = 0, redraw = FALSE)
    
    return(res)
  })
  
  output$plot2<-renderPlotly({
    res2<- df2%>%
      plot_ly(
        x=~var,
        y=~var2,
        frame=~year,
        type = 'bar') %>%
      # 和plot1保持相同动画参数
      animation_opts(frame = 500, transition = 0, redraw = FALSE)
    
    return(res2)
  })
}

shinyApp(ui, server)

关键说明 #

• 统一动画参数：通过animation_opts设置相同的帧时长（这里为500ms），保证两个动画的播放速度一致。
• JS触发原生按钮：Plotly图表内置的播放/暂停按钮类名为plotly-play-button，通过JS找到该元素并触发点击事件，实现同步控制。
• 布局优化：用splitLayout让两个图表并排展示，便于观察同步效果。

方案二：用Shiny响应式变量主动控制帧切换 #

如果需要更精细的动画控制（比如手动指定帧、循环逻辑自定义），可以用响应式变量统一管理当前显示的年份，驱动两个图表同步更新：

核心修改点 #

1. 在服务器端添加响应式变量与定时器：

# 跟踪当前显示的年份
current_year <- reactiveVal(min(df$year))
# 控制动画是否自动播放
auto_play <- reactiveVal(FALSE)

# 监听同步按钮，切换播放状态
observeEvent(input$sync_play, {
  auto_play(!auto_play())
  if(auto_play()) {
    # 定时器自动递增年份
    observe({
      invalidateLater(500)
      if(auto_play()) {
        next_year <- current_year() + 1
        # 到达最后一年后循环回到起始年
        if(next_year > max(df$year)) {
          next_year <- min(df$year)
        }
        current_year(next_year)
      }
    })
  }
})

2. 修改绘图逻辑，根据current_year()指定显示的帧：

# 以plot1为例，plot2做相同修改
output$plot1<-renderPlotly({
  res<-df%>%
    plot_ly(
      x=~year,
      y=~value,
      showlegend = TRUE
    )%>%add_lines()
  
  res<-res%>%add_trace(
    x=~year,
    frame=~year,
    y=~value,
    color=~state,
    type = 'scatter',
    mode = 'markers',
    showlegend = FALSE
  ) %>%
    # 指定当前显示的帧
    animation_slider(currentvalue = list(value = current_year())) %>%
    animation_opts(frame = 500)
  
  return(res)
})

这种方案完全由Shiny控制动画流程，灵活性更高，但需要对Plotly的帧布局做额外调整。

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