SwiftUI Tip 💡
Easily animate SF Symbols that support Variable Color.
No spinner needed. The icon is the loading state.
.symbolEffect(.variableColor.reversing, isActive:)
This drawOn symbol effect is easy to take for granted, but it was actually a lot of work to get right.
1. SF symbols are not strokes. If you look closely at the signature, not all portions of the path are the same width.
2. Moving along the path and naively filling it would look awful! Consider filling along curves where one side of the path is shorter than the other. You want the animation to fill gracefully, but there's nothing that connects the two sides of the path.
The solution was to annotate each symbol with these "railroad track" guides
For anyone getting back into iOS development after WWDC:
The WWDC sale for my visual iOS course is still live.
👉 Lifetime access is back for a limited time.
👉 Yearly plan is also 50% off.