温馨提示:本文翻译自stackoverflow.com,查看原文请点击:r - Refresh an image when it is clicked (play animation on click

r - 单击时刷新图像(单击时播放动画)

发布于 2020-03-29 21:36:51

我正在进行满意度调查。我觉得这很简单。只是三个笑脸。我认为这很高兴让用户收到一些有关单击了笑脸的反馈。虽然通知消息很棒,但我认为图像在单击时播放简单的动画会很棒。这是快乐的笑脸png图片测试gif只要将图像保存在文件夹图像中,就足以重现该问题。

我的想法是最初只是在应用程序启动时使用png图片,然后单击图像时,gif会在每次单击时替换png图像。我尝试了无数种方法并用Google搜索了所有内容,但我陷入了困境。如果有人对如何解决此问题有一个想法,这是非常基本的代码:

library(shiny)
library(shinyjs)
ui <- fluidPage(
  useShinyjs(),

   fluidRow(column(div(id = "happy", plotOutput("plot1")),width = 2,offset =1)
     )
)
server <- function(input, output) {

  output$plot1 <- renderImage({
       filename <- normalizePath(file.path('./images',  paste('happy','.png', sep='')))
       list(src = filename, width=250, height=250)
    }, deleteFile = FALSE)

  onclick(                            
    "happy", 
    { 
      #do stuff
      print("clicked on happy")
      showNotification(h4("Thanks!"), duration = 2,closeButton = FALSE, type = "message")
      })
}
shinyApp(ui = ui, server = server)

查看更多

提问者
jerry_K7
被浏览
14
jerry_K7 2020-02-12 04:25

安德里亚的回应在这里非常有帮助。尽管无法做到此事,因为.gif并非每次单击都播放。还有一种在每次单击时获得反馈的方法,该方法包括CSS动画为用户提供视觉反馈。这样做非常简单。在Andrea的代码中,我将调用添加到带有标签$ head(includeCSS(“ ./ www / animate.css”))的CSS文件中,然后在代码部分中,单击加载下一张图像,然后添加了属性class =“动画脉冲”。整个代码如下:

library(shiny)
library(shinyjs)

ui <- fluidPage(
  tags$head(includeCSS("./www/animate.css")),
  useShinyjs(),
  fluidRow(column(div(id = "happy", uiOutput("plot1")),width = 2,offset =1)
  )
  )

server <- function(input, output) {

  # Render a UI element instead of an image
  output$plot1 <- renderUI({
    div(id = "my_img",
        tags$img(src="0.png", height=250, width=250),
        width = 2, offset =1 )
  })

  onclick(
    "plot1", 
    { 
      print("clicked on happy")
      showNotification(h4("Thanks!"), duration = 2,closeButton = FALSE, type = "message")

      # Update UI element on click
      output$plot1 <- renderUI({
        div(id = "my_img",
            tags$img(src="0.png", class = "animated pulse", height=250, width=250),
            width=2, offset=1)
      })
    })
}
shinyApp(ui = ui, server = server)