Question

我想为一个闪亮的滑块设置动画，以便在单击播放按钮时从右到左自动向后移动。我找不到解决办法。滑块将模仿10秒钟的倒计时，这是我当前的代码，它以错误的方式运行。我尝试将步长，最小值，最大值等弄乱了，这还是有可能的。

nonce = secrets.token_urlsafe()

感谢您的帮助。

注意：实际上，主要问题不是很多，走错了路，而是倒计时，它应该开始完成并完成为空！

Answer 1

我结合了两个想法得出了一个令人满意的解决方案：

@phalteman的上述answer，由于使用了sliderTextInput，允许文本标签向后计数
由于我们无法使滑块从右开始，因此至少可以使它看起来像条正在减小（否则倒数计时是没有意义的）。 CSS 技巧，即使滑动条仍在增加，它也会使滑动条看起来像在变小：我将滑动条的颜色与背景颜色进行了反转，所以看起来条实际上是空的背景逐渐被消耗（下图中的红色）。

将

css代码放置在tags$head部分：

.irs-bar {
    height: 20px !important;
    border-top: 1px solid #CCC !important;
    border-bottom: 1px solid #CCC !important;
    background: #CCC !important;
}

.irs-bar-edge {
    height: 20px !important;
    border: 1px solid #CCC !important;
    background: #CCC !important;
}

.irs-line {
    height: 20px !important;
    border: 1px solid #FF5964 !important;
    background: #FF5964 !important;
}

.irs-single {
    background: #FF5964 !important;
}

.irs-from, .irs-to, .irs-min, .irs-max, .irs-grid-text, .irs-grid-pol, .irs-slider {
    visibility:hidden !important;
}

CSS样式表将如下所示（我添加了 important 标签，因为出于某些原因未考虑更改...？

Answer 2

您可以模仿倒计时，方法是使用shinyWidgets::sliderTextInput()从10倒数到0，并指定滑块的降序，而不是编码从右到左移动的滑块。

ui <- fluidPage(useShinyjs(), extendShinyjs(text = jscode),
         tags$head(tags$style(HTML('.irs-from, .irs-to, .irs-min, .irs-max, .irs-grid-text, .irs-grid-pol, .irs-slider {visibility:hidden !important;}'))),
         h3("countdown"),
         sliderInput("countdown", label = "", width = '300px', min = 0, max = 10, value = 0, step = 0.1, post="secs",
           animate = animationOptions(interval = 50, playButton = "", pauseButton = "")),
         shinyWidgets::sliderTextInput("countdown2", label = "", width = '300px', 
              choices = seq(from = 10, to = 0, by = -0.1), post="secs", 
              animate = animationOptions(interval = 50, playButton = "", pauseButton = "")),
         actionButton("start", "start")
      )

不确定是否达到相同的视觉效果，但这可能是可以接受的解决方法...

Answer 3

我认为另一种使用完全不同的方法的方法是使用所需倒计时的 .gif 图片。

我上传了一个使用ggplot2创建的10秒gif的示例文件：https://ibb.co/tKQ4xps 该应用将像这样，在停止时使用修复图像：

library(shiny)
ui <- fluidPage(h3("countdown 10secs"),
                htmlOutput("display.image"),actionButton("start", "start"),actionButton("stop", "stop"))
server <- function(input, output,session) {
  image = reactiveValues(name="full.png")
  observeEvent(input$start, {image$name="gif_timer_10sec.gif"}, ignoreInit = TRUE)
  observeEvent(input$stop, {image$name="full.png"}, ignoreInit = TRUE)
  output$display.image <- renderUI({
    HTML(paste0("<center><img height=25 width=300 align=left src=", image$name, "></center>"))})}
shinyApp(ui, server)

我还发布了基本代码以生成由gif组成的100张图像：

for (i in 100:1) {
  g = ggplot() + theme(line = element_blank(),text = element_blank(),title = element_blank())
  png(paste0("plot_", 200-i, ".png"))
  g = g + geom_col(aes_string(x=1, y=i), fill="#FF5964") + xlim(0.5,1.5) + ylim(0,100) + coord_flip()
  print(g); dev.off()
}

最终的应用程序如下所示：

使动画滑块向后（从右到左）模拟倒计时？

3 个答案: