Refre sh изображение при нажатии (проигрывать анимацию при нажатии - блестящая)

Question

Я работаю над опросом удовлетворенности. Что довольно просто, или я так думал. Это всего лишь три смайлика. Я подумал, что было бы здорово, если бы пользователь получил отзыв о том, что на смайлика нажали. Хотя сообщение с уведомлением является отличным, я подумал, что было бы здорово, чтобы изображения воспроизводили простую анимацию при нажатии. Вот картинка png и test gif для счастливого смайлика. Этого будет достаточно, чтобы воспроизвести проблему, просто сохраните изображения в папке images.

Моя идея состояла в том, чтобы сначала просто использовать изображение png при запуске приложения, а затем при нажатии на изображение gif заменяет изображение png при каждом нажатии. Я пробовал бесчисленные способы и погуглил все, но я застрял. Если у кого-то есть идея, как решить эту проблему, вот самый базовый c код:

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)

Answer 1

Рефакторинг вашего кода немного (рендеринг элемента пользовательского интерфейса вместо изображения) Мне удалось визуализировать GIF при нажатии. Это решение является только частичным, поскольку после рендеринга gif элемент пользовательского интерфейса не go возвращается в предыдущее состояние (0.png), поэтому он не сможет рендерить gif при последующих щелчках.

Как правило Как правило, рекомендуется помещать изображения в папку www/.

library(shiny)
library(shinyjs)


ui <- fluidPage(
  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="happygif.gif"),
            width=2, offset=1)
      })
    }
  )

}


shinyApp(ui = ui, server = server)

Answer 2

Андреа ответ был очень полезным здесь. Пока дело не удалось сделать так, как было задумано, так как .gif проигрывается не при каждом клике. Существует еще один способ получения обратной связи при каждом нажатии, который включает CSS анимацию , чтобы обеспечить визуальную обратную связь для пользователей. Это очень просто сделать. К коду Андреа я добавил вызов в файл CSS с тегами $ head (включая CSS ("./www/animate.css")), а затем в раздел кода, где следующее изображение загружается при нажатии кнопки I добавлен атрибут 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)