How to wag a tail, part 2

Let's say we want to wag a tail. Like this:

How to do this? Just follow these simple steps:

1. Draw a base tail shape. Put it into a precomp.

2. Draw all inner details of the tail. Put it into another precomp.

3. Draw a Bezier line to use as a bone.

4. Calculate (u,v) coordinates of every vertex (x,y) and handle in all tail shapes, where u is t from [0,1] so that the distance between (x,y) and bone(t) is the smallest, and v is the d so that the distance between (x,y) and the normal at bone(t) multiplied by d and used as offset from bone(t) is smallest.

5. Cache the collection of (u,v) points in an array. Also remember the base length of the bone.

6. Animate the bone using path animation.

7. Transform (u,v) coordinates back into (x,y).

8. Use moving average to smoothen the values, with smaller window close to edges.

9. Use half-sine to smoothen moving average's window size.

10. Preserve smooth handles in the original shapes by averaging angles if original tangents are opposite of each other within epsilon.

11. Oh, and don't forget to adjust t based on length and cached original length of the bone.

12. Convert path expressions to keyframes.

13. Optimize path keyframes using linear interpolation if it's close enough to the original keyframes.

14. Done!

TL;DR: I can animate tails of any complexity now, and that's within the restrictions of Lottie format restricted by Telegram!