-
Notifications
You must be signed in to change notification settings - Fork 4
/
anim.R
115 lines (111 loc) · 3.68 KB
/
anim.R
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
#' Set up Shiny app to use animation
#'
#' This function needs to be added in the UI if to want to add animation to your UI elements using shinyanimate.
#' @export
#' @examples
#' if(interactive()){withAnim()}
#' @seealso \code{\link{startAnim}}
withAnim <- function(){
shiny::tagList(
shiny::singleton(
shiny::tags$head(shiny::tags$link(rel="stylesheet",href="assets/animate.min.css"))
),
shiny::singleton(
shiny::tags$script(src="assets/addClass.js")
),
shiny::singleton(
shiny::tags$script(src="assets/scrollAnimation.js")
),
shiny::singleton(
shiny::tags$script(src="assets/util.js")
)
)
}
#'Start an animation
#'
#' Start an animation of the UI element.
#' @export
#' @param session The session object passed to function given to shinyServer.
#' @param id the id of the UI element for which you want to add animation.
#' @param type The type of animation to use, valid values correspond to the types in \url{https://daneden.github.io/animate.css/}
#' @param delay The time after which you want to add animationin milliseconds
#' @examples
#'if(interactive()){
#'library(shiny)
#'library(shinyanimate)
#'ui <- fluidPage(
#' withAnim(),
#' tags$div(id = 'title', h1('ANIMATION')),
#' actionButton(inputId = "button", label = "Animate")
#')
#'server <- function(input, output, session){
#' observeEvent(input$button,{
#' startAnim(session, 'title', 'bounce')
#' })
#'}
#'shinyApp(ui, server)
#'}
#'@seealso \code{\link{withAnim}}
#'
startAnim <- function(session, id, type = NULL, delay = NULL){
session$sendCustomMessage(
type = "addClass",
message = list(ele = session$ns(id), name = type, delay = delay))
}
#' Add animation on mouse hover for UI element.
#' @export
#' @param session The session object passed to function given to shinyServer.
#' @param id the id of the UI element for which you want animation on mouse hover.
#' @param type The type of animation to use, valid values correspond to the types in \url{https://daneden.github.io/animate.css/}
#' @examples
#' if(interactive()){
#' library(shiny)
#' library(shinyanimate)
#' ui <- fluidPage(
#' withAnim(),
#' tags$div(id = 'title', h1('HOVER ON ME'))
#' )
#' server <- function(input, output, session){
#' observe(addHoverAnim(session, 'title', 'bounce'))
#' }
#' shinyApp(ui, server)
#'}
#'@seealso \code{\link{withAnim}}
#'
addHoverAnim <- function(session, id, type = NULL) {
session$sendCustomMessage(
type = "addClassHover",
message = list(ele = session$ns(id), name = type))
}
#' Add animation on scroll for UI element.
#' @export
#' @param session The session object passed to function given to shinyServer.
#' @param id the id of the UI element for which you want animation on scroll.
#' @param type The type of animation to use, valid values correspond to the types in \url{https://daneden.github.io/animate.css/}
#' @examples
#' if(interactive()){
#' library(shiny)
#' library(shinyanimate)
#' ui <- fluidPage(
#' withAnim(),
#' tags$h1('Scroll below to see an animation'),
#' br(), br(), br(), br(), br(), br(), br(),
#' br(), br(), br(), br(), br(), br(), br(),
#' br(), br(), br(), br(), br(), br(), br(),
#' br(), br(), br(), br(), br(), br(), br(),
#' br(), br(), br(), br(), br(), br(), br(),
#' br(), br(), br(), br(), br(), br(), br(),
#' tags$div(id = 'title', h1('I ANIMATE ON SCROLL'))
#' )
#' server <- function(input, output, session){
#' observe(addScrollAnim(session, 'title', 'bounce'))
#' }
#' shinyApp(ui, server)
#'}
#'@seealso \code{\link{withAnim}}
#'
addScrollAnim <- function(session, id, type = NULL) {
session$sendCustomMessage(
type = "addClassScroll",
message = list(ele = session$ns(id), name = type))
}