inst/doc/animejs.R

In animejs: R Bindings to the 'Anime.js' Animation Library

## ----include = FALSE----------------------------------------------------------
knitr::opts_chunk$set(
  collapse = TRUE,
  comment = "#>"
)

## ----minimal------------------------------------------------------------------
library(animejs)

svg_src <- '
<svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
  <circle data-animejs-id="c1" cx="50"  cy="100" r="20" fill="#4e79a7"/>
  <circle data-animejs-id="c2" cx="120" cy="100" r="20" fill="#f28e2b"/>
  <circle data-animejs-id="c3" cx="190" cy="100" r="20" fill="#e15759"/>
</svg>
'

anime_timeline(
  duration = 800,
  ease = anime_easing_elastic(),
  loop = TRUE
) |>
  anime_add(
    selector = anime_target_css("circle"),
    props = list(
      translateY = anime_from_to(-80, 0),
      opacity = anime_from_to(0, 1)
    ),
    stagger = anime_stagger(150, from = "first")
  ) |>
  anime_add(
    selector = anime_target_id("c2"),
    props = list(r = anime_from_to(20, 40)),
    offset = "+=200"
  ) |>
  anime_playback(controls = TRUE) |>
  anime_render(svg = svg_src, width = "360px")

## ----animate------------------------------------------------------------------
anime_animate(
  selector = anime_target_css("circle"),
  props = list(
    translateY = anime_from_to(-60, 0),
    opacity = anime_from_to(0, 1)
  ),
  ease = anime_easing_spring(),
  stagger = anime_stagger(120)
) |>
  anime_render(svg = svg_src, width = "360px")

## ----timeline-----------------------------------------------------------------
tl <- anime_timeline(
  duration = 1000,
  ease = anime_easing("Cubic", "inOut"),
  loop = TRUE
)

## ----from_to, eval = FALSE----------------------------------------------------
# anime_from_to(0, 1) # opacity: 0 → 1
# anime_from_to(0, 100, "px") # translateX: "0px" → "100px"
# anime_from_to(0, 1, ease = anime_easing_spring()) # per-property easing

## ----keyframes, eval = FALSE--------------------------------------------------
# # Bare numeric keyframes
# anime_keyframes(0, 1, 0.5)
# 
# # List-based keyframes with per-keyframe easing
# anime_keyframes(
#   list(to = 0),
#   list(to = 1, ease = "outQuad", duration = 400),
#   list(to = 0.5, ease = anime_easing_bezier(0.4, 0, 0.2, 1))
# )

## ----stagger, eval = FALSE----------------------------------------------------
# anime_add(
#   tl,
#   selector = ".bar",
#   props = list(scaleY = anime_from_to(0, 1)),
#   stagger = anime_stagger(80, from = "center")
# )

## ----playback, eval = FALSE---------------------------------------------------
# tl |>
#   anime_playback(
#     loop = TRUE,
#     loop_delay = 250,
#     alternate = TRUE,
#     playback_rate = 1.5,
#     controls = TRUE
#   ) |>
#   anime_render(svg = svg_src)

## ----events, eval = FALSE-----------------------------------------------------
# tl |>
#   anime_on("onComplete", "myOnCompleteHandler") |>
#   anime_render(svg = svg_src)

## ----shiny, eval = FALSE------------------------------------------------------
# library(shiny)
# 
# ui <- fluidPage(
#   sliderInput("duration", "Duration (ms)", 200, 2000, 800),
#   animejsOutput("anim", height = "200px")
# )
# 
# server <- function(input, output, session) {
#   output$anim <- renderAnimejs({
#     anime_animate(
#       selector = anime_target_css("circle"),
#       props = list(opacity = anime_from_to(0, 1)),
#       duration = input$duration
#     ) |>
#       anime_render(svg = svg_src)
#   })
# }
# 
# shinyApp(ui, server)

## ----save, eval = FALSE-------------------------------------------------------
# widget <- anime_render(tl, svg = svg_src)
# htmlwidgets::saveWidget(widget, "animation.html", selfcontained = TRUE)