Animate the position of an element

Within an anims() call, itself passed to any anims argument, the anim_position() function can be used to express an animation where the position of the target element changes with time.

anim_position(x = NULL, y = NULL, easing_fn = NULL, initial = FALSE)

Arguments

x, y	The position of the element, expressed as x and y, at the keyframe time (given as the LHS value in the anims() call).
easing_fn	The timing or easing function to use for the animation. If not provided, the linear() timing function will be used (which is doesn't use any easing in the animation, just a linear movement). The other timing and easing functions are: step_start(), step_end(), ease_in(), ease_out(), and ease_in_out().
initial	Should this position be the initial position of the element? If so, use TRUE and any values provided to x and y will be disregarded.

Examples

# Basic animation of an element's
# position (moving to a new `x` and
# `y` position)
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)
    )
  )
#> <svg width="300" height="300">
#>   <style>
#>     @keyframes anim_position_000001 {
#>       0% {
#>         transform: translate(50px, 50px);
#>         animation-timing-function: linear();
#>       }
#>       100% {
#>         transform: translate(100px, 50px);
#>         animation-timing-function: linear();
#>       }
#>     }
#>     
#>     @keyframes anim_anchor_000001 {
#>       0% {
#>         transform: translate(-25px, -25px);
#>       }
#>       100% {
#>         transform: translate(-25px, -25px);
#>       }
#>     }
#>   </style>
#>   <g style="animation: 2s linear infinite both anim_position_000001;">
#>     <g style="animation: 2s linear infinite both anim_anchor_000001;">
#>       <rect width="50" height="50" stroke="magenta" fill="lightblue"/>
#>     </g>
#>   </g>
#> </svg>