R闪亮-如何消除闪烁时使用SliderInput动画静态图像

Question

我正在构建一个闪亮的面板，并计划使用SliderInput为一组现有png设置动画。为此，在UI中我有：

tabItem(tabName = 'Image',
fluidRow(
box(title = "", status="primary",solidHeader = F,width = 9,
uiOutput("animate_img"),
tags$style(type="text/css", "recalculating { opacity: 1.0 !important; }") # NOT WORKING
),
box(
title = "Options", status="info",solidHeader = TRUE,width = 3,
sliderInput("dates_img",
"Dates:",
min = as.Date("2017-01-01","%Y-%m-%d"),
max = as.Date("2018-12-31","%Y-%m-%d"),
value=as.Date("2017-01-01"),
timeFormat="%Y-%m-%d",
animate=animationOptions(interval=1000, loop = TRUE))
)
)
)

在服务器上我有：

output$animate_img <- renderUI({
y <- year(input$dates_img)
d <- yday(input$dates_img)
filename <- sprintf("img_%d_%d.png",d,y)
tags$img(src = filename, width="100%")
})

当这个代码用于显示图像时；播放"；按钮输入以设置图像的动画，在加载每个图像时都会闪烁。如果可能的话，我想要一个流畅的动画。

正如这里所建议的，我已经尝试将tags$style(type="text/css", "recalculating { opacity: 1.0 !important; }")添加到UI中，但这不起作用。

关于如何在播放动画时防止图像闪烁，有什么建议吗？非常感谢。

Answer 1

我只需调整CSS在渲染HTML中的包含方式，就可以让它在没有任何闪烁的情况下工作。我在示例中使用了shinyjs::inlineCSS，但也可以通过使用tags$head和tags$script或includeCSS等来获取外部样式表.css文件。关键是将CSS加载到整个HTML文档的头部(可以通过浏览器DevTools进行验证(：

library(shiny)
library(shinydashboard)
library(shinyjs)
library(lubridate)
ui <- fluidPage(
shinyjs::inlineCSS(
"recalculating { opacity: 1.0 !important; }"
),
fluidRow(
box(title = "",
status = "primary",
solidHeader = F,
width = 9,
uiOutput("animate_img")
),
box(
title = "Options",
status = "info",
solidHeader = TRUE,
width = 3,
sliderInput("dates_img",
"Dates:",
min = as.Date("2017-01-01","%Y-%m-%d"),
max = as.Date("2018-12-31","%Y-%m-%d"),
value = as.Date("2017-01-01"),
timeFormat = "%Y-%m-%d",
animate = animationOptions(interval = 1000, loop = TRUE))
)
)
)
server <- function(input, output) {
output$animate_img <- renderUI({
y <- year(input$dates_img)
d <- yday(input$dates_img)
filename <- sprintf("img_%d_%d.png",d,y)
tags$img(src = filename, width="100%")
})
}
shinyApp(ui = ui, server = server)

只要确保您的图像文件直接放在www文件夹中，它就可以工作了。

谢谢，Jimmy