javascript - 如何在 R 中的 javascript 代码中更改绘图动画速度？

Question

我想改变 R 中的情节动画的速度。但是，动画不是由情节动画提供的默认播放按钮触发的。根据 JS 代码，它是通过单击 Shiny 操作按钮触发的。在这种情况下，animation_opts() 参数似乎没有被考虑在内。

我尝试更改 animation_opts() 参数，例如“frame”和“transition”，但动画保持不变。我也尝试在 javascript 代码中更改这些参数，动画甚至没有开始。

library(shiny)
  library(plotly)
  library(htmlwidgets)

  ui <- fluidPage(
    actionButton("anim", "Animate"),
    plotlyOutput("plot")
  )

  server <- function(input, output){
    output[["plot"]] <- renderPlotly({
      df <- data.frame(
        x = c(1,2,1), 
        y = c(1,2,1), 
        f = c(1,2,3)
      )
      df %>%
        plot_ly(
          x = ~x,
          y = ~y,
          frame = ~f,
          type = 'scatter',
          mode = 'markers',
          marker = list(size = 20),
          showlegend = FALSE
        ) %>% 
        animation_opts(frame = 5000, transition = 4500, redraw = FALSE) %>%
        animation_button(visible = FALSE) %>%
        onRender("
          function(el,x){
            $('#anim').on('click', function(){Plotly.animate(el);});
          }")

    })
  }

  shinyApp(ui, server)

我想为情节动画的帧和过渡持续时间设置一个参数，并能够在代码中更改它。

标签： javascriptrshinyplotlyr-plotly

Answer 1

以下是如何设置这些选项：

library(shiny)
library(plotly)
library(htmlwidgets)

ui <- fluidPage(
  actionButton("anim", "Animate"),
  plotlyOutput("plot")
)

server <- function(input, output){
  output[["plot"]] <- renderPlotly({
    df <- data.frame(
      x = c(1,2,1), 
      y = c(1,2,1), 
      f = c(1,2,3)
    )
    df %>%
      plot_ly(
        x = ~x,
        y = ~y,
        frame = ~f,
        type = 'scatter',
        mode = 'markers',
        marker = list(size = 20),
        showlegend = FALSE
      ) %>% 
#      animation_opts(frame = 5000, transition = 4500, redraw = FALSE) %>%
      animation_button(visible = FALSE) %>%
      onRender("
          function(el,x){
            $('#anim').on('click', function(){
              Plotly.animate(el, 
                null,
                {
                  transition: {
                    duration: 2000,
                    easing: 'cubic-in-out'
                  },
                  frame: {
                    duration: 2000
                  }
                }
              );
            });
          }")
  })
}

shinyApp(ui, server)