[Request] Animation button: from only 'play' to 'play'/'pause'

[jaapwalhout]

Currently when you press 'play' in a plotly animation, you can't stop the animation. It would be nice to have a 'play' / 'pause' button (just like you when playing / pausing a video & thus including the accompanying play/pause icons). In that way people have more possibilities to interact with the animation.

In line with #1205 animation_button could look like:

# option 1 with labels
animation_button(label_play = "Go!", label_pause = "Stop!")

# option 2 with icons
animation_button(label_play = icon_play, label_pause = icon_pause)

# option 3 with icons (different parameters)
animation_button(icon = TRUE)

[cpsievert]

Ohh, this new plotly.js feature will make it a lot easier to make toggle buttons plotly/plotly.js#4305

[XiangyunHuang]

@cpsievert For now, Taking below demo as an example, any solution to add pause toggle buttons?

library(plotly)
library(gapminder)

plot_ly(
  data = gapminder,
  x = ~gdpPercap,
  y = ~lifeExp,
  size = ~pop,
  fill = ~"",
  color = ~continent,
  frame = ~year,
  text = ~ paste0(
    "年份：", year, "<br>",
    "国家：", country, "<br>",
    "人口总数：", round(pop / 10^6, 2), "百万", "<br>",
    "人均 GDP：", round(gdpPercap), "美元", "<br>",
    "预期寿命：", round(lifeExp), "岁"
  ),
  hoverinfo = "text",
  type = "scatter",
  mode = "markers",
  marker = list(
    symbol = "circle",
    sizemode = "diameter",
    line = list(width = 2, color = "#FFFFFF"),
    opacity = 0.8
  )
) %>%
  layout(
    xaxis = list(
      type = "log", title = "人均 GDP（美元）"
    ),
    yaxis = list(title = "预期寿命（年）"),
    legend = list(title = list(text = "<b> 大洲 </b>"))
  ) %>%
  animation_opts(
    frame = 1000, easing = "linear", redraw = FALSE,
    transition = 1000, mode = "immediate"
  ) %>%
  animation_slider(
    currentvalue = list(
      prefix = "年份 ", xanchor = "right",
      font = list(color = "red", size = 20)
    )
  ) %>%
  animation_button(
    # 按钮位置
    x = 0, xanchor = "right",
    y = -0.2, yanchor = "bottom",
    label = "播放", # 按钮文本
    visible = TRUE # 显示播放按钮
  ) %>%
  config(
    displayModeBar = FALSE
  )

[JWilson2021]

@cpsievert Any chance you could add an example of how the pause button would work? I have a toy time series animation below, would love to see how it works so that I can apply it to my actual work...

library(dplyr)
library(plotly)

df <- expand.grid(x = seq(-50, -20, 10), y = seq(26, 38, 2), Date = seq(as.Date("2000-01-01"), as.Date("2000-02-25"), by = "1 day")) %>%
      mutate(x = rnorm(n(), x, 1),
             Date = as.factor(Date))

plot_ly(data = df, x = ~x, y = ~y, frame = ~Date, type = "scatter", color = I("red"))

EDIT

I played around with it for a bit, after coming across this page. I now have a working pause button that I can reposition at will. However, its position relative to the Play button will change depending on the size of the browser window, which isn't ideal... Any thoughts on how to anchor the two buttons together? Or, alternatively, use plotly_buttonclicked and onRender to use the original Play button as a Play/Pause?

library(dplyr)
library(plotly)

df <- expand.grid(x = seq(-50, -20, 10), y = seq(26, 38, 2), Date = seq(as.Date("2000-01-01"), as.Date("2000-02-25"), by = "1 day")) %>%
      mutate(x = rnorm(n(), x, 1),
             Date = as.factor(Date))

p <- plot_ly(data = df, x = ~x, y = ~y, frame = ~Date, type = "scatter", color = I("red"))
p %>% layout(
   updatemenus = list(
    list(type = "buttons", x = -0.078, y = -0.18, xanchor='left', yanchor='bottom',
      buttons = list(
        list(method = "animate",
             args = list(NULL, list(fromcurrent = TRUE, mode = "immediate")), 
             label = "Pause"))))) %>%
  animation_button(label = "Play", pad = list(t = 42, r = 13))