Animate an element through rotation

Within an anims() call, itself passed to any anims argument, the anim_rotation() function can be used to express an animation where the target element undergoes a rotation change with time.

anim_rotation(
  rotation = NULL,
  anchor = "center",
  easing_fn = NULL,
  initial = FALSE
)

Arguments

rotation	The rotation value of the element at the keyframe time (given as the LHS value in the anims() call).
anchor	The location of the element anchor about which rotation will occur. By default, this is the keyword "center".
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 rotation value be the initial rotation state of the element? If so, use TRUE and any value provided to rotation will be disregarded.

Examples

# This is a basic animation of an
# element's rotation state (moving to
# a new `rotation` value)
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_rotation(rotation = 180)
    )
  )
#> <svg width="300" height="300">
#>   <style>
#>     @keyframes anim_position_000001 {
#>       0% {
#>         transform: translate(50px, 50px);
#>         animation-timing-function: linear();
#>       }
#>       100% {
#>         transform: translate(50px, 50px);
#>         animation-timing-function: linear();
#>       }
#>     }
#>     
#>     @keyframes anim_rotation_000001 {
#>       0% {
#>         transform: rotate(0deg);
#>         animation-timing-function: linear();
#>       }
#>       100% {
#>         transform: rotate(180deg);
#>         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_rotation_000001;">
#>       <g style="animation: 2s linear infinite both anim_anchor_000001;">
#>         <rect width="50" height="50" stroke="magenta" fill="lightblue"/>
#>       </g>
#>     </g>
#>   </g>
#> </svg>