-
Animating a pill-shaped object expanding along a path.
Hey everybody!
Got a bit of a headscratcher (for me) – I am trying to recreate this animation of a wifi icon.Link: https://giphy.com/gifs/fe4flXUvgFzvNwUtyO/html5
Where i’m stuck…
I don’t know how to smoothly expand the shape path from a circle to its final form along a curve.I though maybe I could do the initial expansion of the wifi rings with trim paths, then convert to a pre-comp then apply a stroke to that pre-comp layer, but either that doesn’t work or i’m not doing it right.
Any suggestions would be greatly appreciated!!!
-
3 Replies
-
As a suggestion:
1) Start with the FINAL design (in illustrator might be easiest).
2) Make sure the curves are all concentric, and mark the center point of the curves.
3) Import into AE, and set the anchor point exactly to the marked center point. then duplicate the layers.
4) Create a shape with a perfectly vertical edge that is large enough to completely cover the artwork, and line up the edge to the anchor point of the artwork. Use FILL only, no stroke.
5) Now duplicate this shape layer and set them so that one is immediately above each of the artwork layers.
6) Set one art layer to “Alpha Track Mask” and the other to “Inverse Alpha Track Mask”.
Now as you rotate each of the artwork layers, more or less of the design will be visible. If everything is aligned and concentric, you should be able to start with a circle and then expand.
Andrew Somers
VFX & Title Supervisor
https://www.GeneralTitles.com -
Or, going with your original idea;
Circle shape, no Fill, Stroke same colour as your background, Line Cap Round – Trim Paths to get one side of your arc. Add the Mirror Effect and set it up to create the other half of the arc.
Layer/Layer Styles/Stroke – set colour/size. -
Thank you a ton for the suggestions! Really helped me work through all the options in my head!
I neglected to mention the importance of transparency in the final animation and in why i was so stuck – this is an icon that will be exported with bodymovin/lottie for use in a mobile app. Unfortunately a lot of AE’s effects (layer styles) are still not fully supported or are against best practices in this workflow.
But anyway, I ended up reworking the animations a bit so that transparency wasn’t a limiting factor.
I first duplicated each of the trim paths in the wifi symbol
Set the stroke of the rear layers to white and increased by 4px to a total of 10px
Set the stroke of the top layers to match the background color of the sphere behind – effectively treating them like a mask to get the pill shape.Then we can update the colors of the sphere and “mask” at runtime with lottie.
Heres a preview: https://www.lottiefiles.com/share/5rG01Y
Thanks again!
Reply to this Discussion! Login or Sign Up