#try!SwiftTokyo2025 Exploring SwiftUI Path Animations featuring Japan Symbol Quiz

#try!SwiftTokyo2025 Exploring SwiftUI Path Animations featuring Japan Symbol Quiz

This article summarizes the contents of the lightning talk “Exploring SwiftUI Path Animations featuring Japan Symbol Quiz” given at try!SwiftTokyo2025.
In this presentation, I talked about the mechanism of SwiftUI Path animations and how to use them.
Specifically, at the beginning, I first confirmed how to achieve the following animations using only SwiftUI.

This article summarizes how this animation is realized and the subsequent Symbol Quiz.
Slides is distributed on TestFlight, so you can download it as an iOS/macOS app and check it out (of course, this app depends on SlideKit).
You can also check out the source code of this slide app on GitHub (Slidys).
And you can also check out SymbolKit, which is an extracted version of the symbol quiz function, on GitHub (SymbolKit).

How SwiftUI Path animation works

Here’s a quick rundown of how the animation works:

1. Prepare the path of the shape you want to animate
   • In this case, the path prepared in SVG is converted to a SwiftUI path using a tool such as SVG to SwiftUI
     
   • In the future, I would like to be able to create this conversion logic myself
     
2. Define a Shape with the above SwiftUI Path set, and apply the Animatable Protocol to that Shape
   • The Animatable Protocol is set to ensure that SwiftUI animations that are executed for specific values ​​are executed smoothly in the intended way (the animation itself will not work even if it is not set, but there are times when it is not executed in the intended way)
     
   • In this case, the
     animationProgress that manages the progress rate of the animation is set as the animatableData
     
3. Use the Path’s trimmedPath function, pass 0 as the from argument and the animation progress rate as the to argument, so that the path is trimmed.
   
4. Change the value of animationProgress from 0 to 1, and run the animation so that the path gradually appears.

The implementation above is described in this SymbolKit (Code)
Basically, as long as you have a SwiftUI Path, you can use this mechanism to animate any shape.
You can also use a similar mechanism to achieve similar functionality on other platforms, such as Flutter.

Symbol Quiz – Using SwiftUI Path Animations

So in what situations can this Path animation be used?
Perhaps some of the functions that have been realized with mp4 or Lottie can be realized with just Swift code without using resource files or libraries.
I thought of a way to use it not in such a practical way, but in a slightly more entertaining way.

Recently, a regional Swift event called Japan-\(region).swift has been held in Japan.
At the time of writing this article, the following events are being held.

I participated in some of the events mentioned above and did LTs, but at some of them I was asked to do a LT that was based on local content, not just technical content. Taking this into consideration, I came up with the idea of ​​a symbol quiz, and gave it as a LT at several events afterwards.

Currently, I did symbol quizzes at the four events shown in the video above, and instead of the same content at each event, I have added small technical updates and conducted different content.
By the way, the Japan Symbol Quiz done at the LT of this try!SwiftTokyo2025 is as follows.

Since many participants from overseas will be taking part, I chose cherry blossoms as it is easy for them to understand, and also because it is spring.
We also added a function to SymbolKit that allows you to overlay a view for the correct answer when the answer is announced, so that the pink color characteristic of cherry blossoms can be easily displayed when the answer is correct.

Wrap up

This time, I summarized the contents of the talk at the try!SwiftTokyo2025 LT about SwiftUI’s Path animation.

It’s not a very deep technical topic, but I thought it was an interesting theme with various applications, including symbol quizzes.

I also think there is still room for further development.

Also, as of the time of writing this article, the next event for Japan-\(region).swift is Nagoya.swift.
I’m also planning to participate in the LT slot, so if you’re interested, let’s meet in Nagoya!
It will be fun to be able to communicate with people you don’t usually see at regular study sessions in Tokyo!