A family of constructors for Anime.js v4 easing specifications. Each
returns an anime_easing object that serialises to the corresponding
Anime.js v4 easing inside anime_timeline(), anime_add(),
anime_animate(), or anime_playback().
Usage
anime_easing(family = "Quad", direction = "out")
anime_easing_elastic(direction = "out", amplitude = 1, period = 0.3)
anime_easing_back(direction = "out", overshoot = 1.70158)
anime_easing_bezier(x1, y1, x2, y2)
anime_easing_steps(count, from_start = FALSE)
anime_easing_spring(bounce = 0.5, duration = 628)Arguments
- family
Character. One of "linear", "Quad", "Cubic", "Quart", "Quint", "Sine", "Expo", "Circ", "Bounce".
- direction
Character. One of "in", "out", "inOut", "outIn".
- amplitude, period
(Elastic easing) Numeric. Overshoot amplitude in [1, 10] and oscillation period in (0, 2].
- overshoot
(Back easing) Numeric. Overshoot amount.
- x1, y1, x2, y2
(Cubic bezier easing) Coordinates of the first and second control point.
x1andx2must be in [0, 1].- count
(Steps easing) Positive integer. Number of discrete steps.
- from_start
(Steps easing) Logical. If
TRUE, the value jumps at the start of each step instead of the end (CSSjump-startvsjump-end).- bounce
(Spring easing) Number in [-1, 1]. Controls bounciness. Values from 0 to 1 produce bouncy curves; values below 0 produce over-damped curves. Keep within [-0.5, 0.5] for predictable behaviour.
- duration
(Spring easing) Number in [10, 10000]. The perceived duration in milliseconds at which the animation feels visually complete.
Details
Plain Anime.js v4 easing name strings (e.g. "inOutSine",
"outElastic(1,0.3)") are also accepted wherever an anime_easing object
is expected. Note that Anime.js v4 has removed the string syntax for
cubicBezier(), steps(), and spring easings; use the constructors below
for those, and the widget reconstructs the corresponding function calls in
JavaScript.
Examples
anime_easing("linear")
#> $name
#> [1] "linear"
#>
#> $params
#> list()
#>
#> attr(,"class")
#> [1] "anime_easing"
anime_easing("Quad", "outIn")
#> $name
#> [1] "outInQuad"
#>
#> $params
#> list()
#>
#> attr(,"class")
#> [1] "anime_easing"
anime_easing_elastic()
#> $name
#> [1] "outElastic"
#>
#> $params
#> $params$amplitude
#> [1] 1
#>
#> $params$period
#> [1] 0.3
#>
#>
#> attr(,"class")
#> [1] "anime_easing"
anime_easing_elastic("in", amplitude = 1.5, period = 0.3)
#> $name
#> [1] "inElastic"
#>
#> $params
#> $params$amplitude
#> [1] 1.5
#>
#> $params$period
#> [1] 0.3
#>
#>
#> attr(,"class")
#> [1] "anime_easing"
anime_easing_back()
#> $name
#> [1] "outBack"
#>
#> $params
#> $params$overshoot
#> [1] 1.70158
#>
#>
#> attr(,"class")
#> [1] "anime_easing"
anime_easing_back("in", overshoot = 2.5)
#> $name
#> [1] "inBack"
#>
#> $params
#> $params$overshoot
#> [1] 2.5
#>
#>
#> attr(,"class")
#> [1] "anime_easing"
anime_easing_bezier(0.4, 0, 0.2, 1)
#> $name
#> [1] "cubicBezier"
#>
#> $params
#> $params$x1
#> [1] 0.4
#>
#> $params$y1
#> [1] 0
#>
#> $params$x2
#> [1] 0.2
#>
#> $params$y2
#> [1] 1
#>
#>
#> attr(,"class")
#> [1] "anime_easing"
anime_easing_bezier(0.68, -0.55, 0.265, 1.55)
#> $name
#> [1] "cubicBezier"
#>
#> $params
#> $params$x1
#> [1] 0.68
#>
#> $params$y1
#> [1] -0.55
#>
#> $params$x2
#> [1] 0.265
#>
#> $params$y2
#> [1] 1.55
#>
#>
#> attr(,"class")
#> [1] "anime_easing"
anime_easing_steps(10)
#> $name
#> [1] "steps"
#>
#> $params
#> $params$count
#> [1] 10
#>
#> $params$from_start
#> [1] FALSE
#>
#>
#> attr(,"class")
#> [1] "anime_easing"
anime_easing_steps(5, from_start = TRUE)
#> $name
#> [1] "steps"
#>
#> $params
#> $params$count
#> [1] 5
#>
#> $params$from_start
#> [1] TRUE
#>
#>
#> attr(,"class")
#> [1] "anime_easing"
anime_easing_spring()
#> $name
#> [1] "spring"
#>
#> $params
#> $params$bounce
#> [1] 0.5
#>
#> $params$duration
#> [1] 628
#>
#>
#> attr(,"class")
#> [1] "anime_easing"
anime_easing_spring(bounce = 0.65, duration = 350)
#> $name
#> [1] "spring"
#>
#> $params
#> $params$bounce
#> [1] 0.65
#>
#> $params$duration
#> [1] 350
#>
#>
#> attr(,"class")
#> [1] "anime_easing"