Reproducing an animation from scratch
Ilan Biala posted a video on the HS Hackers Facebook group, with a request that someone reproduce the effect in JavaScript.
The first thing I did was to break down the animation into its core elements: the two endpoints, the radius, and the center of the drawn arc. If we have all three pieces of information, this is enough to draw the desired arc.
The endpoints #
The first endpoint’s movement is easy to figure out: it doesn’t move! The second endpoint simply travels around the major circle of the animation, the same circle that the drawn arc is part of when the animation is paused. A quick write-up provides something much like the common loading animation.
The radius #
In finding the radius it’s critical to note that the animation comes in two segments: the loading-style circle and the second segment which looks like the arc is rotating. The loading circle, as shown above, is really easy to implement, and in it the radius is fixed (I set it to 60). It’s the second part that takes more thinking.
The key realization for me was that throughout the second segment of the animation the arc is a fixed portion of the circle equivalent to the portion of the circle which the arc at pause-state fills. This I initially thought to be one third of the circle, but later changed to five twelfths to better imitate the source video. Let that angle be t, the distance between the two endpoints be d.
The resulting radius, r, can be found using some simple trigonometry to be equal to (d/2) / sin(t/2).
The center #
Given the radius and endpoints we can find the center. We can easily find midpoint of the segment connecting the arc endpoints by averaging them, as well as find the length of the third side of the triangle via Pythagoras. From there it’s a simple matter of moving that many units in the direction normal to the segment to find the center of the arc. This is recalculated at each tick of the animation to find the current location of the moving center, and we get our result.
Adding a pause and a bit of styling polish gives us something that looks quite like the original video (although without the irritating flicker!).