anicon R package

class: center, middle, inverse, title-slide

# <code>anicon</code> R package
## Animated icons for R markdown and Shiny
### Emi Tanaka
### 2018/07/24

---

# Getting Started

```r
anicon::faa("leaf")
```

### Let's try bouncing

```r
anicon::faa("leaf", animate="bounce")
```

### Or embedding the icon inline

can be embedded by enclosing 
<code>r anicon::faa("leaf", animate="burst")</code> by back ticks.

???

including via trick here https://stackoverflow.com/questions/20409172/how-to-display-verbatim-inline-r-code-with-backticks-using-rmarkdown

doesn't work with table with r commands. "doesn't work" = --- doesn't start a new slide.

---

## Here's the list of all available animation

`anicon` | `animate` | `anicon` | `animate`
--- | --- | --- | ---
 | `burst` | | `pulse`
 | `bounce` | | `ring` 
 | `falling` | | `shake`
 | `flash` | | `spin`
 | `float` | | `spin-reverse`
 | `horizontal` | | `tada`
 | `passing` | | `vertical`
 | `passing-reverse` | | `wrench`

---

## Here's a more colourful list of all available animation

`anicon` | `animate` | `anicon` | `animate`
--- | --- | --- | ---
 | `burst` | | `pulse`
 | `bounce` | | `ring` 
 | `falling` | | `shake`
 | `flash` | | `spin`
 | `float` | | `spin-reverse`
 | `horizontal` | | `tada`
 | `passing` | | `vertical`
 | `passing-reverse` | | `wrench`

---

# Let's change the speed of the animation

```r
anicon::faa("leaf", animate="bounce")
```

### Go faster

```r
anicon::faa("leaf", animate="bounce", speed="fast")
```

### Go slower

```r
anicon::faa("leaf", animate="bounce", speed="slow")
```

---

# Let's grow it..

```r
anicon::faa("leaf", size=2, bgcolour="MistyRose", colour="green")
```
&emsp;&emsp;&emsp;&emsp;the container grows with it

```r
anicon::faa("leaf", grow=20, bgcolour="MistyRose", colour="green")
```
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;the container doesn't change

```r
anicon::faa("leaf", grow=-2, bgcolour="MistyRose", colour="green")
```
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;negative values will shrink it

---

# Changing position of the icon

```r
anicon::faa("magic", size=4, bgcolour="red", colour="pink", 
            position=c(3, 0, 3, 0))
```

```r
anicon::faa("magic", size=4, bgcolour="red", colour="pink", 
            position=c(0, 3, 3, 0))
```

Position is given as vector of length 4 specifying up, down, left and right, respectively.

---

# Hovering to trigger animation

### Try hovering over the icon

```r
anicon::faa("pagelines", size=3, colour="purple", 
            animate="wrench", anitype="hover", rtext="Hi there!")
```

Hi there!

### Now try hovering over the text this time

```r
anicon::faa("pagelines", size=3, colour="purple", 
            animate="wrench", anitype="parent-hover", 
            rtext="Hi there!")
```

Hi there!

---

# You can embed these into Shiny

It works in shiny by using say `tags$p(anicon::faa("child"))`.

Below is a working example,

```r
ui <- fluidPage(
 titlePanel(tags$p(anicon::faa("child"), 
 "Old Faithful Geyser Data")),
 sidebarLayout(
 sidebarPanel(
 sliderInput("bins", "Number of bins:",
 min = 1, max = 50,value = 30)
 ),
 mainPanel( plotOutput("distPlot"))
 )
)

server <- function(input, output) {
 output$distPlot <- renderPlot({
 ggplot(faithful, aes(waiting)) + 
 geom_histogram(bins=input$bins) + theme_bw()
 })
}
```
---

# Other features

```r
anicon::faa("magic", size=2, colour="blue", 
            rotate=45, rtext=" rotate")
```

rotate

```r
anicon::faa("magic", size=2, colour="blue", 
            flip="vertical", rtext=" flip it vertically")
```

flip it vertically

```r
anicon::faa("magic", size=2, colour="blue", 
            border=T, rtext=" put a border around it")
```

put a border around it

---

# `anicon` also has animated text!

```r
anicon::nia("Yes that's right!")
```

Yes that's right!

`anicon` | `anicon` 
--- | --- 
burst | pulse 
bounce | ring 
fallling | shake 
flash | spin 
float | spin-reverse 
horizontal | tada 
passing | vertical 
passing-reverse | wrench

---

# Animate your own images!

Behaves like `faa`!

```r
anicon::cia("logo.png", rotate=90, size=3, border=T)
```

```r
anicon::cia("logo.png", animate="wrench", ltext="Hello!",
            grow=20, flip="horizontal", border=T, bgcolor="#9BB1FF")
```

Hello!<img src="logo.png" style="height:2.25em; width:auto; transform: scaleX(-1); -webkit-transform: scaleX(-1); " align="middle"/>

```r
anicon::cia("logo.png", animate="wrench", anitype="parent-hover", ltext="Hello!", size=3)
```

Hello!
 <img src="logo.png" style="height:3em; width:auto; "/>

---

# Works with gif as well!

```r
anicon::cia("party_parrot.gif", size=3, border=T)
```

### You can disable animation in `cia` by `animate=F`

```r
anicon::cia("party_parrot.gif", animate=F, rotate=90, size=3)
```

Find more fun gifs at [slackmojis](https://slackmojis.com/)!

---

class: middle, center

# Icon layering and more to come!

@statsgen
 
https://github.com/emitanaka/anicon