anims {omsvg}

Express animations for an element

Description

All SVG element functions in omsvg (the ⁠svg_*()⁠ functions) are animatable through their anims argument. The anims() function should be used with that argument should we want to express animations for the element. Within the anims() function call, we can insert a list of formulas that incorporate calls to any of the ⁠anim_*()⁠ functions (e.g., anim_position(), anim_rotation(), etc.), and, have keyframe times as part of the formula.

Usage

anims(...)

Arguments

...

One or more animations that included the use of ⁠anim_*()⁠ functions, expressed as two-sided formulas. The LHS provides the keyframe time (in units of seconds) and the RHS is the associated ⁠anim_*()⁠ call.

Details

A useful template to use for an anims() call within an ⁠svg_*()⁠ function is:

anims = anims(
  <time_i> ~ <anim_fn>(...),
  ...,
  <time_n> ~ <anim_fn>(...)
  )

We can also use multiple calls to ⁠anim_*()⁠ functions for each distinct keyframe time by placing those calls in a list:

anims = anims(
  <time_i> ~ list(
    <anim_fn_x>(...),
    <anim_fn_y>(...)
    ),
  ...,
  <time_n> ~ list(
    <anim_fn_x>(...),
    <anim_fn_y>(...)
    )
  )

Value

A tibble of animation directives.

Examples

if (interactive()) {

# Basic animation of an element's
# position (moving to a new `x` and
# `y` position)
svg_1 <-
  SVG(width = 300, height = 300) %>%
  svg_rect(
    x = 50, y = 50,
    width = 50, height = 50,
    attrs = svg_attrs_pres(
      stroke = "magenta",
      fill = "lightblue"
    ),
    anims = anims(
      2.0 ~ anim_position(x = 100, y = 50)
    )
  )

# We can define multiple animations
# for a single element: put them in a
# `list()`; the `easing_fn` function for
# both `anim_*()` function is no longer
# linear but now eases in and out
svg_2 <-
  SVG(width = 300, height = 300) %>%
  svg_rect(
    x = 50, y = 50,
    width = 50, height = 50,
    attrs = svg_attrs_pres(
      stroke = "black",
      fill = "yellow"
    ),
    anims = anims(
      0.5 ~ list(
        anim_position(x = 50, y = 50, easing_fn = ease_in_out()),
        anim_rotation(0, easing_fn = ease_in_out())
      ),
      2.0 ~ list(
        anim_position(x = 200, y = 50, easing_fn = ease_in_out()),
        anim_rotation(90, easing_fn = ease_in_out())
      )
    )
  )

# The initial state of the element
# can be used in any `anim_*()`
# function with `initial = TRUE`
svg_3 <-
  SVG(width = 300, height = 300) %>%
  svg_rect(
    x = 50, y = 50,
    width = 50, height = 50,
    attrs = svg_attrs_pres(
      stroke = "black",
      fill = "yellow"
    ),
    anims = anims(
      1.0 ~ list(
        anim_position(initial = TRUE),
        anim_rotation(initial = TRUE)
      ),
      3.0 ~ list(
        anim_position(x = 200, y = 50),
        anim_rotation(90)
      ),
      5.0 ~ list(
        anim_position(initial = TRUE),
        anim_rotation(initial = TRUE)
      )
    )
  )
}