Using tweenr and gganimate to create a spinner
TJ Mahr
This demo shows how to recreate this animation of a spinner using tweener and gganimate. These packages abstract over two tasks in the original post:
- tweenr smoothly interpolates values so we can generate data between key animation steps.
- gganimate creates animations by mapping values in a
framevariable to frames in an animation.
library(tweenr)
library(ggplot2)
library(gganimate)We create deceleration using the quadratic out easing function.
display_ease("quadratic-out")
There are three key animation steps:
- time 1, angle 0: start
- time 100, angle 2200: final spinner location
- time 110, angle 2200: linger on final spot
# We convert angle to 0-360 scale later on
df <- data.frame(
angle = c(0, 2200, 2200),
time = c(1, 100, 110),
group = 1,
ease = "quadratic-out"
)
df## angle time group ease
## 1 0 1 1 quadratic-out
## 2 2200 100 1 quadratic-out
## 3 2200 110 1 quadratic-outtweener interpolates between these states.
df <- tweenr::tween_elements(df, "time", "group", "ease", nframes = 100)
df$angle <- df$angle %% 360
df## angle time .frame .group
## 1 0.000000 1.000000 0 1
## 2 48.085980 3.163869 1 1
## 3 95.640628 5.303828 2 1
## 4 142.663941 7.419877 3 1
## 5 189.155897 9.512015 4 1
## 6 235.116531 11.580244 5 1
## 7 280.545858 13.624564 6 1
## 8 325.443795 15.644971 7 1
## 9 9.810426 17.641469 8 1
## 10 53.645685 19.614056 9 1
## 11 96.949636 21.562734 10 1
## 12 139.722248 23.487501 11 1
## 13 181.963553 25.388360 12 1
## 14 223.673453 27.265305 13 1
## 15 264.852079 29.118344 14 1
## 16 305.499365 30.947471 15 1
## 17 345.615312 32.752689 16 1
## 18 25.199853 34.533993 17 1
## 19 64.253120 36.291390 18 1
## 20 102.774982 38.024874 19 1
## 21 140.765636 39.734454 20 1
## 22 178.224819 41.420117 21 1
## 23 215.152793 43.081876 22 1
## 24 251.549362 44.719721 23 1
## 25 287.414657 46.333660 24 1
## 26 322.748481 47.923682 25 1
## 27 357.551097 49.489799 26 1
## 28 31.822307 51.032004 27 1
## 29 65.562243 52.550301 28 1
## 30 98.770709 54.044682 29 1
## 31 131.447966 55.515158 30 1
## 32 163.593752 56.961719 31 1
## 33 195.208330 58.384375 32 1
## 34 226.291568 59.783121 33 1
## 35 256.843467 61.157956 34 1
## 36 286.863894 62.508875 35 1
## 37 316.353114 63.835890 36 1
## 38 345.310993 65.138995 37 1
## 39 13.737533 66.418189 38 1
## 40 41.632602 67.673467 39 1
## 41 68.996594 68.904847 40 1
## 42 95.828984 70.112304 41 1
## 43 122.130165 71.295857 42 1
## 44 147.900007 72.455500 43 1
## 45 173.138509 73.591233 44 1
## 46 197.845671 74.703055 45 1
## 47 222.021494 75.790967 46 1
## 48 245.666108 76.854975 47 1
## 49 268.779252 77.895066 48 1
## 50 291.361055 78.911247 49 1
## 51 313.411388 79.903512 50 1
## 52 334.930644 80.871879 51 1
## 53 355.918429 81.816329 52 1
## 54 16.374874 82.736869 53 1
## 55 36.299980 83.633499 54 1
## 56 55.693746 84.506219 55 1
## 57 74.556303 85.355034 56 1
## 58 92.887390 86.179933 57 1
## 59 110.687006 86.980915 58 1
## 60 127.955544 87.757999 59 1
## 61 144.692743 88.511173 60 1
## 62 160.898471 89.240431 61 1
## 63 176.572859 89.945779 62 1
## 64 191.716039 90.627222 63 1
## 65 206.327879 91.284755 64 1
## 66 220.408249 91.918371 65 1
## 67 233.957148 92.528072 66 1
## 68 246.974969 93.113874 67 1
## 69 259.461582 93.675771 68 1
## 70 271.416461 94.213741 69 1
## 71 282.840133 94.727806 70 1
## 72 293.732595 95.217967 71 1
## 73 304.093850 95.684223 72 1
## 74 313.923502 96.126558 73 1
## 75 323.221684 96.544976 74 1
## 76 331.988919 96.939501 75 1
## 77 340.224683 97.310111 76 1
## 78 347.928977 97.656804 77 1
## 79 355.101931 97.979587 78 1
## 80 1.743808 98.278471 79 1
## 81 7.854214 98.553440 80 1
## 82 13.433149 98.804492 81 1
## 83 18.480744 99.031633 82 1
## 84 22.997262 99.234877 83 1
## 85 26.982310 99.414204 84 1
## 86 30.435886 99.569615 85 1
## 87 33.358123 99.701116 86 1
## 88 35.749283 99.808718 87 1
## 89 37.609103 99.892410 88 1
## 90 38.937321 99.952179 89 1
## 91 39.734199 99.988039 90 1
## 92 40.000000 100.000000 91 1
## 93 40.000000 102.098765 92 1
## 94 40.000000 103.950617 93 1
## 95 40.000000 105.555556 94 1
## 96 40.000000 106.913580 95 1
## 97 40.000000 108.024691 96 1
## 98 40.000000 108.888888 97 1
## 99 40.000000 109.506173 98 1
## 100 40.000000 109.876544 99 1
## 101 40.000000 110.000000 100 1Now we can generate the animation.
df_spinner <- data.frame(outcome = c("success", "failure"), prob = c(0.3, 0.7))
p <- ggplot(data = df_spinner) +
geom_bar(aes(x = factor(1), y = prob, fill = outcome),
stat = "identity", position = "fill") +
coord_polar(theta = "y", start = 0, direction = 1) +
scale_y_continuous(breaks = c(0.12, 0.7), labels = c("success", "failure")) +
geom_segment(aes(y = angle / 360, yend = angle / 360, x = -1, xend = 1.4,
frame = .frame),
data = df, arrow = arrow(type = "closed"), size = 1) +
theme(axis.title = element_blank(),
axis.ticks = element_blank(),
axis.text.y = element_blank(),
panel.grid = element_blank(),
panel.border = element_blank(),
legend.position = "none") +
geom_point(aes(x = -1, y = 0), color ="#666666", size = 5)## Warning: Ignoring unknown aesthetics: framegganimate(p, "spinner.gif", title_frame = FALSE, interval = 1 / 24)## Executing:
## "convert -loop 0 -delay 4.16666666666667 Rplot1.png Rplot2.png
## Rplot3.png Rplot4.png Rplot5.png Rplot6.png Rplot7.png
## Rplot8.png Rplot9.png Rplot10.png Rplot11.png Rplot12.png
## Rplot13.png Rplot14.png Rplot15.png Rplot16.png Rplot17.png
## Rplot18.png Rplot19.png Rplot20.png Rplot21.png Rplot22.png
## Rplot23.png Rplot24.png Rplot25.png Rplot26.png Rplot27.png
## Rplot28.png Rplot29.png Rplot30.png Rplot31.png Rplot32.png
## Rplot33.png Rplot34.png Rplot35.png Rplot36.png Rplot37.png
## Rplot38.png Rplot39.png Rplot40.png Rplot41.png Rplot42.png
## Rplot43.png Rplot44.png Rplot45.png Rplot46.png Rplot47.png
## Rplot48.png Rplot49.png Rplot50.png Rplot51.png Rplot52.png
## Rplot53.png Rplot54.png Rplot55.png Rplot56.png Rplot57.png
## Rplot58.png Rplot59.png Rplot60.png Rplot61.png Rplot62.png
## Rplot63.png Rplot64.png Rplot65.png Rplot66.png Rplot67.png
## Rplot68.png Rplot69.png Rplot70.png Rplot71.png Rplot72.png
## Rplot73.png Rplot74.png Rplot75.png Rplot76.png Rplot77.png
## Rplot78.png Rplot79.png Rplot80.png Rplot81.png Rplot82.png
## Rplot83.png Rplot84.png Rplot85.png Rplot86.png Rplot87.png
## Rplot88.png Rplot89.png Rplot90.png Rplot91.png Rplot92.png
## Rplot93.png Rplot94.png Rplot95.png Rplot96.png Rplot97.png
## Rplot98.png Rplot99.png Rplot100.png Rplot101.png
## "spinner.gif""## Output at: spinner.gif