Animate an element through scaling

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

anim_scale(scale = NULL, easing_fn = NULL)

Arguments

scale	The scale value of the element at the keyframe time (given as the LHS value in the anims() call). If providing a single scaling value, the scaling will operate in the x and y directions (relative to the center of the element). If two values are provided, these will be taken as scaling values in the x and y directions.
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().

Examples

# Basic animation of an element's
# scaling state (moving to a new
# `scale` 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_scale(scale = 2)
    )
  )
#> <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_scale_000001 {
#>       0% {
#>         transform: scale(1, 1);
#>         animation-timing-function: linear();
#>       }
#>       100% {
#>         transform: scale(2, 2);
#>         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_scale_000001;">
#>       <g style="animation: 2s linear infinite both anim_anchor_000001;">
#>         <rect width="50" height="50" stroke="magenta" fill="lightblue"/>
#>       </g>
#>     </g>
#>   </g>
#> </svg>